CSS - Page 13

Learn the latest tips, techniques, and approaches for working with CSS.

Helpful Tips & Tools for Web Design Experiments
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!

Rolling Your Own Grid Layouts on the Fly Without a Framework
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!

Build a Web Page With CSS3 Flexbox
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!

Farewell Floats: The Future of CSS Layout
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.

3 Rock Solid Website Layout Examples: Coded
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.

Mastering CSS Reflections in Webkit
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.

Build a Responsive, Mobile-Friendly Web Page With Skeleton
CSS / 27 May 2011

Build a Responsive, Mobile-Friendly Web Page With Skeleton

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!

20 Amazing Examples of Using Media Queries for Responsive Web Design
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.

Build a Pure CSS Slideshow With Webkit Keyframes
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.