a[href^="http://"] {
        /* fully valid URL, likely external link */
}

a[href="http://google.com"] {
        /* link to specific website */
}

a[href^="/"], a[href^=".."] {
        /* internal relative link */
}

a[href^="mailto:"] {
        /* email link */
}

a[href$=".pdf"] {
        /* PDF file */
}

a[href$=".doc"] {
        /* Microsoft Word document */
}

a[href$=".mp3"] {
        /* Music file */
}

a[href$=".zip"] {
        /* Archive file */
}

Email This BlogThis! Share to X Share to Facebook

Works great if you can apply a fixed height to the footer.

<div class="page-wrap">
  
  Content!
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}

Check out this Pen!

Email This BlogThis! Share to X Share to Facebook

h1#logo {
   width: 200px; // width of image
   height: 100px; // height of image
   background: url(../path/to/image.jpg); 
   text-indent: -9999px;
}

This technique is credited to Mike Rundle and referred to as the Phark Method. There are many more techniques for CSS Image Replacement.

Email This BlogThis! Share to X Share to Facebook

<div class="papers"></div>

body {
  background: #666;    
}
.papers {
  background-color: white;
  height: 350px;
  padding: 20px;
  width: 260px;
  -webkit-box-shadow: 
        1px 1px   0 rgba(0,   0,   0,   0.100), 
        3px 3px   0 rgba(255, 255, 255, 1.0), 
        4px 4px   0 rgba(0,   0,   0,   0.125), 
        6px 6px   0 rgba(255, 255, 255, 1.0),  
        7px 7px   0 rgba(0,   0,   0,   0.150), 
        9px 9px   0 rgba(255, 255, 255, 1.0),  
        10px 10px 0 rgba(0,   0,   0,   0.175);
  -moz-box-shadow: 
        1px 1px   0 rgba(0,   0,   0,   0.100), 
        3px 3px   0 rgba(255, 255, 255, 1.0), 
        4px 4px   0 rgba(0,   0,   0,   0.125), 
        6px 6px   0 rgba(255, 255, 255, 1.0),  
        7px 7px   0 rgba(0,   0,   0,   0.150), 
        9px 9px   0 rgba(255, 255, 255, 1.0),  
        10px 10px 0 rgba(0,   0,   0,   0.175);
  box-shadow: 
        1px 1px   0 rgba(0,   0,   0,   0.100), 
        3px 3px   0 rgba(255, 255, 255, 1.0), 
        4px 4px   0 rgba(0,   0,   0,   0.125), 
        6px 6px   0 rgba(255, 255, 255, 1.0),  
        7px 7px   0 rgba(0,   0,   0,   0.150), 
        9px 9px   0 rgba(255, 255, 255, 1.0),  
        10px 10px 0 rgba(0,   0,   0,   0.175);
    
}

View Demo

Reference URL

Email This BlogThis! Share to X Share to Facebook

<nav>
  <ul class="top-menu">
    <li><a href=#>Home</a><div class="menu-item" id="home"></div></li>
    <li><a href=#>Catalog</a><div class="menu-item" id="cataloge"></div></li>
    <li><a href=#>Price</a><div class="menu-item" id="price"></div></li>
    <li><a href=#>About</a><div class="menu-item" id="about"></div></li>
    <li><a href=#>Contact</a><div class="menu-item" id="contact"></div></li>
  </ul>
</nav>

nav {
	width: 960px;
	height: 100px;
	margin: 120px auto;
	text-align: center;
}
.top-menu li {
	display: inline-block;
	text-align: center;
	margin: 30px 5px;
	position: relative;
	-webkit-transition: all 0.3s ease; 
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}
.top-menu li:hover {
	margin: 30px 20px; 
}
.top-menu li:active {
	margin: 30px 33px; 
}
.top-menu li a  {
	width: 100px;
	height: 100px;
	z-index: 9999;
	position: absolute;
	top: 35px;
	font-weight: bold;
	display: block;
	text-decoration: none;
	font-size: 20px;
	color: #fff;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
	-webkit-transition: all 0.1s linear; 
	-moz-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
}
.top-menu li:active a {
	font-size: 26px;
	top: 30px;
	text-shadow: none;
}
.top-menu li div.menu-item {	
	width: 100px;
	height: 100px;
	display: block;
	-webkit-transition: all 0.2s ease; 
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-webkit-border-top-left-radius: 100px; 
	-webkit-border-bottom-right-radius: 100px; 
	-moz-border-radius-topleft: 100px; 
	-moz-border-radius-bottomright: 100px; 
	border-top-left-radius: 100px; 
	border-bottom-right-radius: 100px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{ 
	-webkit-border-top-left-radius: 80px; 
	-webkit-border-bottom-right-radius: 80px; 
	-moz-border-radius-topleft: 80px; 
	-moz-border-radius-bottomright: 80px; 
	border-top-left-radius: 80px; 
	border-bottom-right-radius: 80px; 
		-webkit-transform: rotate(225deg);
	-moz-transform: rotate(225deg);
	-o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{ 
	-webkit-border-top-left-radius: 50px; 
	-webkit-border-bottom-right-radius: 50px; 
	-moz-border-radius-topleft: 50px; 
	-moz-border-radius-bottomright: 50px; 
	border-top-left-radius: 50px; 
	border-bottom-right-radius: 50px; 

}
#home { background: #41D05F; }
#cataloge { background: #E42B2B; }
#price { background: #ff8400; }
#about { background: #a800ff; }
#contact { background: #49a7f3; }

Reference URL

Email This BlogThis! Share to X Share to Facebook

Here's for Google Code Prettify (found at this source).

.prettyprint {
  color: #839496;
  background-color: #002b36;
}

.prettyprint .pln {
  color: inherit;
}

.prettyprint .str,
.prettyprint .lit,
.prettyprint .atv {
  color: #2aa198;
}

.prettyprint .kwd {
  color: #268bd2;
}

.prettyprint .com,
.prettyprint .dec {
  color: #586e75;
  font-style: italic;
}

.prettyprint .typ {
  color: #b58900;
}

.prettyprint .pun {
  color: inherit;
}

.prettyprint .opn {
  color: inherit;
}

.prettyprint .clo {
  color: inherit;
}

.prettyprint .tag {
  color: #268bd2;
  font-weight: bold;
}

.prettyprint .atn {
  color: inherit;
}

And here's for CodeMirror. Rebecca Murphey found it but couldn't remember original source.

html * {
  color-profile: sRGB;
  rendering-intent: auto;
}
.cm-s-solarized-light {
  background-color: #fdf6e3;
  color: #657b83;
}
.cm-s-solarized-light .emphasis {
  font-weight: bold;
}
.cm-s-solarized-light .dotted {
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-light .CodeMirror-gutter {
  background-color: #eee8d5;
  border-right: 3px solid #eee8d5;
}
.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {
  color: #93a1a1;
}
.cm-s-solarized-light .CodeMirror-cursor {
  border-left-color: #002b36 !important;
}
.cm-s-solarized-light .CodeMirror-matchingbracket {
  color: #002b36;
  background-color: #eee8d5;
  box-shadow: 0 0 10px #eee8d5;
  font-weight: bold;
}
.cm-s-solarized-light .CodeMirror-nonmatchingbracket {
  color: #002b36;
  background-color: #eee8d5;
  box-shadow: 0 0 10px #eee8d5;
  font-weight: bold;
  color: #dc322f;
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-light span.cm-keyword {
  color: #657b83;
  font-weight: bold;
}
.cm-s-solarized-light span.cm-atom {
  color: #2aa198;
}
.cm-s-solarized-light span.cm-number {
  color: #586e75;
}
.cm-s-solarized-light span.cm-def {
  color: #268bd2;
}
.cm-s-solarized-light span.cm-variable {
  color: #cb4b16;
}
.cm-s-solarized-light span.cm-variable-2 {
  color: #cb4b16;
}
.cm-s-solarized-light span.cm-variable-3 {
  color: #cb4b16;
}
.cm-s-solarized-light span.cm-comment {
  color: #93a1a1;
}
.cm-s-solarized-light span.cm-property {
  color: #b58900;
}
.cm-s-solarized-light span.cm-operator {
  color: #657b83;
}
.cm-s-solarized-light span.cm-string {
  color: #6c71c4;
}
.cm-s-solarized-light span.cm-error {
  font-weight: bold;
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-light span.cm-bracket {
  color: #cb4b16;
}
.cm-s-solarized-light span.cm-tag {
  color: #657b83;
}
.cm-s-solarized-light span.cm-attribute {
  color: #586e75;
  font-weight: bold;
}
.cm-s-solarized-light span.cm-meta {
  color: #268bd2;
}
.cm-s-solarized-dark {
  background-color: #002b36;
  color: #839496;
}
.cm-s-solarized-dark .emphasis {
  font-weight: bold;
}
.cm-s-solarized-dark .dotted {
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-dark .CodeMirror-gutter {
  background-color: #073642;
  border-right: 3px solid #073642;
}
.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {
  color: #586e75;
}
.cm-s-solarized-dark .CodeMirror-cursor {
  border-left-color: #fdf6e3 !important;
}
.cm-s-solarized-dark .CodeMirror-matchingbracket {
  color: #fdf6e3;
  background-color: #073642;
  box-shadow: 0 0 10px #073642;
  font-weight: bold;
}
.cm-s-solarized-dark .CodeMirror-nonmatchingbracket {
  color: #fdf6e3;
  background-color: #073642;
  box-shadow: 0 0 10px #073642;
  font-weight: bold;
  color: #dc322f;
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-dark span.cm-keyword {
  color: #839496;
  font-weight: bold;
}
.cm-s-solarized-dark span.cm-atom {
  color: #2aa198;
}
.cm-s-solarized-dark span.cm-number {
  color: #93a1a1;
}
.cm-s-solarized-dark span.cm-def {
  color: #268bd2;
}
.cm-s-solarized-dark span.cm-variable {
  color: #cb4b16;
}
.cm-s-solarized-dark span.cm-variable-2 {
  color: #cb4b16;
}
.cm-s-solarized-dark span.cm-variable-3 {
  color: #cb4b16;
}
.cm-s-solarized-dark span.cm-comment {
  color: #586e75;
}
.cm-s-solarized-dark span.cm-property {
  color: #b58900;
}
.cm-s-solarized-dark span.cm-operator {
  color: #839496;
}
.cm-s-solarized-dark span.cm-string {
  color: #6c71c4;
}
.cm-s-solarized-dark span.cm-error {
  font-weight: bold;
  border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-dark span.cm-bracket {
  color: #cb4b16;
}
.cm-s-solarized-dark span.cm-tag {
  color: #839496;
}
.cm-s-solarized-dark span.cm-attribute {
  color: #93a1a1;
  font-weight: bold;
}
.cm-s-solarized-dark span.cm-meta {
  color: #268bd2;
}

Email This BlogThis! Share to X Share to Facebook

Requires jQuery and jQuery UI for the actual slider. The face is made from elements made into circles with border-radius. The mouth, indicating happiness level, is another circle just cropped down to size with a parent element with hidden overflow.

<div id="slider"></div>

<div id="face">
	<div id="mouth-box">
		<div id="mouth" class="straight"></div>
	</div>
</div>

#face { 
  width: 100px; 
  height: 100px; 
  position: relative;
  border: 2px solid black;
  border-radius: 50px; 
  margin: 20px auto; 
}

#face:before, #face:after {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  top: 30px;
  border-radius: 10px;
  background: black; 
}
#face:before {
  left: 30px; 
}
#face:after {
  left: 60px; 
}

#mouth-box {
  width: 60px; 
  height: 20px; 
  left: 20px; 
  top: 60px; 
  overflow: hidden; 
  background: white; 
  position: relative; 
}

#mouth { 
  width: 60px; 
  height: 60px; 
  border-radius: 30px; 
  border: 2px solid black; 
  position: absolute; 
  top: 0; 
  left: 0; 
}

#mouth.straight {
  height: 0px !important;
  top: 7px !important;
  border-width: 1px;
  bottom: auto !important;
}

var newWidth,
    mouth = $("#mouth");

$( "#slider" ).slider({
   slide: function(event, ui) {
     
     if (ui.value > 51 ) {
       
       mouth.css({ bottom: 0, top: "auto" });
       
       newWidth = 160 - ui.value;
       
       mouth.css({
         width           : newWidth,
         height          : newWidth,
         "border-radius" : newWidth / 2,
         left            : -25 + ((ui.value-50) / 2)
       })
       .removeClass("straight");
       
     } else if ((ui.value > 48) && (ui.value < 52)) {
       
       mouth.addClass("straight");
       
     }  else {
       
       mouth.css({ top: 0, bottom: "auto" });
       
       newWidth = ui.value + 60;
       
       mouth.css({
         width           : newWidth,
         height          : newWidth,
         "border-radius" : newWidth / 2,
         left            : -ui.value / 2
       })
       .removeClass("straight");
       
     }
     
   },
  value: 50
});

Reference URL

Email This BlogThis! Share to X Share to Facebook