Slow motion effects can be attention-grabbing tone setters in your website. Careful use of animation helps users better understand a changing user interface. When to Animate Your User Interface When we see an interface visually animate from one state to the next, it helps the user understand “where” they are in the metaphorical spacial plane […]
CSS Variables: An Introduction, With Code Examples
CSS variables, also known as CSS custom properties, expand the script-like functionality of CSS into something that resembles a programming language. If you’re at all familiar with any type of programming language, you know that variables are the foundation of any action. Variables are set, compared, altered, and saved throughout the program as the means […]
Draw with CSS: Using CSS To Draw Elements
With clever use of CSS properties, it is in fact possible to draw very complex shapes. All the shapes below were drawn with CSS alone. It might be that CSS isn’t the best way to render shapes in the browser window, but it’s very fast and included for “free” on all modern browsers. Learn how […]
The Future of CSS
Anyone who knows a thing or two about coding is cognizant of the fact that CSS and HTML are necessary tools to shape a website according to the specifications of clients. CSS or Cascading Style Sheets is a front-end web development practice that makes use of graphical interfaces to interact and communicate with the user.
Getting Started with CSS Grid Layout
CSS has been a central web design tool for years and years now. And yet, CSS layouts have never been quite that elegant. Positioning two elements side-by-side has often required hacks or uncomfortable compromises. It feels like the language has been lagging behind its use since its creation. But now, CSS is jumping to the […]
What is Z-Index and How Does It Work?
Elements on a web page can stack for a variety of reasons. With basic CSS positioning tools, it’s possible to stack elements on top of one other with negative margins, floats, and other tools. Even without specific position, elements stack, with div stacking on backgrounds on table cells stacking on tables. But default stacking is […]
Using CSS Pseudo-elements and Pseudo-classes like ::before and ::after
CSS wasn’t always as flexible as it is today. By using CSS pseudo-elements and pseudo-classes, designers can target elements based on their dynamic states or positioning in relation to other elements.
Coding Buttons in CSS
CSS is the gold standard in web design, providing an organized framework for your website. It takes added skill, though, to turn a basic CSS grid into an interactive site. One of those necessary skills is adding clickable buttons within the CSS grid to enhance and simplify navigation. Once you’ve developed a basic CSS grid, […]
How to Change Default Text Wrapping with HTML and CSS
Remember the old days of the Internet where you have to scroll sideways? It’s a bit annoying, especially if you’re reading a lot of texts that had been extended to the side. Thankfully, web pages can be coded to wrap text, and you can choose to wrap it according to the text container width or […]
Avoiding Common Problems with CSS Grid
For many dark days, properly aligning objects on a webpage with CSS alone was close to impossible. With mostly-functional semi-hacks like float, positioning and in-like block, we could make it work, but it was far from perfect. When vexed by a particularly troublesome layout quirk, some event lamented the loss of <table> as a structural […]