CSS - Page 12

CSS / 23 Nov 2011

How to Build a Responsive Frankenstein Framework With LESS

CSS layout frameworks are super helpful, but they can be a mess. You always have to conform to someone else’s system, whether or not it makes sense to you.

Today we’re going to ditch this notion and build an ultra-lightweight framework that can be implemented wherever and however you want to achieve complex multi-column layouts in seconds flat. You build this Frankenstein Framework as you go so there are zero unused classes and absolutely no code bloat. Did I mention that it’s also easy to make to make it responsive? Read on to see the monster come to life.

CSS / 15 Nov 2011

6 Things I Learned About Print Stylesheets From HTML5 Boilerplate

Print stylesheets can be a pain if you don’t know what you’re doing. Before you even approach one you need to make sure to do some solid research into how to go about it.

Today we’re going to help you along by first discussing the conceptual considerations that you need to keep in mind when creating a print stylesheet. Then we’ll dive into some code from the famous HTML5 Boilerplate to see some modern solutions for addressing the problems that arise when printing from the web.

CSS / 27 Oct 2011

Build an Animated Sliding Menu With Pseudo Selectors and CSS3

Today we’re going to have all kinds of fun. First we’ll build an animated menu using some shiny new CSS3 while learning how to implement pseudo selectors in a practical way on a real project. Then we’ll follow that up with how to build the same thing without pseudo selectors for better browser support. Finally, we’ll end with a look at how to scrap all that fancy CSS in favor of some good old fashioned jQuery.

Join us as we examine not one but three ways to tackle a CSS sliding navigation menu!

CSS / 24 Oct 2011

What Is CSS? Back to Basics

This is the third article in our back to basics series where we’re taking a look at the absolute beginning concepts of web development. If you’re a designer with little to no knowledge of web programming, this series is for you.

In our first article, we went over what HTML is and in our second article we outlined the basic anatomy of an HTML document. Today we’ll jump to a new topic and answer a very important question: What is CSS?

CSS / 28 Sep 2011

CSS Button Tutorial: How to Code Buttons in 5 Simple Steps

Here at Design Shack we like to feature a full range of tutorials, from expert PHP projects to very simple CSS tips. Today’s tutorial is targeted at those still in the beginner stages of CSS.

One of the most frequent questions I get from CSS beginners is, “How do I create a button?” It’s a simple question with a complicated answer. There are quite a few ways to go about it and unfortunately there are also quite a few ways to go wrong. When I first started out in CSS, figuring out all the button syntax was one of the most persistent troubles I faced, it seemed like I was always doing it wrong. Today we’re going to walk through a very simple and flexible process that you can apply to any button you create. More important than the end result is the in-depth explanation at each point outlining why we do it that way.

CSS / 19 Sep 2011

Build an Animated Mario Block Navigation Menu With CSS3

Today we’re going to have some good clean fun by recreating the animated Mario Bros. question mark box with pure CSS3.

Along the way you’ll learn how to use several cool CSS3 technologies such as rounded corners, box and text shadows, and keyframe animations that work in both Safari and Firefox. Let’s jump in!

CSS / 15 Sep 2011

20 Awesome Responsive Templates and Themes (Free and Premium)

Responsive web design is all the rage at the moment, but as a full-time designer it’s hard to make time to pick up on new trends no matter how useful and perhaps even necessary they may be.

Pre-built themes and templates provide you with a quick and easy way to get started with responsive web design. Many of them do all the work for you and provide a simple plug and play workflow, others just take care of the heavy lifting by taking care of the media queries and give you complete control over design. This post contains 20 free and premium templates, all of which are fully responsive right out of the box.

CSS / 22 Aug 2011

Should Web Designers Know Code? Finding Compromise in a Tired Debate

Should web designers understand basic HTML and CSS? It’s a tired argument with two sides that refuse to yield, why even discuss it?

The purpose of this article is not to prove which group is right but to attempt to show that both sides do indeed make valid points and to see if analyzing these points brings us to a compromise that both parties can agree on.

CSS / 19 Aug 2011

CSS Selectors: Just the Tricky Bits

div > p + div[id*=’header’] – If you saw this jumbled mess of selectors in someone’s CSS, could you decipher it?

If not, then you’ll want to read this primer on funky CSS selectors that you should know!

CSS / 2 Aug 2011

Return of the Loading Bar: Are CSS3 and HTML5 the New Flash?

Today we’re going to discuss a little bit about how and why Flash came to be regarded in a negative light and how we can avoid running down the same path with the modern technologies replacing it.

CSS / 1 Aug 2011

Creating an Apple-Style Input Field With Display Labels

Apple is a very popular brand in the new technological age in which we live. Both designers and developers agree that Apple’s products display exquisite talent and passion for their skills. Over time user interface design has taken a turn upwards and is now one of the hottest topics amongst web designers.

Below I’ll be going over how to build a small Apple-styled input form with some basic structure and scripting. All code included is based off XHTML Transitional Doctype along with newer CSS2/CSS3 techniques. We’ll also be using the jQuery 1.4.1 library to support our display label functions.

CSS / 25 Jul 2011

Achieving Multi-Step Animations With CSS Transitions

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.