To resize a image proportionally with CSS, simply set either width or height to auto. This should also work if the img html tag has width and height attributes set.
img.resize{
width:200px;
height: auto;
}
CSS
How to print url after a link in CSS
To print url after a link in CSS you can use the following snippet.
When printing the page each link has its ahref target appended surrounded by Parentheses.
Sample CSS
@media print
{
a:after {
content: " (" attr(href) ") ";
}
}
How to flip a image in CSS
To flip a image in CSS you can use the following snippet.
img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
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; }
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;
}
How to center a div in CSS
To center a div in CSS you can use the following snippet.
Sample CSS
#divID {
width: 300px; /* width you need */
height: 150x; /* height you need */
position:absolute;
left:50%;
top:50%;
margin-left:-150px; /* half the width */
margin-top:-75px; /* half the height */
}
CSS Web Safe Font Combinations
CSS Web Safe Font Combinations
Serif Fonts
Sans-Serif Fonts
Monospace Fonts
source: W3Schools
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; *
}
How to change the cursor when hovering a Listitem
To change the cursor when hovering a listitem you should use CSS3.
Sample List
<ul> <li>listitem1</li> <li>listitem2</li> <li>listitem3</li> <li>listitem4</li> <li>listitem5</li> <li>listitem6</li> </ul>
Sample CSS
li { cursor: pointer; }
see also CSS cursor Property at W3Schools