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.July 25th, 2011 Posted in CSS
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.July 22nd, 2011 Posted in CSS
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.July 13th, 2011 Posted in CSS
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!July 7th, 2011 Posted in CSS
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!July 6th, 2011 Posted in CSS
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.July 5th, 2011 Posted in CSS
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!June 30th, 2011 Posted in CSS
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.June 29th, 2011 Posted in CSS
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.June 8th, 2011 Posted in CSS
Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity.
Today we’re going to run through several text-shadow examples that you can copy and paste for your own work.June 7th, 2011 Posted in CSS