20+ Advanced CSS Techniques

Categories CSS, ToolsPosted on

CSS is using in web documents for making styles of text, backgrounds, spacings, width etc. Use of CSS is very simple but in some ways its tricky and most of CSS effects you will see in javascript and jquery but i will prefer to use CSS rather then other front end languages if you can make same functionality or style in CSS. In this article many effects and techniques of CSS you will see and all these are easy to use.

Blurry Background Effect


CSS Guru Chris Coyier explains how to create a blurry background using CSS

CSS Parallax Effect


Examples of and How to Create the CSS Parallax Effect
A parallax illusion with CSS: The Horse in Motion

Create a Lightbox effect only with CSS


Here is another useful  technique that is using CSS and a little Javascript to create the lightbox effect.

CSS-Only Accordion Effect


This post explains how to create Accordion using CSS

Add grunge Effect to Text Using Simple CSS


In this short tutorial you will see how to add grunge effect to your text using just CSS and one image.

CSS Gradient Text and Background


Would not it be much better if you can use gradient background without using any image? It would make your page load faster.

CSS Gradients using pure CSS
Background gradients and CSS

How about Gradient Text ?


CSS Gradient Text Effect
Pure CSS Text Gradient

Image Overlay Using Z-Index


The z-index property sets the stack order of an element. Using z-index  you can put one image or text on top of each other.

Understading  Z-Index
CSS Z-index

Using the CSS Boder Creatively


CSS Box Border test : This utility enables the sampling of Cascading Style Sheet (CSS) border styles, and creates the corresponding CSS code for implementation.
Border-image CSS3 only.
CSS Side Border Image Using CSS.


Create a Scalable Star using using CSS border
Border Slants

A Cool CSS Effect Dashboard


Create a Dashboard like effect using CSS.

Using CSS Opacity for Various Cool Effects


A CSS only fly-out menu with transparency
CSS Menu using CSS opacity property
Opacity Background Blending Effects


Transparency Menu Watermark on an image

Create a Block Hover /Element Hover Effect


Learn how to create a block hover effect for a list of links
CSS element hover effect.

Simple Dither Effect using CSS


Dezinerfolio shows how to create a dither effect using CSS .

Create a  liDock Menu


Horizontal Menus That Grow on You

CSS Hover Swap Effect


CSS swap hover effect

Polaroid effect using CSS


Do you like Polaroid pictures? Well using this technique you can make the pictures on website look like Polaroid.
Polaroid-izing photos with CSS and one Image.

CSS Magazine Style Layout


Create a Magazine Type layout Using CSS

CSS Hoverbox Menu


A really cool CSS Menu using Images and CSS



Using CSS only Create a Tabbed content. No jquery or Javascript at all.

CSS Magic with Fixed Background-attachment


Ask the CSS Guy shows a trick that reveals a magic as you scroll.

CSS tooltips


Show a message when hovering over the links.

Pure CSS Preloader


Add a loading icon to your larger images

Creating 2D/3D buttons using CSS

css_button css_button2

Create some cool looking buttons using CSS only.

3D Rollover Button using CSS
How to make sexy buttons with CSS
CSS rollover buttons

Text Embossing/Shadow Technique With CSS

Using this technique you can create iPhone like embossed Text


view source print?

1. text-shadow: 0px 1px 0px #e5e5ee;

Text Embossing
CSS Text Drop Shadows

Iconize Text links/Hyperlink with CSS


Add icon to the hyperlink.
Iconize Textlinks with CSS

CSS Curly Quotes


Curly Quotes with Pure CSS
Swooshy Curly Quotes Without Images

DesignDazzling is sharing interesting and useful content which is coming from skilled and relating to the topics like Blogging, creative designs, developer tools, free tutorials, useful web resources, CSS, Fonts, WordPress, Tutorials, Web Designing, HTML, Inspiration, Free Templates, online Freebies for web designers and web developers.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.