Archive for the ‘css tutorials’ Category

CSS3 starbursts

I was recently experimenting with the new CSS3 rotation property and it occurred to me that I could use this to create image-free starbursts. All I needed was a series of nested block-level elements each rotated by a slightly different amount. The rotation would distribute the box corners around the circumference of the star.

Create a Vibrant Digital Poster Design with CSS3

CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.

Create a Vibrant Digital Poster Design with CSS3

Build a HTML5/CSS3 Website Layout Without Images – Part 1

Ever since all the articles showcasing the new features in HTML5 and CSS3 started appearing around the web, I have had the idea of building a website layout without any images. With all the advancements in HTML5 & CSS3 (compared to previous respectable specs) it wouldn’t be too hard to create a decent-looking website that wouldn’t have to rely on images for the layout elements.

Build a HTML5/CSS3 Website Layout Without Images


Magnifying glass experiment using CSS3. Only works in Google Chrome at the moment and has very limited usage capability. But the initial idea is there and hope to extend with more features later on.Would love to see peoples use of this and any ideas on how it can be improved and built upon.

new lens flare

By abusing the text-shadow property, you can turn any ho-hum bit of text into a magnificent, radiant beacon of allure and awe. But getting your bling-bling on has never been for the cheapskates. Expect to pay a boatload in refresh rates, as your browser buckles under the weight of rendering that glorious halo.

new lens flare

CSS3 Spotlight

CSS3 Spotlight

Pure CSS3 Page Flip Effect

It works in Webkit based browsers (Safari and Chrome) only.

Pure CSS3 Page Flip Effect

Beautiful CSS3 Search Form

Lately I’ve been playing around with CSS3 and discovered some new CSS tricks. Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form demo that I’ve created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers.

Beautiful CSS3 Search Form

Sexy Image Hover Effects using CSS3

First of all thanks to giving me a great response on Ajax Style Loading Animation in CSS3 ( no Images ) .

In this post I am going to show to How to create a sexy css effect on image hover.This kinda effect you have seen before in Flash or in javascript as well.But why use Flash or js when CSS can do the same work.So lets do it …

Sexy Image Hover Effects using CSS3

Firefox 4: CSS3 calc()

Firefox will support the CSS calc() value, which lets you compute a length value using an arithmetic expression. This means you can use it to define the sizes of divs, the values of margins, the widths of borders, and so forth.- 😀

Firefox 4: CSS3 calc

CSS3 Buttons & Transitions

For the web design world, advancements don’t come quick. It takes years of hard work to accomplish new overhauls such as HTML code and CSS levels. When new advancements are made, it makes us feel all giddy inside, and the anticipation kills us.

CSS3 Buttons

Create a pixel perfect subscription box using CSS3

Today I will show how to create the above subscription box using simple HTML markup and a few advanced CSS3 properties. I believe CSS3 is the future and the sooner you can jump on the CSS3 band wagon the better. All the stylish shadows and gradients used are rendered using CSS properties which can be experimented with to produce some fantastic results.

Create a pixel perfect subscription box using CSS3

Progressive enhancement: pure CSS speech bubbles

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

The CSS 3 Flexible Box Model

CSS 3 introduces a brand new box model in addition of the traditional box model from CSS 1 and 2. The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space.

The CSS 3 Flexible Box Model

CSS3 Border Radius for Hover States

One of the huge benefits to using CSS3 is the ability to create image-like effects without the use of images. CSS3 gradients, shadows, and rounded corners have helped designers greatly in this area.

CSS3 Border Radius for Hover States

Animated Navigation Menu with CSS3

Since Last some days we are writing articles on CSS3. And today we will learn here to create animated navigation menu with css3. Here will try to create animated menu with css3 and also will create the same animation using jQuery. So lets start..

Animated Navigation Menu with CSS3

Practical CSS3 for Web Designers

Designers have been using basic CSS3 techniques to enhance their designs for several years now, but cross-browser incompatibilities and lack of practical examples have slowed its progression in the mainstream design world. In this tutorial, I explore and demonstrate some of the more practical aspects of CSS3 and provide realistic examples, resources, advise and a compatibility guide.

Practical CSS3 for Web Designers

Pimp Your Tables with CSS3

Pimp Your Tables with CSS3

Today I am going to show you how to use some neat CSS3 properties to beautify your tables. With so many new selectors we can address specific table cells and rows in order to create a unique style without adding classes to the markup.

Create a Color Changing Website Using CSS3

Though the changes implemented by CSS3 are still not supported on all browsers and cross-browser functionality across those that do support it can be a real pain, it’s still quite fun to experiment and see what’s possible.

Create a Color Changing Website Using CSS3

CSS3 Dropdown Menu

While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.

CSS3 Dropdown Menu

How To: Resizeable Background Image

CSS Tutorials For Dealing With Background – Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Also, make sure it retains its ratio (doesn’t stretch weird). Also, doesn’t cause scrollbars, just cuts off vertically if it needs to. Also, comes in on the page as an inline img tag.

Resizeable Background Image

How to: CSS Large Background

Since I posted the huge collection of Large Background Websites, I received several email requests on how to make a large background site with CSS. So, I thought it would be a good idea to share my techniques on designing large background websites. In this tutorial, I will provide various CSS examples on how you can create a large background site using either a single or double images.

CSS Large Background

Backgrounds In CSS: Everything You Need To Know

Backgrounds are a core part of CSS. They are one of the fundamentals that you simply need to know. In this article, we will cover the basics of using CSS backgrounds, including properties such as background-attachment. We’ll show some common tricks that can be done with the background as well as what’s in store for backgrounds in CSS 3 (including four new background properties!).

Backgrounds In CSS

Blurry Background Effect

When setting a background image on a page element with CSS, you can control its position with “background-position”, but an often-forgotten trick is that you can control its position behavior with “background-attachment”.Utilizing two images, we can pull off a pretty simple and fun CSS trick I’m calling the “blurry background effect”. Here are the results:

Blurry Background Effect

Mastering CSS background-position

Hi there guys! As you may know, we have published a lot of tutorials to learn how to improve the interaction of our web applications mainly using javascript and jQuery. We have created our layouts for these tutorials using xHTML and CSS and this time the CSS part will be the important thing and not a simple spectator.

Mastering CSS background-position

split backgrounds/a css trick

Sometimes css tricks just work. You hit a certain problem, take a few good minutes to think it over, devise a css solution … and it works. These cases are quite rare indeed, but they do exist. And as these examples are particularly fun to share with others, here goes. This article will demonstrate a little trick splitting a background into two parts while keeping it flexible in width.

split backgrounds

CSS Triple Border Background Tutorial

Learn to create Triple Border Background pages without the need for tables! Use CSS to style beautiful pages for poetry, graphic collections, and many other stylish presentations.

CSS Triple Border Background

The CSS Typography : The Missing Manual – Ultimate Guide to CSS Typography

Typography is often overlooked in todays design specifically by web developers. It really is a shame because CSS gives us so much control over our type. That being said, we our limited to certain “web safe” typefaces but that shouldn’t decrease our creativity. Here are a few CSS tips for typography on the web.

CSS Typography

6 Ways To Improve Your Web Typography

Typography on the web is anything but simple, and for many, it is a troubling mystery. Today, we’re going to review six ways that web designers and developers can improve the typography of the sites they create.

6 Ways To Improve Your Web Typography

12 Examples of Paragraph Typography

These are supporting examples for the blog entry, The Paragraph in Web Typography & Design.Only standard tags have been used. Some of these styles are experiments using pseudo elements and adjacent sibling selectors; browser support is not consistent. Paragraph font size is set at 1em (equivalent to 16px if browser font size is unchanged) and line height set at 1.25em. Georgia was used exclusively. No browser specific CSS has been used—any inconsistency in the rendering of line-height, baseline and element positioning has been left for cross browser comparison before implementing.

Examples of Paragraph Typography

beautiful fonts with @font-face

While Firefox 3.0 improved typographic rendering by introducing support for kerning, ligatures, and multiple weights along with support for rendering complex scripts, authors are still limited to using commonly available fonts in their designs. Firefox 3.5 removes this restriction by introducing support for the CSS @font-face rule, a way of linking to TrueType and OpenType fonts just as code and images are linked to today. Safari has supported this type of font linking since version 3.1, and Opera has announced that they plan to support it in Opera 10.

beautiful fonts with font-face

Six Ways to Style Blockquotes

The blockquote XHTML tag is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you’re quoting a longer piece of text from another source – another speaker, another website, whatever. It’s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?

Six Ways to Style Blockquotes

CSS typography experiment and browser inconsistencies

This is a quick experiment that reproduces an image from I Love Typography using nothing more than simple semantic HTML, CSS2.1, and modern browser implementations of a couple of CSS3 properties. Along the way a few new browser bugs and inconsistencies were exposed.

CSS typography experiment and browser

How to Size Text in CSS

There’s been a welcome resurgence of interest in web typography over the past year or so, with many articles and conference talks offering techniques and theory. Frequently asserted is the notion that good typography requires accurate control of font size and line-height. But this is the web: it’s a special medium where the reader can have as much control as the designer—the implication being that text on the web, while bending to the designer’s will, must also be reliably resizable across browsers and platforms.

How to Size Text in CSS

Cufon vs sIFR vs FLIR

Typography is a very important element to design, and it’s quite a shame that for the past decade we’ve resorted to using images to display this element, without having the flexibility to define different fonts outside of the 13 or so web safe fonts. In the past few years, however, we’ve seen a growing trend towards forcing new typefaces on the web. CSS defines a property for browsers to support a property called @font-face which lets the developer define new typefaces and include the original font file for the browser to download and render the site with. Support for this feature has been implemented in Safari already and is due to release with the next versions of Firefox and Opera. Though this is definitely good news and progress in the right direction, a few issues stand in the way

Cufon vs sIFR vs FLIR

Kick-ass CSS3 Support in IE6, 7, and 8

We all know that IE 6,7 not support the new increase CSS3 property, even with IE8 which is not fully ready for CSS3 yet. You know what, there is a script hack that helps you enable CSS3 support in IE (even with IE6) with new CSS3 properties, including: border-radius (rounded), box-shadow ( shadow), text-shadow (the shadow of the text).

Kick-ass CSS3 Support in IE6

Future of CSS: The Flexible Box Model

The Flexible Box Model is part of the CSS3 Specification that doesn’t really get a lot of attention. While everyone’s off checking out how to use selectors, the flexible box model is crying in the corner asking why no one pays him any attention, and rightfully so! The flexible box model has the potential to change the way we design our websites.

The Flexible Box Model

Impossible Things With CSS Now Possible With CSS3

Today will discuss about some basic properties of css3. Last week one of our reader asked me to post an article based on css3 basic and advanced properties so today we come up with some css3 basic properties.

Impossible Things With CSS Now Possible With CSS3


HTML 5 & CSS3 framework.

Social Icons in CSS3

After Beautiful sunset wallpaper , I came up with some social site icons made in only CSS3.For those icons I have used gradient,radius property.

Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5 – Look Ma, No Flash!

Searching YouTube for inspiration I stumbled on to the intro of the classic 1967 spider-man cartoon series. While watching I realized that the animation was very basic. It was the paper doll sort of animation that lends itself perfectly to css3. Hmmm… “I could something like that with a little css3″, I thought.

Firefox support for CSS3 multiple backgrounds

James Hall saw the good news in Bugzilla that CSS3 multiple backgrounds are now in the Firefox tree, and you can test a Firefox Nightly (Minefield). Firefox joins Safari in the support.

You Can Use CSS3 Right Now

CSS3 makes a designer’s work easier because they’re able to spend less time hacking their CSS and HTML code to work in IE and more time crafting their design. It is the future of web design and can be used today.This article will hopefully show you to care a little less about making everything pixel perfect in IE. It will inspire you to spend more time making your designs exquisite in the rest of the browsers while serving up a working and perfectly accessible website for IE.

30 Essential CSS3 Resources

Web designers around the world are extremely excited about the power of CSS3 and the creative freedom it offers. With that in mind, we’ve rounded up 29 resources for you to learn more.

Cleaner Code with CSS3 Selectors

The parts of CSS3 that seem to grab the most column inches on blogs and in articles are the shiny bits. Rounded corners, text shadow and new ways to achieve CSS layouts are all exciting and bring with them all kinds of possibilities for web design. However what really gets me, as a developer, excited is a bit more mundane.

Cleaner Code with CSS3 Selectors

Taming Advanced CSS Selectors

CSS is one of the most powerful tools that is available to web designers (if not the most powerful). With it we can completely transform the look of a website in just a couple of minutes, and without even having to touch the markup. But despite the fact that we are all well aware of its usefulness, CSS selectors are still not used to their full potential and we sometimes have the tendency to litter our HTML with excessive and unnecessary classes and ids, divs and spans.

Taming Advanced CSS Selectors

CSS contents and browser compatibility

CSS contents and browser compatibility

CSS selectors and pseudo selectors browser compatibility

The following is a range of CSS tests of the most common browsers’ support for selectors and pseudo selectors. The tests includes basic stuff from the good old days of CSS1 and funky stuff from the future (CSS3). If you feel like reading more about the selectors and which attributes they support, the W3C is the place to go!

CSS selectors and pseudo selectors

A Look at Some of the New Selectors Introduced in CSS3

Everyone who has been using CSS is immediately familiar with selectors as they are what is used to target elements on a page and style them. CSS3 brings even more options as far as selecting elements goes. It will allow designers and developers to implement designs much easier and quicker than before.

33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles

Since previous article about CSS text effects got really big attention I decided to research and find more interesting articles and websites just focused on CSS3, teaching you how to use it, showing pros and cons and much more. To be honest it’s hard for me to keep up with technologies myself, but we really cannot not to use those new great selectors to make our designs even more beautiful, user-friendly and lightweighted. However since HTML5 is sort of tied with CSS3, I will soon continue with HTML5 article as well, so don’t miss it and keep coming back! Enjoy!

25 Useful CSS3 Techniques and Tutorials

It is essential today for a web designer to know about CSS3 and there are many tutorials and resources for the CSS3. Below i’ve listed 25 Useful CSS3 Techniques and Tutorials to get you started with CSS3, hope you find this collection useful

A CSS3 Tutorial – Features, Techniques, Tips, Tricks

The genesis of the Cascading style sheets began 13 years ago and the widely adopted CSS 2.1 standard has existed for 11 years now. The world is changing fast with its technology and when we look at the so called ‘ancient websites’ that has just completed a decade we find a wide difference in the World Wide Web.

CSS3 Techniques You Should Know

Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!

70 Must-Have CSS3 and HTML5 Tutorials and Resources

CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. The inclusion of native support for things like rounded corners and multi-column layouts are just the tip of the ice berg.

60 Excellent CSS3 Tutorials and Techniques You Should Know

In this post we present 60 Excellent CSS3 Tutorials and Techniques You Should Know that can strongly improve user experience, improve designer’s work-flow and replace dirty old workarounds that we used in Internet Explorer 6 & Co. Please notice that most techniques and tutorials presented below are experimental, and its good to have place at one post.

20 CSS3 Tutorials and Techiques for Creating Buttons

In May last year we published an article entitled 22 CSS Button Styling Tutorials and Techniques, it proved to be pretty popular, and the most amazing thing about that post is that none of the tutorials even touch on the subject of CSS3.. What a difference a year makes!

20 Must Know Recent CSS and CSS3 Resources and Tools

CSS is always the easiest method to improve websites design and functionality. Moreover, The next version of CSS (CSS3) will revolutionize the way websites works. Except Internet Explorer most of the modern browsers supports CSS3 features. Here we present to you 20 recent CSS & CSS3 tools and resources you need to be aware of as a web designer/developer.

CSS Sprites: How and Improve Web Performance

CSS sprites group multiple images into one composite image and display them using CSS background positioning. You can save a significant amount of HTTP requests by consolidating your images into one or more composite sprites and using CSS to selectively display parts of the sprite within your web page.

How and Improve Web Performance

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Do you really understand them? The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position?

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

CSS Sprites: Image Slicing’s Kiss of Death

Back when video games were still fun (we’re talking about the 8-bit glory days here), graphics were a much simpler matter by necessity. Bitmapped 2-dimensional character data and background scenery was individually drawn, much like today’s resurgent pixel art. Hundreds and later thousands of small graphics called sprites were the building blocks for all things visual in a game.

5 things you might not know about CSS sprites

CSS sprites are a pretty popular technique now, but I still see a lot of common mistakes or misconceptions when it comes to implementing them. Here’s a few advanced tips to keep in mind.

CSS Sliding Sprite Windows

I want to share a CSS technique I’ve used alot. I’m sure that you have seen CSS sprite techniques that utilize changing background position on hover to change a link’s state.

How to Make a CSS Sprite Powered Menu

Today’s tutorial will bring you through the process of building a slick menu using a single CSS sprite image. It’s a simple, but elegant solution for most websites. This was one of the design strategies that first helped me to start using smarter markup. For those of you just getting introduced to this technique today, hopefully you’ll have some similar results.

Date Display Technique with Sprites

At the risk of over-repeating myself: every element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish. We’ve talked about the positioning of these boxes a bit, and about their behavior.

The CSS Box Model

A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page.

The Beauty Of CSS Design

The problem has boggled the minds of Web designers for years: fixed, fluid, elastic or a hybrid layout design? Each option has its benefits and disadvantages. But the final decision depends so much on usability that it is not one to be made lightly. So, with all the confusion, is there a right decision? By considering a few factors and properly setting up the final design, you can end up with a successful layout design that reaps all the benefits.

Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?

Selectors are one of the most important aspects of CSS as they are used to “select” elements on an HTML page so that they can be styled.

Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout.

CSS selectors

CSS Filters (CSS Hacks)

The main advantage of elegant CSS typography lies in its ability to be both attractive and improves the user experience. When chosen wisely and used carefully, it can be very effective to support the overall design. There are many outstanding examples of how we can do this, and below you will find some of the best ideas and tips when it comes to using Fonts and typography in your CSS based sites.

CSS Typography: Contrast Techniques, Tutorials and Best Practices

Explorer Exposed!

Learn CSS Positioning in Ten Steps

CSS button styling can be tricky and sometimes tedious. If you are looking for a simple and effective way of creating dynamic CSS buttons with cross browser compatibility, these tutorials are for you.

Below, you will find 50 CSS Button Styling Tutorials and Techniques.

22 CSS Button Styling Tutorials and Techniques

 CSS Button Styling Tutorials and Techniques

30 Excellent CSS Based Navigation and Buttons Tutorial

Excellent CSS Based Navigation and Buttons Tutorial

Super Awesome Buttons with CSS3 and RGBA by Mark

Super Awesome Buttons with CSS3 and RGBA

CSS Image Map by definition is using a single image with defining multiple clickable hotspots, whether to show information or as navigation. There are a multitude of solutions, below we have listed and demonstrated by far the best and the most helpful techniques and tutorials.When the title says Image Map, It doesn’t mean basic image replacement, and when It says Pure CSS, It doesn’t mean CSS blended with javascript or ajax (which of course there are solutions), its CSS and only CSS.

CSS Image Map Techniques and Tutorials

CSS Image Map Techniques and Tutorials

CSS Image Maps

CSS Image Maps

CSS Image Maps With Pop-Up Tool Tips

CSS Image Maps With Pop-Up Tool Tips

Image Map Tool

Image Map Tool