CSS

Vertically Align an Element with CSS : vertical-align behavior

A while back, i posted an article on vertical alignment of an element using jquery - Vertically Align an Element with jQuery - Vertical Align an Anchor or Div. However, this is not always the best solution if you are applying the vertical alignment on standard content. A quick and compliant way to apply vertical-align to an element:

IE7 Hide Link Text and Leave Link Clickable - IE7 Text-Indent Effect

line-height: 0; 
font-size: 0;
color: transparent;

Mobile Version of Website

To implement our changes, we first set the viewport to the device's width. Do this by inserting the following line of code into the head of your XHTML template:

CSS Drop Shadow on Bottom Side Only

Whatever the value of the third value (the blur), set the fourth value (the spread) to the negative of it and voila! You have a bottom side only drop shadow with css.

-moz-box-shadow: 0 6px 4px -4px gray;
 
-webkit-box-shadow: 0 6px 4px -4px gray;
 
box-shadow: 0 6px 4px -4px gray;

See what I mean . . .

Load Custom Font with CSS - TTF and OTF Font Files

@font-face {  
  font-family: eurostile ;  
  src: url(fonts/Eurostile-ExtendedTwo.otf) format("truetype");  
}  
 
/* Then use it like you would any other font */  
.eurostile { font-family: eurostile , verdana, helvetica, sans-serif;  
}  
 

Cross Browser Rounded Corners - CSS

.rounded-corners {
     -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

Cross Browser Drop Shadows

-moz-box-shadow: 0px 6px 8px #111111;
-webkit-box-shadow: 0px 6px 8px #111111;
box-shadow: 0px 6px 8px #111111;
 
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#222222')";
 
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#222222');

The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

Browser support is growing of late with Mozilla (Firefox

Syndicate content