Web Design Solutions

2011-10-11T19:52:00.003+05:30

2011-10-11T19:52:00.001+05:30

2011-10-11T19:51:00.003+05:30

2011-10-11T19:51:00.001+05:30

:last-child

2011-09-28T12:03:00.000+05:30

:last-child { declaration aria }

:nth-last-of-type

2011-09-28T12:00:00.001+05:30

:nth-last-of-type( { number of expression | odd | even } )
{ declaration aria }

:nth-of-type

2011-09-28T11:54:00.000+05:30

:nth-of-type( { expression | odd | even } )
{ declaration aria }

:nth-last-child(N)

2011-09-27T14:43:00.001+05:30

:nth-last-child( { number expression | odd | even } )
{ declaration aria }

:nth-child

2011-09-27T14:38:00.001+05:30

:nth-child ( { expression | odd | even } )
{ declaration aria }

CSS3 - Pseudo Classes

2011-09-27T14:36:00.001+05:30

CSS objective "style of separation of content" depends largely on its ability to penetrate first the content. Well, in CSS3, that mission is enhanced by the addition of the Structural Funds of pseudo-classes. These selectors allow you to select children of a parent based on a set of common criteria, such as the third son, the children even / odd, the n-th child within each group of children of a certain type in the matrix, and more drugoe.Nemnogo overwhelming, yes, but better safe than disappointment.

CSS3 pseudo-classes are supported in IE8+ , Firefox 3.1+, and Safari 3.1+

Text Stroke

2011-09-23T09:44:00.000+05:30

.classname { -webkit-text-stroke: 3px black; color: white; }

Text Outline

2011-09-23T09:42:00.005+05:30

body { background-color: white; } .classname { text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black; color: white; }

Multiple Background

2011-09-22T14:27:00.002+05:30

.bg { background: url(image/flower.jpg) 0 0 no-repeat, url(image2/tree.jpg) 100% 0 no-repeat; }

CSS3 Solutions for Microsoft Internet Explorer

2011-09-18T19:49:00.001+05:30

CSS3 probably the latest trend in web design at this time, allowing developers to implement a series of solutions for their projects with a simple CSS to avoid having to semantic no marks, JavaScript complex and additional images,. Unfortunately, it is not surprising that Microsoft Internet Explorer, even in its most recent version is not yet compatible with most of the properties and features introduced in CSS3.

Transparency and Opacity

#idname {
opacity: .4; /* IE9+ and other browsers */
filter: alpha(opacity=40); /* IE6+ */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6+ */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* works in IE8 only */ }

Rounded Corners or border-radius

.class-name {
border-radius: 15px;
behavior: url(border-radius.htc);
}

Box-shadow

.class-name
{
-moz-box-shadow: 2px 2px 3px #969696; /* Firefox 3.5+ */
-webkit-box-shadow: 2px 2px 3px #969696; /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3); /* ie */
}

Gradients

.class-name
{ background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Chrome and Safari */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 and IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

Conditional comments

<link rel="stylesheet" type="text/css" href="style.css" />

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="allversion-ie.css" />
<![endif]-->

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

<!--[if lt IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

CSS3 - Columns

2011-09-15T15:58:00.001+05:30

#columns {

-webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

-moz-column-count: 3;
-moz-column-rule: 1px solid #bbb;
-moz-column-gap: 2em;

column-count: 3;
column-rule: 1px solid #bbb;
column-gap: 2em;

display: block;
}

CSS3 - Layering multiple shadowbox

2011-09-15T15:22:00.000+05:30

#Example_layer {
-moz-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
-webkit-box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
}

CSS - Shadow with the ‘inset’

2011-09-15T14:48:00.000+05:30

#Example_inset {
-moz-box-shadow: inset -5px -5px 0 5px #888;
-webkit-box-shadow: inset -5px -5px 0 5px#888;
box-shadow: inset -5px -5px 0 5px #888;
}

CSS3 - Background Size

2011-09-15T14:29:00.000+05:30

#bg1 {
background-size: auto;
}
#bg2 {
background-size: 275px 125px;
}

CSS - Border-Radius

2011-09-15T09:55:00.000+05:30

#my_CSS3_id {
    text-align:center;
    margin:0 auto;
    height:50px;
    width:580px;
border: 5px solid #c4c8cc;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

#my_CSS3_id2 {
    text-align:center;
    margin:20px auto;
    height:50px;
    width:580px;
border: 5px solid #c4c8cc;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 15px;


   -khtml-border-radius-topleft:15px;
   -khtml-border-radius--topright:15px;
   -khtml-border-radius-bottomright: 0px;
   -khtml-border-radius-bottomleft: 0px;

    border-radius-topright-topleft:15px;
    border-radius-topright-topright:15px;
    border-radius-topright-bottomright: 0px;
    border-radius-topright-bottomleft: 0px;
}

CSS3 - Transform

2011-09-15T09:54:00.001+05:30

#my_CSS3_id {
    text-align:center;
    margin:0 auto;
    height:50px;
    width:580px;
    font-size:20px;
    color:#FFF;
     background-color:#999;
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}

#my_CSS3_id2 {
    text-align:center;
    margin:20px auto;
    height:50px;
    width:580px;
    font-size:20px;
    color:#FFF;
     background-color:#F00;
-moz-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
}

CSS3 - Opacity

2011-09-14T19:01:00.000+05:30

#L1 { background:#036; opacity:0.2; height:20px; width:500px; margin:20px auto; text-align:center; }
#L2 { background:#036; opacity:0.4; height:20px; width:500px; margin:20px auto; text-align:center;}
#L3 { background:#036; opacity:0.6; height:20px; width:500px; margin:20px auto; text-align:center;}
#L4 { background:#036; opacity:0.8; height:20px; width:500px; margin:20px auto; text-align:center; }
#L5 { background:#036; opacity:1.0; height:20px; width:500px; margin:20px auto; text-align:center; }

#L7 { height:20px; width:500px; margin:20px auto; text-align:center; }
#L8 { opacity:0.25; width:150px; height:50px; margin:20px auto; text-align:center; }
#L9 {opacity:0.50; width:150px; height:50px; margin:20px auto; text-align:center; }
#L10 { opacity:0.75; width:150px; height:50px; margin:20px auto; text-align:center; }
#L11 { opacity:1.0; width:150px; height:50px; margin:20px auto; text-align:center; }

CSS3 - Text Shadow

2011-09-14T18:52:00.000+05:30

#my_CSS3_id {
    text-align:center;
    margin:0 auto;
    height:50px;
    width:580px;
text-shadow: 2px 2px 7px #111;
font-size: 3.2em;
color: #f5f5f5;
}

#my_CSS3_id2 {
    text-align:center;
    margin:20px auto;
    height:50px;
    width:580px;
text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;
font-size: 3.2em;
color: #fff;
text-align: center;
padding: 10px 0px 5px 0px;
background: #151515;
}

CSS3 - rgb-rgba-Color-Opacity

2011-09-14T18:49:00.000+05:30

#L1 { background:rgb(60, 80, 100); height:20px; width:500px; margin:20px auto; text-align:center; }
#L2 { background:rgb(60, 100, 100); height:20px; width:500px; margin:20px auto; text-align:center;}
#L3 { background:rgb(60, 120, 100); height:20px; width:500px; margin:20px auto; text-align:center;}

#L4 { background:rgb(25, 50, 100); height:20px; width:500px; margin:20px auto; text-align:center; }
#L5 { background:rgb(25, 50, 150); height:20px; width:500px; margin:20px auto; text-align:center; }
#L6 { background:rgb(25, 50, 200); height:20px; width:500px; margin:20px auto; text-align:center; }

#L7 { background:rgba(153, 134, 117, 0.2); height:20px; width:500px; margin:20px auto; text-align:center; }
#L8 { background:rgba(153, 134, 117, 0.4); height:20px; width:500px; margin:20px auto; text-align:center; }
#L9 { background:rgba(153, 134, 117, 0.6); height:20px; width:500px; margin:20px auto; text-align:center; }
#L10 { background:rgba(153, 134, 117, 0.8); height:20px; width:500px; margin:20px auto; text-align:center; }
#L11 { background:rgba(153, 134, 117, 1.0); height:20px; width:500px; margin:20px auto; text-align:center; }

CSS3 - Multiple Columns

2011-09-14T18:48:00.001+05:30

#my_CSS3_id {
    margin:0 auto;
    height:50px;
    width:500px;
text-align: justify;
-moz-column-width: 15em;
-moz-column-gap: 2em;
-webkit-column-width: 15em;
-webkit-column-gap: 2em;
}

#my_CSS3_id2 {

    margin:20px auto;
    height:50px;
    width:500px;
text-align: justify;
-moz-column-count: 4;
-moz-column-gap: 1.5em;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 1.5em;
-webkit-column-rule: 1px solid #c4c8cc;
}

CSS3 - hsla-Color-Opacity

2011-09-14T18:46:00.001+05:30

#L1 { background:hsl(320, 100%, 25%); height:20px; width:500px; margin:20px auto; text-align:center; }
#L2 { background:hsl(320, 100%, 50%); height:20px; width:500px; margin:20px auto; text-align:center;}
#L3 { background:hsl(320, 100%, 75%); height:20px; width:500px; margin:20px auto; text-align:center;}

#L4 { background:hsl(202, 100%, 50%); height:20px; width:500px; margin:20px auto; text-align:center; }
#L5 { background:hsl(202, 50%, 50%); height:20px; width:500px; margin:20px auto; text-align:center; }
#L6 { background:hsl(202, 25%, 50%); height:20px; width:500px; margin:20px auto; text-align:center; }

#L7 { background:hsla(165, 35%, 50%, 0.2); height:20px; width:500px; margin:20px auto; text-align:center; }
#L8 { background:hsla(165, 35%, 50%, 0.4); height:20px; width:500px; margin:20px auto; text-align:center; }
#L9 { background:hsla(165, 35%, 50%, 0.6); height:20px; width:500px; margin:20px auto; text-align:center; }
#L10 { background:hsla(165, 35%, 50%, 0.8); height:20px; width:500px; margin:20px auto; text-align:center; }
#L11 { background:hsla(165, 35%, 50%, 1.0); height:20px; width:500px; margin:20px auto; text-align:center; }