20 CSS Codes to Simplify Your Web Styling Tasks

May 5, 2012

20

Web styling is a very challenging task for designers, as they are expected to fulfill all the requirements of the clients. It becomes tougher when you are not familiar with a website styling and you are given that site to modify. Many designers have set their styling procedures to remember their work; these CSS codes snippets are very helpful for the other designers.

- Advertisement -

CSS development task is hard piece of work for the novice web designers plus very time consuming if you have stuck to simple looking but typical styling. To help you out, we are going to list 20 CSS codes to simplify your web styling tasks. Within these codes, you will find many CSS3 snippets, like box-shadow, border-radius, linear-gradient and many more.

1. Adding individual rounded corners – border-radius

You can choose which individual 4 corners are rounded or have a blanket rounding of every corner.
[css]
#Bottom_Right {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}

#Bottom_Left {
height: 65px;
width:160px;
-moz-border-radius-bottomleft: 50px;
border-bottom-left-radius: 50px;
}

#Top_Right {
height: 65px;
width:160px;
-moz-border-radius-topright: 50px;
border-top-right-radius: 50px;
}

#Top_Left {
height: 65px;
width:160px;
-moz-border-radius-topleft: 50px;
border-top-left-radius: 50px;
}
[/css]
[button-blue url=”http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/” position=”right” target=”_blank”] Source [/button-blue]

2. Add a drop cap

This will make the first letter of your article bigger than the rest, all classic style.
[css]
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:60px;
font-family:Georgia;
}
[/css]
[button-blue url=”http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/” position=”right” target=”_blank”] Source [/button-blue]

3. Replacing the title text with a logo – text-indent – text-indent

This code is for when you need to hide the title text in the header of your website and replace it with your logo image instead.
[css]
h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}
[/css]
[button-blue url=”http://www.codecollector.net/mafis/library/12857/Hide_text_with_text_indent” position=”right” target=”_blank”] Source [/button-blue]

4. Add a “loading image” to, well, loading images

You can have a animated GIF image of a “loading circle” giving visual confirmation that everything’s fine and the image is loading.
[css]
img {
background: url(loader.gif) no−repeat 50% 50%;
}
[/css]
[button-blue url=”http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/” position=”right” target=”_blank”] Source [/button-blue]

5. Adding rounded corners – border-radius

This is a blanket rounding of each corner; the next code snippet lets you individually round each of the 4 corners.
[css]
.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
[/css]
[button-blue url=”http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/” position=”right” target=”_blank”] Source [/button-blue]

6. Giving your footer a fixed position – position:fixed

This makes your footer stick to the bottom of the screen. Change the background color to your needs.
[css]
#footer {
position:fixed;
left:0px;
bottom:0px;
height:32px;
width:100%;
background:#333;
}
/* 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’);
}
[/css]
[button-blue url=”http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/” position=”right” target=”_blank”] Source [/button-blue]

7. Center certain content vertically

This will vertically center content that’s in a container (like in a cell of a HTML table)
[css]
.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
[/css]
[button-blue url=”” position=”right” target=”_blank”] Source [/button-blue]

8. Center your website horizontally

Force your website to the center align.
[css]
.wrapper {
width:960px;
margin:auto;
}
[/css]
[button-blue url=”http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html” position=”right” target=”_blank”] Source [/button-blue]

9. Using transparency – opacity

You can make a box or any object on your website transparent with this, changing the opacity value to how transparent you want it to be.
[css]
.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
Example:
<div class="box transparent">Your content</div>
[/css]
[button-blue url=”http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/” position=”right” target=”_blank”] Source [/button-blue]

10. Quickly create pull-quotes

This makes it easy for you to create pull-quotes, rather than having to format the text each time you want to include a pull-quote.
[css]
.pull-quote {
width: 200px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ;
}
[/css]
[button-blue url=”http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/” position=”right” target=”_blank”] Source [/button-blue]

11. Adding shadow to text – text-shadow

Helps make your text stand out from the rest.
[css]
.text-shadow {
text-shadow: 2px 2px 4px #666;
}
[/css]
[button-blue url=”http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/” position=”right” target=”_blank”] Source [/button-blue]

12. File format-dependent link styles

This snippet shows small icons next to a link that’s of a certain file format. The following has file format-dependent link styles for email, pdf, and zip file links.
[css]
/* external links
The ^= specifies that we want to match links that begin with the http://
*/
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}

/* emails
The ^= specifies that we want to match links that begin with the mailto:
*/
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs
The $= specifies that we want to match links whose hrefs end with ".pdf".
*/
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
/* zip
Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after
*/
a[href$=".zip"]:after{
content: url(icons/zip.png);
}
[/css]
[button-blue url=”http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/” position=”right” target=”_blank”] Source [/button-blue]

13. Adding print page breaks – page-break

This adds nice page breaks to articles and other long-form content on your website when your visitor decides to print it. Yeah, less and less people are printing on paper, but they’re using their web browser’s print function to create digital copies (PDFs) for future reading or archiving.
[css]
.page-break{
page-break-before:always;
}
[/css]
[button-blue url=”http://www.w3schools.com/css/pr_print_pagebb.asp” position=”right” target=”_blank”] Source [/button-blue]

14. Resize your background image

Lets you do just what the title says. Simply change the size values and bam: resized background image.
[css]
#resize-image {
/* Just imagine that the image_1.png is 200x400px */
background:url(image_1.png) top left no-repeat;
-moz-background-size: 100px 200px;
-o-background-size: 100px 200px;
-webkit-background-size: 100px 200px;
}
[/css]
[button-blue url=”http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/” position=”right” target=”_blank”] Source [/button-blue]

15. Adding an image-based border – border-image

Use the border-image property on a object to add that image-based border to it.
[css]
#border-image-style {
border-width:15px;
/* 3 types of border exist repeated, rounded or stretched (repeat / round / stretch) */
-moz-border-image:url(border.png) 30 30 stretch ;
-webkit-border-image:url(border.png) 30 30 stretch;
}
[/css]
[button-blue url=”http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/” position=”right” target=”_blank”] Source [/button-blue]

16. Having multiple columns

This lets you create multiple columns for your content without needing to go through the formatting hassle of creating separate paragraphs or whatnot.
[css]
#columns-3 {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 12px;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
-webkit-column-rule: 1px solid #c4c8cc;
}
[/css]
[button-blue url=”http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/” position=”right” target=”_blank”] Source [/button-blue]

17. Adding a gradient – linear-gradient

You can use CSS to add a gradient to the background of something.
[css]
background: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc));
background: -moz-linear-gradient(top, #74b8d7, #437fbc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#74b8d7′, endColorstr=’#437fbc’);
[/css]
[button-blue url=”http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/” position=”right” target=”_blank”] Source [/button-blue]

a:hover {
background-position: 0 -30px;
}
[/css]
[button-blue url=”http://snipplr.com/view.php?codeview&id=50536″ position=”right” target=”_blank”] Source [/button-blue]

19. Bulletproof @fontface

Use any font of your choice by uploading to your server and giving its path.
[css]
@font-face {
font-family: ‘MyFontFamily’;
src: url(‘myfont-webfont.eot?’) format(‘eot’),
url(‘myfont-webfont.woff’) format(‘woff’),
url(‘myfont-webfont.ttf’) format(‘truetype’),
url(‘myfont-webfont.svg#svgFontName’) format(‘svg’);
}
[/css]
[button-blue url=”http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax” position=”right” target=”_blank”] Source [/button-blue]

20. Adding shadow to borders and images – box-shadow

Giving a subtle 3D-like visual cue that it’s something separate, in the foreground, and the thing that visitors should be looking at.
[css]
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);
[/css]
[button-blue url=”http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/” position=”right” target=”_blank”] Source [/button-blue]