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):
MULTIPLE BACKGROUND IMAGES
CSS TOOLTIPS
…and the HTML
HANDY CSS DEBUG SCRIPT
HIDE TEXT WITH TEXT-INDENT
HIGHLIGHT LINKS THAT OPEN IN NEW WINDOW
FIXED FOOTER
CHANGE MOUSE CURSOR IN CSS
REMOVE TEXTAREA SCROLLBAR IN IE
STYLING LINKS BY FILE TYPE
CROSS-BROWSER TRANSPARENCY
CROSS-BROWSER MIN HEIGHT
ADDING SHADOWS TO YOUR CSS ELEMENTS
ADDING ROUNDED CORNERS TO YOUR CSS ELEMENTS
BEAUTIFUL BLOCKQUOTES
PRETTY AMPERSANDS
ADD AN IMAGE NEXT TO ALL EMAIL LINKS WITH CSS
FLIP AN IMAGE IN DIFFERENT DIRECTIONS
DROP CAP
CENTER A WEBSITE
…and there we have it! I shall be adding a part 2 with many more snippets very soon.
AJAX LIKE IMAGE PRELOADER IN CSS
Grab a loader image and try this on one of your pages (preferably large images):
img { background: url(loader.gif) no−repeat 50% 50%; }
MULTIPLE BACKGROUND IMAGES
#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
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
This is a <a class="tooltip" href="#">Tooltip<span>This is the CSS Tooltip text.</span></a>.
HANDY CSS DEBUG SCRIPT
* { 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
h1 {
text-indent:-9999px; /*Hide Text, keep for SEO*/
margin:0 auto;
width:960px;
}
HIGHLIGHT LINKS THAT OPEN IN NEW WINDOW
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
#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
.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
textarea {
overflow:auto;
}
STYLING LINKS BY FILE TYPE
/* 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
.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
.element {
min-height: 500px;
height:auto !important;
height: 500px;
}
ADDING SHADOWS TO YOUR CSS ELEMENTS
.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
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
BEAUTIFUL BLOCKQUOTES
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
.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
a[href^="mailto:"] {
background: url(images/email.png) no-repeat rightright top;
padding-right:10px;
}
FLIP AN IMAGE IN DIFFERENT DIRECTIONS
img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
DROP CAP
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}
CENTER A WEBSITE
.wrapper {
width:960px;
margin:0 auto;
}
…and there we have it! I shall be adding a part 2 with many more snippets very soon.
Comments
Post a Comment