How to style a link by filetype in CSS

To style a link by filetype in CSS you can use the following snippet.

Sample CSS

a[href$=".exe"] { background: url(icons/exe.png) left center no-repeat; padding-left: 50px; }
a[href$=".rar"] { background: url(icons/rar.png) left center no-repeat; padding-left: 50px; }
a[href$=".doc"] { background: url(icons/doc.png) left center no-repeat; padding-left: 50px; }
a[href$=".pdf"] { background: url(icons/pdf.png) left center no-repeat; padding-left: 50px; }
a[href$=".zip"] { background: url(icons/zip.png) left center no-repeat; padding-left: 50px; }
a[href$=".html"] { background: url(icons/link.png) left center no-repeat; padding-left: 50px; }

Please rate this snippet

How to make a text blur in CSS

To make a text blur in CSS you can use the following snippet.

Sample CSS

.blurtext {
    color: transparent;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
    font-size: 60px;
    -webkit-transition: text-shadow 2.0 ease-out; 
    -o-transition: text-shadow 2.0 ease-out; 
    -ms-transition: text-shadow 2.0 ease-out; 
    -moz-transition: text-shadow 2.0 ease-out; 
    transition: text-shadow 2.0 ease-out;
}

Please rate this snippet

CSS Web Safe Font Combinations

CSS Web Safe Font Combinations

Serif Fonts

  • Georgia, serif
  • “Palatino Linotype”, “Book Antiqua”, Palatino, serif
  • “Times New Roman”, Times, serif
  • Sans-Serif Fonts

  • Arial, Helvetica, sans-serif
  • “Arial Black”, Gadget, sans-serif
  • “Comic Sans MS”, cursive, sans-serif
  • Impact, Charcoal, sans-serif
  • “Lucida Sans Unicode”, “Lucida Grande”, sans-serif
  • Tahoma, Geneva, sans-serif
  • “Trebuchet MS”, Helvetica, sans-serif
  • Verdana, Geneva, sans-serif
  • Monospace Fonts

  • “Courier New”, Courier, monospace
  • “Lucida Console”, Monaco, monospace
  • source: W3Schools

    Please rate this snippet

    How to create zebra table effect with jQuery and CSS

    To create zebra table effect with jQuery and CSS you can use the following snippet.

    jQuery

    $("tr:odd").addClass("oddRowsEffect");
    

    in the css you need something like

    tr.oddRowsEffect{
    /* background: choose a color; *
    /* color: choose a color; *
    }
    

    Please rate this snippet