CSS - Page 10

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

CSS / 19 Jan 2012

Create Amazing CSS Buttons on the Fly With CSSButton.me

Today we’re going to have some fun as we take a look at an awesome new free tool for web developers simply called CSS Button. This web app makes it quick and easy to make the CSS buttons of your dreams using simple and intuitive controls.

I’ve seen quite a few other CSS button makers before and almost none really merit repeated use, but this site has a lot going for it and can genuinely save you a lot of time and frustration. Let’s jump in and check it out!

CSS / 18 Jan 2012

Beating Borders: The Bane of Responsive Layout

Responsive design often requires setting your widths using percentages. This is easy enough to accomplish, that is until you start throwing borders into the mix. If your columns and total width are set using percentages, a static border size wreaks havoc on your layout.

Today we’re going to look at a couple of different ways to beat this problem. You’ll learn how to create a completely fluid layout that doesn’t mind extra borders or padding one bit.

CSS / 11 Jan 2012

Build a Fun Trivia Game With the CSS Active Selector

We’ve done a ton of fun stuff recently with the :hover selector. From button hover effects for beginners to more advanced hover tutorials and even onto using hovers with multiple backgrounds. Today we’re moving on and learning about a related but equally awesome selector that often gets overlooked.

With :active, we can control the state of an object while it’s being clicked. Typically, this takes the simple form of changing a link’s color while the mouse is pressed down, but we’re going to do something much more interesting. Follow along as we build a super cool, pure CSS presidential trivia game.

CSS / 3 Jan 2012

How to Build a Responsive Thumbnail Gallery

Recently I set out to build a responsive thumbnail gallery. I expected it to take me a few minutes, but in reality it took me a few hours to work through. We’ll walk through a similar process today to help you get your mind wrapped around how it works.

One major component of mastering responsive design is to figure out how to approach specific tasks and adjust to problems as they arise within the context of larger projects. One day you’ll be working on a project and will need a responsive gallery and you’ll remember this post on that very topic.

CSS / 2 Jan 2012

Mastering Mouse Enter and Exit Events With CSS Transitions

While working on a recent post that utilized CSS transitions, I stumbled upon some interesting revelations completely by accident. Switching up where you place the transition syntax can have a dramatic effect on how the transition is carried out.

Today we’re going to go over the various options for CSS transition syntax and how each affects the animation given whether your mouse is entering or exiting a hover.

CSS / 29 Dec 2011

Journey Into Mordor With CSS

Today’s project is silly and fun, but it does have a real point and educational purpose. In a recent article, I explored five ways to use multiple CSS background images to create cool hover effects. I had one idea in that article that I didn’t get to simply because its complexity merited a standalone explanation.

This article then is an extension of that previous discussion. We’ll be using multiple backgrounds to create a cool cinematic effect where someone traverses a map while the vantage point zooms out. The best and most nerd-tastic way to show this off is of course to use the familiar tale of Frodo crossing Middle Earth to arrive at Mount Doom in Mordor. Let’s get started.

CSS / 20 Dec 2011

Make It Snow on Your Website With CSS Keyframe Animations

The holiday season is at its peak and for some lucky people in weather appropriate climates, winter is in full swing. I live in Phoenix so real winter, and consequently snow, is really just a distant dream. Thus I am forced to turn to nerdery to get my fix!

Today we’re going to go over a super simple CSS technique that you can use to make it snow on your website. It’ll only take you a few minutes at the most and it serves as a great introduction to using multiple background images and keyframe animations in CSS.

CSS / 14 Dec 2011

Four Simple and Fun CSS Button Hover Effects for Beginners

Today we’re going to take a step back from advanced discussions about CSS preprocessors and return to some good old basics. We’ll work up four super simple CSS buttons, each with a unique animated hover effect.

Follow along with me and create your own fun button styles. Also feel free to grab my code and use it on your projects. If you’re a CSS newbie looking for a good way to make your buttons more interesting, this article is for you!

CSS / 5 Dec 2011

10 LESS CSS Examples You Should Steal for Your Projects

LESS, Sass and other CSS preprocessors represent an awesome way to extend CSS to be everything a programmer ever wanted. Variables, mathematical operations, mixins and a lot more make these tools invaluable to coders who can appreciate the benefits of typing less while accomplishing more.

One of the most major hurdles to getting started with these tools is simply figuring out just what the heck you’re going to do with them. We’ll help you out in a big way today by hooking you up with ten incredibly useful LESS snippets that you can drop into your projects today.

CSS / 29 Nov 2011

Create Five Awesome Hover Effects Using CSS Multiple Backgrounds

Today we’re going to have all kinds of fun with the CSS multiple backgrounds feature. You’ll learn how to use multiple backgrounds in a simple way and how to go much further by combining the technique with hover actions and CSS transitions to create some really cool effects.

Follow along as we code five different applications of this idea that you can copy and paste to create your own awesome hovers.

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!