Skip to main content

20 HANDY CSS SNIPPETS FOR WEB DESIGNERS

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):

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

Popular posts from this blog

75 Surprisingly Creative Facebook Timeline Covers

Now that you have shifted to “Facebook Timeline” to display you profile in a better way, get creative with it. Facebook timeline gives you a chance to turn you profile exclusive and innovative. Putting up a personal picture as cover, will only make you look outdated. You can try some exciting covers to design your very own Facebook profile in distinguished style. We have scrounged through web to pick 75 amazing Facebook Timeline covers for this list. Unique cover pictures can give your timeline a different-from-the-rest look. You can create your own creative covers picking ideas from these cool pictures listed below. If you like this article, you might be interested in some of our other articles on  Facebook Scripts, Best Facebook Apps, Best Facebook Games, and Facebook Tips You Should Check . Ekkapong Techawongthaworn Be a brand ambassador and flaunt your fanaticism for gadgets and shopping on your cover. Ekkapong Techawongthaworn Gabriel Fort A snapshot of an Apple iPad interface.

30 Free Facebook Timeline Cover Backgrounds

If you really want a good cover for your Facebook Timeline, you have landed on the right page. It’s seen that people have faced problem in finding covers of their choice because of the specific size issue. However, you do not need to look further, as this list presents 30 cool free Facebook Timeline covers for you to sport them on your profile page. The list includes creative, funny, exciting and cool pictures of perfect dimensions to fit your Facebook cover without having you to crop or resize them. Moreover, they are absolutely free to download, so you can instantly put them on your Timeline cover to express numerous moods and inspirations. If you like this article, you might be interested in some of our other articles on  Thumbs Up Symbol,Heart Symbol On Facebook, Facebook Timeline Covers and Facebook Timeline As Used By Brands . Love Calculator What all it takes to result in love? A pretty woman and drinks. Love Calculator This Guy Rocks Let your cover boast about you and tell your

PHP File Upload

With PHP, it is possible to upload files to the server. Create an Upload-File Form To allow users to upload files from a form can be very useful. Look at the following HTML form for uploading files: <html> <body> <form action="upload_file.php" method="post" enctype="multipart/form-data"> <label for="file">Filename:</label> <input type="file" name="file" id="file" /> <br /> <input type="submit" name="submit" value="Submit" /> </form> </body> </html> Notice the following about the HTML form above: The enctype attribute of the <form> tag specifies which content-type to use when submitting the form. "multipart/form-data" is used when a form requires binary data, like the contents of a file, to be uploaded The type="file" attribute of the <input> tag specifies that the input sho