Learn the latest tips, techniques, and approaches for laying out your websites with CSS and stylesheets.
Multi-step CSS animations are easy with keyframes, but what if we want to use plain old transitions to achieve a similar effect? Further, how do we take a single hover event and translate that into multiple animations on different elements?
The answer lies in using buried hovers, a simple and effective trick you should definitely try out.
Using an image-based font can be a fun and quick way to implement icons across your site. It’s a super easy process that gives you complete freedom to go back and re-size your icons at any time.
Today we’ll use the excellent Pictos font to build a simple web page so you can get a feel for the process.
Today we’re going to learn about Attribute Selectors. What are they? How do I use them? What are the new CSS3 Attribute selectors? We’ll answer these questions and more.
Today’s article encourages you to get into the habit of devoting time to little experiments. Testing ideas and solving problems in a low-pressure and possibly even fun environment can massively boost your education and lead to awesome innovation.
We’ll start with some benefits and tips for experimenting with web development projects and finish up with a brief look at a few of the tools that I personally use to compose my own experiments. Let’s get started!
Do you hate CSS grid frameworks but love the rapid layout benefits that they provide? Do you struggle with the math and code necessary to create your own flexible multi-column layouts on the fly?
Today we’re going to walk you through creating your own basic, reusable system for creating multiple columns that you can implement anywhere any time with only a few lines of code. No bloated code or non-sematic class names required!
This article presents an extremely useful set of tips and best practices for those who are still fairly new to working with typography on the web.
We’ll go over the most popular methods for embedding web fonts, sizing fonts and setting a solid line-height.
Yesterday we discussed the future of CSS layout and a few of the new modules that CSS3 brings to the table in this arena. One of these that we briefly touched on was CSS3 Flexbox.
Today we’re going to dig deeper into this model and build a full-on web page with it. It will by no means be ready to implement on your projects but it will give you further insight into one possible way that we will be coding websites in years to come. Plus, this stuff is just flat out fun to play with!
Floats are one of the most basic tools for structuring a web page using CSS. They’re both one of the very first things that we learn about and one of the last things that we truly master.
Today’s article looks at some of the reasons that floats are pretty lame and takes a look at a number of alternative layout systems, some of which are still under development but may one day represent the standard for CSS-based layout.
Recently on Design Shack we featured an article titled “10 Rock Solid Website Layout Examples“, which broke down some common layouts into simple silhouette wireframes so you could easily apply them in your work.
Today I’ve chosen three of these layouts and converted them to live, responsive web pages with some HTML and CSS. They’re all super simple and easy enough for many beginners to take on, plus we’ll be using an awesome framework to do the heavy lifting.
The box-reflect property is just one of many awesome new CSS3 effects that Webkit brings to the table. Unfortunately, it’s not the easiest to use. There’s a lot of syntax that can be confusing and today we’re going to sift through it and explain it in detail so you can get the hang of it.
It’s important to note that, at this point, box-reflect is only supported by Webkit browsers. It’s a superfluous visual effect so you can use it as long as you accept that it’s not going to render in anything but Chrome and Safari.
Recently we published an article showcasing 20 Amazing Examples of Using Media Queries for Responsive Web Design. These web pages respond extremely well to different browser window sizes, from huge HD screens to smartphones.
Today we’re going to show you how to use a boilerplate called Skeleton to take the headaches out of designing and building a responsive web page. You’ll be stunned at how easy it is!
Responsive web design is one of the hottest topics among designers and developers right now. If you’re not quite sure what it’s all about, we’ll walk you through what it is, how it works and how CSS media queries are something you need to start incorporating into your own designs.
To top it all off, we’ll finish with twenty seriously impressive of responsive designs that use media queries to present experiences specifically catered to different visitors.