20 Handy CSS Snippets For Web Designers
July 4th, 2012 - 1 Comment »
Below I have rounded up 20 Handy CSS Snippets for you to use in your Web Designs, these can come in very handy, so make sure you keep a copy of them!
Ajax Like Image Preloader in CSS
Grab a loader image and try this on one of your pages (preferably large images):
|
1 |
img { background: url(loader.gif) no−repeat 50% 50%; } |
Multiple Background Images
|
1 2 3 4 5 |
#multiple-images { background: url(image_1.png) top left no-repeat, url(image_2.png) bottom left no-repeat, url(image_3.png) bottom right no-repeat; } |
CSS Tooltips
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
a:hover { background:#ffffff; /*BG color is a must for IE6*/ text-decoration:none; } a.tooltip span { display:none; padding:2px 3px; margin-left:8px; width:130px; } a.tooltip:hover span { display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c; } |
…and the HTML
|
1 |
This is a <a class="tooltip" href="#">Tooltip<span>This is the CSS Tooltip text.</span></a>. |
Handy CSS Debug Script
|
1 2 3 4 5 6 7 8 |
* { outline: 2px dotted red } * * { outline: 2px dotted green } * * * { outline: 2px dotted orange } * * * * { outline: 2px dotted blue } * * * * * { outline: 1px solid red } * * * * * * { outline: 1px solid green } * * * * * * * { outline: 1px solid orange } * * * * * * * * { outline: 1px solid blue } |
Hide Text with text-indent
|
1 2 3 4 5 |
h1 { text-indent:-9999px; /*Hide Text, keep for SEO*/ margin:0 auto; width:960px; } |
Highlight Links that Open in New Window
|
1 2 3 4 5 6 7 8 9 |
a[target="_blank"]:before, a[target="new"]:before { margin:0 5px 0 0; padding:1px; outline:1px solid #333; color:#333; background:#ff9; font:12px Verdana; content: "\279C"; } |
Fixed Footer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; } /* IE 6 */ * html #footer { position:absolute; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); } |
Change Mouse Cursor in CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
.element { cursor:defaul; } .element { cursor:pointe; } .element { cursor:crosshai; } .element { cursor:hel; } .element { cursor:mov; } .element { cursor:e-resiz; } .element { cursor:n-resiz; } .element { cursor:ne-resiz; } .element { cursor:nw-resiz; } .element { cursor:se-resiz; } .element { cursor:sw-resiz; } .element { cursor:progres; } .element { cursor:tex; } .element { cursor:wai; } |
Remove Textarea Scrollbar in IE
|
1 2 3 |
textarea { overflow:auto; } |
Styling Links by File Type
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* external links */ a[href^="http://"] { padding-right: 13px; background: url(external.gif) no-repeat center right; } /* emails */ a[href^="mailto:"] { padding-right: 20px; background: url(email.png) no-repeat center right; } /* pdfs */ a[href$=".pdf"] { padding-right: 18px; background: url(acrobat.png) no-repeat center right; } |
Cross-Browser Transparency
|
1 2 3 4 5 6 |
.element { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */ } |
Cross-Browser Min Height
|
1 2 3 4 5 |
.element { min-height: 500px; height:auto !important; height: 500px; } |
Adding Shadows to your CSS elements
|
1 2 3 4 5 |
.element{ box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); } |
Adding Rounded Corners to your CSS elements
|
1 2 3 4 5 6 |
.round{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */ } |
Beautiful Blockquotes
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
blockquote { background:#f9f9f9; border-left:10px solid #ccc; margin:1.5em 10px; padding:.5em 10px; quotes:"\201C""\201D""\2018""\2019"; } blockquote:before { color:#ccc; content:open-quote; font-size:4em; line-height:.1em; margin-right:.25em; vertical-align:-.4em; } blockquote p { display:inline; } |
Pretty Ampersands
|
1 2 3 4 5 |
.amp { font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; font-style: italic; font-weight: normal; } |
Add an image next to all Email Links with CSS
|
1 2 3 4 |
a[href^="mailto:"] { background: url(images/email.png) no-repeat rightright top; padding-right:10px; } |
Flip an Image in Different directions
|
1 2 3 4 5 6 7 8 |
img { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } |
Drop Cap
|
1 2 3 4 5 6 7 8 |
p:first-letter{ display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:60px; font-family:Georgia; } |
Center a Website
|
1 2 3 4 |
.wrapper { width:960px; margin:0 auto; } |
…and there we have it! I shall be adding a part 2 with many more snippets very soon.
Related posts:
One Response
Leave a Reply
ADVERTISE
CATEGORIES
Join our newsletter
SOCIAL NETWORK
RECENT COMMENTS
SUBMIT A TUTORIAL
Well this post is really awesome…thanks will help me alot in future…. **Bookmarked**