CSS Code Snippets   Simplify your web styling

20 CSS Codes to Simplify Your Web Styling Tasks

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.

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.

#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;
}

Source

 

2. Add a drop cap

This will make the first letter of your article bigger than the rest, all classic style.

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:60px;
font-family:Georgia;
}

Source

 

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.

h1 {
   text-indent:-9999px;
   margin:0 auto;
   width:400px;
   height:100px;
   background:transparent url("images/logo.jpg") no-repeat scroll;
}

Source

 

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.

img {
   background: url(loader.gif) no−repeat 50% 50%;
}

Source

 

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.

.round{
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px; /* future proofing */
   -khtml-border-radius: 10px; /* for old Konqueror browsers */
}

Source

 

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.

#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');
}

Source

 

7. Center certain content vertically

This will vertically center content that’s in a container (like in a cell of a HTML table)

.container {
   min-height: 10em;
   display: table-cell;
   vertical-align: middle;
}

Source

 

8. Center your website horizontally

Force your website to the center align.

.wrapper {
   width:960px;
   margin:auto;
}

Source

 

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.

.transparent {
   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity:0.5;
   opacity:0.5;
}
Example:
<div class="box transparent">Your content</div>

Source

 

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.

.pull-quote {
   width: 200px;
   float: right;
   margin: 5px;
   font-family: Georgia, "Times New Roman", Times, serif;
   font: italic bold #ff0000 ;
}

Source

 

11. Adding shadow to text – text-shadow

Helps make your text stand out from the rest.

.text-shadow {
   text-shadow: 2px 2px 4px #666;
}

Source

 

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.

/* 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);
}

Source

 

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.

.page-break{
   page-break-before:always;
}

Source

 

14. Resize your background image

Lets you do just what the title says. Simply change the size values and bam: resized background image.

#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;
}

Source

 

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

Use the border-image property on a object to add that image-based border to it.

#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;
}

Source

 

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.

#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;
}

Source

 

17. Adding a gradient – linear-gradient

You can use CSS to add a gradient to the background of something.

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');

Source

 

18. Basic Link Rollover as CSS Sprite

Save bandwidth and the hassle of creating a separate “hover” version of your button by using this sprite.

a {
       display: block;
       background: url(sprite.png) no-repeat;
       height: 30px;
       width: 250px;
}
 
a:hover {
       background-position: 0 -30px;
}

Source

 

19. Bulletproof @fontface

Use any font of your choice by uploading to your server and giving its path.

@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');
    }

Source

 

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.

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

Source

Like This Post ♥

  15 Like

Written by Bono

A Computer Applications Geek, hooked on all things pertaining to Web Development & Design, intent on delivering you the best in Web content to simplify your Blogging Experience.

Comments

3 Comments on "20 CSS Codes to Simplify Your Web Styling Tasks"

  1. Excellent list of CSS code snippets to use in our projects

  2. I think tip 2 should be without an float attribute.

    Here’s a demo.
    http://jsfiddle.net/X8YMW/

  3. Very useful and nice list of CSS Codes.


Here's your chance to leave a comment!

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>