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!December 14th, 2011 Posted in CSS
LESS and Sass are aimed at accomplishing the same thing, and are indeed so similar that you could easily confuse the two, but are they really created equal? Is there anything that one can do that the other can’t?
On a feature to feature basis, each syntax has one or two things that the other doesn’t. However, despite the fact that I was initially drawn to LESS’ simplicity, in the long run I couldn’t help but be sucked in by a few key features that make Sass really powerful. Follow along as I blow your mind with some of the amazing and unique features of Sass.December 13th, 2011 Posted in CSS
You already know how to use media queries to create a responsive design, but have you tried to use them for anything else? Is it possible that media queries can be used natively to improve your workflow?
Follow along as we completely break from tradition and hijack media queries to help us test and tweak a design. You’ve never seen media queries like this before!December 6th, 2011 Posted in CSS
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.December 5th, 2011 Posted in CSS
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.November 29th, 2011 Posted in CSS
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.November 23rd, 2011 Posted in CSS
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.November 15th, 2011 Posted in CSS
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!October 27th, 2011 Posted in CSS
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?October 24th, 2011 Posted in CSS
The average man considers which flavor of Doritos will taste good with his Heineken. The sophisticated man considers which cheese will pair well with his choice of wine. The designer of course considers which two fonts will look great on the same page.
Today we’re going to use the Google Font API as a playground for mixing fonts and finding ideal pairings. You’ll be able to skim through and instantly grab out selections that you think are appropriate for your projects. The best part? You need only to copy and paste our code to implement these fonts on your site. It’s completely free and there are no downloads required.October 23rd, 2011 Posted in CSS