Category Archives: CSS

examples of CSS use

CSS (more) lifted corners 

.lifted {
     border-radius:2px;
     position:relative;
     padding:1em;
     background:#fcfcfc;
     box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
     -o-box-shadow: 0px 0px 1px 1px  rgba(0,0,0,0.2);
     -moz-box-shadow: 0px 0px 1px 1px  rgba(0,0,0,0.2);
}   
   
.lifted:before, .lifted:after {
     content: "";
     position: absolute;
     z-index: -1;
     -ms-transform: skew(-3deg,-2deg);
     -webkit-transform: skew(-3deg,-2deg); /* Safari and Chrome */
     -o-transform: skew(-3deg,-2deg); /* Opera */
     -moz-transform: skew(-3deg,-2deg); /* Firefox */
     bottom: 14px;
     box-shadow: 0 15px 5px rgba(0, 0, 0, 0.3);
     height: 50px;
     left: 1px;
     max-width: 50%;
     width: 50%;
}
.lifted:after {
     -ms-transform: skew(3deg,2deg); /* IE 9 */
     -webkit-transform: skew(3deg,2deg); /* Safari and Chrome */
     -o-transform: skew(3deg,2deg); /* Opera */
     -moz-transform: skew(3deg,2deg); /* Firefox */
     left: auto;
     right: 1px;
}

Lifted corners

CSS Lifted corners 

.drop-shadow {
    position:relative;
    float:left;
    width:40%;   
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before,
.drop-shadow:after {
    content:"";
    position:absolute;
    z-index:-2;
}

.drop-shadow p {
    font-size:16px;
    font-weight:bold;
}

.lifted {
    -moz-border-radius:4px;
    border-radius:4px;
}

.lifted:before,
.lifted:after {
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);  
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);   
    -moz-transform:rotate(-3deg);  
    -ms-transform:rotate(-3deg);  
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}

.lifted:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);  
    -moz-transform:rotate(3deg); 
    -ms-transform:rotate(3deg); 
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
}

example of the drop shadow

example of the drop shadow with lifted corners

Blog style post dates, using CSS 


span.postDate          {display: block; position: relative; width: 60px; margin-bottom: 18px;
                    border: 1px solid #888885; -moz-border-radius: 5px; -webkit-border-radius: 5px;
/* day */               font: 24px/35px "Helvetica Neue", Arial, sans-serif; text-align: center;
                    letter-spacing: 0px; text-decoration: none; color: #666;
                    background: #fcfcfc url("images/date-day-bg.png") repeat-x left 17px;}

span.postDate sup          /* lift the suffix, so that the number is fully centered */
                    {position: absolute; padding-top: 4px;
                    font-size: 10px; line-height: 10px; letter-spacing: normal;}

/* year + month */
span.postDate abbr          {display: block; font: 10px Verdana, sans-serif; letter-spacing: normal; color: white;
                    -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;}
/* month */
span.postDate>:first-child     {width: 50px; margin: -1px 0 0 -1px; padding: 0 5px; border: 1px solid #832a28;
                    line-height: 16px; text-align: left; text-transform: uppercase;
                    background: #a33537 url("images/date-month-bg.png") repeat-x bottom left;}
/* year */
span.postDate sup+abbr     {position: absolute; top: 0; left: 0; width: 52px; padding: 0 3px;
                    border: 1px solid #a33537; border-bottom: 1px solid #832a28;
                    line-height: 14px; color: #eaa; text-align: right;}


     
          Apr 10th 2009

Vertical text 



   
    div.vertical {
              color: red;
             border: 1px solid green;
             
     -moz-transform: rotate(270deg);  /* FF3.5+ */
       -o-transform: rotate(270deg);  /* Opera 10.5 */
  -webkit-transform: rotate(270deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=2.70);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2.70)"; /* IE8 */

    }

CSS Rounded borders 


-moz-border-radius: 8px; /*Mozilla*/
-webkit-border-radius:8px;/*Google chrome*/
-khtml-border-radius:8px; /* Linux browsers */
border-radius:8px;/*CSS3 and IE8 */

CSS Reset 

/*
 * CSS Reset based on code from 
 * http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 * 
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

CSS3 gradients

#element {
/* Mozilla browsers only */
background: -moz-linear-gradient(0% 100% 0deg, #FFFFFF, #F2F2F0 100%) repeat scroll 0 0 transparent;
}