Welcome To Snipplr


Everyone's Recent CSS Snippets Tagged css



* A set of starter styles that can be added to any library * The most-used styles I add to all of my sites
0 1123 posted 12 years ago by tymartist
The first thing you might notice is that I am not using nested lists to layout the menu. That is an old XHTML layout technique. I am using the more semantically correct HTML5 <nav> tag. Menus are not lists, they are navigation so using the more moder...
0 1716 posted 12 years ago by COBOLdinosaur
The CSS calc() function can be used anywhere a length, frequency, angle, time, number, or integer is required. It can be used to apply values for width/height; font-size; margins; padding; borders; shadows; border radius; text-indent;top/right/bottom...
0 1257 posted 12 years ago by COBOLdinosaur
Simple Progress Bars with only CSS
0 1003 posted 12 years ago by oscarlgarcia
Simple Clearfix
0 1085 posted 12 years ago by andrewcolby
Create a subtle "recessed" looking divider line. The example restyles the <hr> tag but it can applied to anything.
1 1061 posted 12 years ago by nshakin
Reference a custom font file for use within a stylesheet
0 1038 posted 12 years ago by nshakin
Multiple backgrounds
0 889 posted 12 years ago by kickass
Forces padding to not be added to overall box dimensions but instead subtracted - good for frameworks. For example, a container 960px with a 20px border and a 20px padding added still remains 960px allowing me to enjoy my life free of pesky maths....
1 889 posted 12 years ago by kickass
Demo Image http://i.imgur.com/f7o3Flr.png
1 1556 posted 12 years ago by jntu_gnec
0 1007 posted 12 years ago by scorpayllc
0 988 posted 12 years ago by scorpayllc
0 1337 posted 12 years ago by scorpayllc
0 1048 posted 12 years ago by scorpayllc
When I got the font from SymbolSet I was really excited to drop it into my interface but found many of the classes did not work. It looked like an encoding issue (since using the in line versions worked). Upon replacing all 570+ UTF-8 characters with...
0 1415 posted 12 years ago by paulprins
designing a simple horizontal tab menu by using ul and il elements with css.
0 1300 posted 12 years ago by codingforever99
0 1017 posted 12 years ago by Alee
One of the great methods to load and work with icons in web pages is to load one image that is a collection of several icons and use any icon as needed, that reduces the number of server request and save bandwidth.
1 1322 posted 12 years ago by codingforever99
CSS to define an iframe to always be 100% of the container it's in.
0 1124 posted 12 years ago by leodruker
Using the same code in different browsers can be displayed in different ways. Resetting styles will help you to avoid such problems.
0 1446 posted 12 years ago by apphp-snippets
These 2 techniques can be used for alternating row-colors in a table.
0 1398 posted 12 years ago by apphp-snippets
Today with CSS3, you no longer need a background image for gradients. You can use CSS to add a gradient to the background of some elements on your page. For ex.: change the color hex values ("84c8d7" and "327fbd") to the gradient color you need.
1 1253 posted 12 years ago by apphp-snippets
This solution is based on Mozilla specific CSS extension. Other browsers will ignore this rule.
0 1059 posted 12 years ago by apphp-snippets
This can be used in casting shadows off block-level elements like divs, tables etc. (still not supported in IE7 and IE8). Parameters (from left to right): horizontal offset of the shadow, vertical offset of the shadow, blur radius (optional), spread...
1 1104 posted 12 years ago by apphp-snippets
Sometimes it's desirable to change a style of the first and/or last elements in a container. You can do this by manually applying classes to your HTML elements: ("last-child" still not supported in IE8).
0 1058 posted 12 years ago by apphp-snippets
Took bits and pieces of Responsive Boilerplate, using mobile first and progressively enhanced ideology to make a solid starting point for Responsive Design.
1 1158 posted 12 years ago by dsuffern
These 2 techniques can be used for alternating row-colors in a table.
1 1589 posted 12 years ago by apphp-snippets
In modern browsers select options can now be style using most css properties. Of course, IE is still behind but it does support some styling as well. There are a lot more options on the site.
0 1410 posted 12 years ago by COBOLdinosaur
A simple message box created with only one div container with background and border color, some margin and padding for position the text message nicely, I set the width for 500px, you can change it to auto or any fixed value you want.
1 1204 posted 12 years ago by codingforever99
stripped down css sheet
0 1028 posted 12 years ago by thesmu