Category Archives: CSS

How to Automatically Re-size Images for iPhones/ iPods

By Mika | Published: 03/09/2010
CSS   @media screen and (max-device-width: 480px){     img{         max-width:100%;         height:auto;     } }  
Posted in CSS | Tagged , , , , , | 2 Comments

How to Apply CSS styles to iPhones/iPods only

By Mika | Published: 03/09/2010
CSS   @media screen and (max-device-width: 480px){     /* All iPhone only CSS goes here */ }  
Posted in CSS | Tagged , , , , , | Leave a comment

Basic Default CSS Print Template

By Mika | Published: 02/23/2010
CSS   /* Set default width, margin, float, and    background.  */ body, #wrap, #content, #container, {    width: 100%;    margin: 0;    float: none;    background: #fff url(none); }   /* Remove any elements not needed in print.    This would include navigation, ads, sidebars, etc. */ #nav, .noprint, #footer {    display: [...]
Posted in CSS | Tagged , , , , , | 4 Comments

How to Change the Default Text Selection Color with CSS

By Mika | Published: 12/13/2009
HTML Example   <p class="selectionBlue">Testing blue selections.</p>   CSS 3   .selectionBlue::selection {         background: #0000FF; /* Safari */         } .selectionBlue::-moz-selection {         background: #0000FF; /* Firefox */ }  
Posted in CSS | Tagged , , , | Leave a comment

How to show/hide div with HTML and CSS only – Toggle visibility with CSS

By Mika | Published: 12/08/2009
HTML Example:   <a onclick="document.getElementById(‘myDiv’).style.display=’block’;" href="javascript:void(0)">Click Here to show  my div</a></div> <div class="anyclass" id="myDiv"> <p>Here goes the content you want to toggle the visibility</p> <a onclick="document.getElementById(‘myDiv’).style.display=’none’;" href="javascript:void(0)">Close [x]</a> </div>  
Posted in CSS | Tagged , , , , , | 2 Comments

How To Make The Whole Div Clickable with CSS Only

By Mika | Published: 11/09/2009
HTML Example:   <div id="myDiv"> <a href="http://blog.fabriziomichels.com"  class="clickDiv">view website</a> </div>   CSS   div#myDiv { width:300px; height:250px; background:url(../images/any_background_image.jpg) no-repeat; float:left; margin:0; padding:0; }   .clickDiv { display:block; height:50px; text-align:center; padding:200px 0 ; }  
Posted in CSS | Tagged , , , | Leave a comment

How to rotate text with CSS

By Mika | Published: 10/31/2009
CSS   .rotate {   /* Safari */ -webkit-transform: rotate(-90deg);   /* Firefox */ -moz-transform: rotate(-90deg);   /* Internet Explorer */ filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);   }  
Posted in CSS | Tagged , , , , | Leave a comment

How to Create a Lightbox/Thickbox with CSS

By Mika | Published: 10/17/2009
CSS:   .black_overlay{         display: none;         position: absolute;         top: 0%;         left: 0%;         width: 100%;         height: 100%;         background-color: black;         z-index:1001;         -moz-opacity: [...]
Posted in CSS | Tagged , , , | Leave a comment

How to align text vertically in a floating div

By Mika | Published: 10/16/2009
Posted in CSS | Tagged , , , , , , , , , | 2 Comments

How to hide an element without “Display:none;”

By Mika | Published: 10/16/2009
CSS:   .hide{ /* Hide stuff without resorting to display:none; */         visibility:hidden;         width:0!important;         height:0!important;         line-height:0!important;         padding:0!important;         margin:0!important; }  
Posted in CSS | Tagged , , | Leave a comment