CSS - Page 13

Learn the latest tips, techniques, and approaches for laying out your websites with CSS and stylesheets.

CSS / 22 Jul 2011

How to Implement Some Slick Icons Using a Font and 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.

CSS / 7 Jul 2011

Helpful Tips & Tools for Web Design Experiments

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!

CSS / 6 Jul 2011

Rolling Your Own Grid Layouts on the Fly Without a Framework

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!

CSS / 5 Jul 2011

3 Must-Learn CSS Techniques for Perfect Web Typography

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.

CSS / 30 Jun 2011

Build a Web Page With CSS3 Flexbox

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!

CSS / 29 Jun 2011

Farewell Floats: The Future of CSS Layout

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.

CSS / 8 Jun 2011

3 Rock Solid Website Layout Examples: Coded

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.

CSS / 3 Jun 2011

Mastering CSS Reflections in Webkit

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.

CSS / 12 May 2011

20 Amazing Examples of Using Media Queries for Responsive Web Design

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.

CSS / 11 May 2011

Build a Pure CSS Slideshow With Webkit Keyframes

While playing around with Webkit Keyframe Animations I figured out a way to create an awesome little image slider using only CSS. It’s definitely a bit unconventional but it’s a great way to learn to think outside of the box with what you can do with CSS3.

Keep in mind that since we’re using Webkit Keyframes, this is purely an educational experiment and will only work in Safari or Chrome. As more browsers begin to support keyframe animations in the future, this method should become perfectly usable in your own web projects.