Media queries are a way to serve different css rules to different devices and device characteristics. They’re the final piece in allowing us to create designs that are truly responsive to our audience and how our visitors choose to view our sites.

The last few weeks we’ve been building up toward responsive layouts, first by creating flexible girds and then by adding flexible images and media inside those grids. Today we’ll add media queries to the mix.

How do you target Internet Explorer in your CSS? Do you use CSS hacks, conditional stylesheets or something else?

It’s the perfect trollbait. There have been plenty of discussions about this, and I don’t mean to start a new one. Everyone’s entitled to their own opinion, but the thing is that it’s not purely a philosophical matter. I am writing this article because I noticed there’s a lot of misunderstanding on the subject of CSS hacks.

People have been advocating three different approaches: conditional stylesheets, CSS hacks, or conditional classnames. All these techniques have their pros and cons. Let’s take a look.

We just would like to introduce you some effects or solutions which you may think are made using Javascript (or his friends) but after reading this post, you would be proud of CSS! All of them are made using Pure CSS

One of the few things that isn’t as simple to do with css as it should be is creating columns of equal heights. A variety of methods do exist, each with its pros and cons and I want to present 4 methods here.

Let’s think for a moment about what we mean by equal height columns.

We generally don’t mean that we want the content inside each column to be of equal height. If that were the case there really isn’t a problem as the height of the columns will naturally be the same height.

Cheat Sheets are useful because web-developers need to remember more things. It is hard to memorize syntax for web developers and designers since they are always evolving and rising. In this process, Cheat Sheet is always come in handy. These cheat sheets are designed to be printer friendly and you can use as reference cards.
Here is a collection of useful cheat sheet specially for front end web developer and manage effectively. It would helpful for HTML, CSS, JavaScript, etc. I hope you will find this article useful, lets get started!

This code snippet checks if a page has been modified since it was last displayed. If so, it sends a "304 not modified" header and exits, otherwise the content is rendered. Prepend this snippet on top of every PHP file you want to apply this intelligent caching-mechanism. Especially useful if you (have to) serve static content via php and want it to be cached like ordinary HTML or CSS.

The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don’t fully understand how it works. Also, in the past, it’s been linked to some pretty nasty browser bugs so it's normal to get nervous about using the float property in your CSS rule sets. Let’s calm those nerves and ease that frustration. I’ll show you exactly what the float property does to your elements and how incredibly useful it can be once you master it.

We see floats in the print world every time we pick up a magazine article with an image on the left or right with text flowing nicely around it. In the world of HTML/CSS, text will wrap around an image with the float property applied to it, much like in a magazine layout. Images are just one of the many use cases for the float property: we can also achieve the popular two-column layout using floats. In fact, you can float just about any element in your HTML. By learning and understanding float property basics, along with position property basics, you will be able to achieve any layout with confidence.

Charts and graphs are present on various types of sites in order to improve the user experience and show in a easier and more likeable way data for the visitors. These charts and graphs can be created using technologies like PHP, Flash, Javscript (jQuery, MooTools, Prototype) and CSS, but you don’t have to reinvent the wheel unless you have a lot of time at your disposal. What you can do is download and use these following charts and graphs made by ninja developers.

Following on from the previous enlarger demo this one makes use of the general sibling selector with :hover (now that it can be made to work in Safari and Chrome) to have the large image occupy the same frame as the small image and have smooth scrolling in Safari, Chrome, Opera and Firerfox v4 beta.

IE7, IE8, IE9 and Firefox v3x will have a jumpy enlarging image but at least the general sibling selector works in all these IE browsers.

In this article we will quickly go through the few steps of creating a cross browser compatible font face implementation.

Ostatnio natknąłem się na bardzo fajną rzecz – możliwość wysyłania pliku CSS w nagłówku HTTP. Daje to bardzo łatwą możliwość ukrycia swoich stylów CSS przed niedoświadczonymi developerami, niepożądanymi i wścibskimi oczami.

Oczywiście tak przesłane style CSS do strony nie stanowią większego problemu do obejścia dla doświadczonego developera (Firebug), niemniej nie każdemu będzie chciało się analizować nagłówki HTTP.

Fonts on the Web

The days of being limited to a handful of fonts on the web are very close to being a thing of the past. The problem is no longer a lack of viable solutions, but rather, an abundance of them.

Technologies like Cufon, sIFR, FLIR and @font-face all represent different groups of developers placing bets on what they believe to be the future of web typography.

There is, as of yet, no consensus in this ever-evolving game. All of these methods have perfectly valid arguments both for and against their use.

Further, even the most popular browsers support each of these technologies in widely varying degrees.

However, the @font-face CSS method is among the strongest, simplest and most flexible competitors in this game. It seems to be the current rockstar of the bunch, garnering all the attention and causing a number of sites to pop up offering both free and premium fonts in support of it.

This guide will teach you how to implement @font-face with cross-browser compatibility and will also look at a number of the supporting services that have arisen, making it even easier to use custom fonts in your web designs.

CSS (Cascading Style Sheets) is just an important part of Web Designing. Without CSS, Websites can look untidy as it used to happen before. With time, the quality of CSS tutorials out there on the web has increased considerably. Here is a cool showcase of CSS Techniques that designer should know about them. You’ll notice that some of these techniques can be very useful, while others are simple for proving it can be done.

Is there a time that you would like to have a refresher course or suddenly forget about that thing ? If yes, then you need some handy CSS cheat sheets. Post it on your web notes, bookmark it, or a sticky note to have a instant guide for your CSS. CSS or Cascading Style Sheet really help designers to customize their website conforming on the different browsers.

In this post, I’ll be featuring CSS cheat sheets for designers that will be helpful for you.

WebKit supports the cool background-clip CSS3 property, which you can use to do some pretty neat stuff. The first time we touched on it was the iPhone Slide-to-unlock idea where we set a gradient to animate through the background of the text. Then we touched on it again for the transparent borders idea.

Let’s take a look at using it to have an image be visibile only through the letters of the text. One more cool thing that we no longer need to drool over print designers ability to do.

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set.

Search is one of the most important part of any website. Here I will show a few practical techniques for designing search forms and a few tricks to make usable and good-looking search functionality.

Smashing Magazine did a piece on Search Boxes which inspired me to write this post. Instead of listing various types of designs, I will show you how to build them!Here, with the help of three examples, I will show how to code search boxes with HTML & CSS and how to spice things up with a bit of jQuery.

Did you know you can make triangles with pure CSS? It’s pretty easy. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. They are fun for all kinds of things, like little arrow sticking out from speech bubbles, navigation pointers, and more. Often times these are just visual flourishes, undeserving of dedicated markup. Fortunately, pseduo elements are often a perfect fit. That is, using :before, :after, or both to create these block level elements and place the triangle. One neat use that came to mind in this vein: breadcrumb navigation.

Making layouts responsive using CSS3 Media Queries are a big part of the work that I’m doing for the Hardboiled Web Design site in the run up to the book’s launch.

Since I started using Media Queries extensively over the last few months, I’ve revised the queries several times for each project, so it made sense to build a boilerplate to use as a starting point. These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes I’m interesting in making responsive designs for right now.

They’re part of a wider toolkit that I’ll be releasing at the same time as the book. But for now, you can download and incorporate these override queries at the bottom of your existing CSS files. Download the CSS file

CSS is the fundamental way of styling our web pages. Its deceptively easy syntax allows us to do many things to affect the visual layer of our work. And especially with CSS3, the language has gotten even more powerful.

There are many useful CSS techniques and tricks out there for you to take advantage of. This is a collection of a few useful CSS snippets that you might want to keep in your toolkit.