Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. I prefer to use CSS, rather than JavaScript or jQuey, if the same functionality can achieved by CSS because it is most likely that some people might turn off JavaScript in their pages but not CSS. While some web designer might disagree because of CSS’s lack of ability to make the web pages more dynamic I still think CSS is the way to go.
1. 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 ?
2. 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.
3. Using the CSS Border 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.
4. A Cool CSS Effect – Dashboard
- Create a Dashboard like effect using CSS.
5. Creating 2D/3D buttons using CSS
 |
 |
Create some cool looking buttons using CSS only.
6. Text Embossing/Shadow Technique With CSS
Using this technique you can create iPhone like embossed Text
[sourcecode language="css"] 1. text-shadow: 0px 1px 0px #e5e5ee; [/sourcecode]
7. Iconize Text links/Hyperlink with CSS
8. CSS Curly Quotes
9. 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
10. Blurry Background Effect
- CSS Guru Chris Coyier explains how to create a blurry background using CSS
11. CSS Parallax Effect
- Examples of and How to Create the CSS Parallax Effect
- A parallax illusion with CSS: The Horse in Motion
12. 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.
13. CSS-Only Accordion Effect
- This post explains how to create Accordion using CSS
14. 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.
15.Create a Block Hover /Element Hover Effect
16. Simple Dither Effect using CSS
- Dezinerfolio shows how to create a dither effect using CSS .
17. Create a liDock Menu
18. CSS Hover Swap Effect
19. 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.
20. CSS Magazine Style Layout
21. CSS Hoverbox Menu
- A really cool CSS Menu using Images and CSS
22. CSS TABS – CSS Only “DOM TABS”
- Using CSS only Create a Tabbed content. No jquery or Javascript at all.
23. CSS Magic with Fixed Background-attachment
- Ask the CSS Guy shows a trick that reveals a magic as you scroll.
24. CSS tooltips
25. Pure CSS Preloader
Author: Kawsar Ali
Kawsar Ali is a web designer who also likes blogging. He is the curator of Desizn Tech. In his spare time he walks around with a Nikon D5100 hunting for good textures.
Comments
Due to a high number of spam comments on site we have disabled comment system at desizntech.info. In a few days comments will be available again after we delete spam.