expression [...]]]> Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code.
Selectors define the following function:

expression ∗ element → boolean
That is, given an element and a selector, this specification defines whether that element matches the selector.
CSS3 Selectors provide new, more powerful ways to select nodes using CSS. This helps when styling complex documents or making CSS that can apply to a document as its structure changes.
Click On the image to see examples of CSS3 Selectors.

A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running.

<link href="CSS/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 350px)" >
[...]]]>

A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running.

<link href="CSS/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 350px)" >
<link href="CSS/tablet_size.css" rel="stylesheet" type="text/css" media="all and (min-width: 350px) and (max-width: 725px)" >
<link href="CSS/desktop_fullscreen.css" rel="stylesheet" type="text/css" media="all and (min-width: 725px)" >

media=”all and (min-width: 0px) and (max-width: 350px)” – this means that for all media type && max-width is equal to 350px then apply the phone.css to the page. If the width is more than 350px then it moves to the tablet CSS and so forth for the desktop.
Phone CSS – container width is 325px this automatically aligns all the images vertically-one image in one row.

body{
background-color:#036;
color:#FFF;
font-family:Tahoma, Geneva, sans-serif;
}
#container
{
width:325px;
height:auto;
}
#container img
{
width:250px;
height:200px;
margin:2px;
}

Tablet css the container width is 525px and this places 2 images in one row. Changed the bgcolor to see the difference.

body{
background-color:#9C0;
color:#FFF;
font-family:Tahoma, Geneva, sans-serif;
}
#container
{
width:525px;
height:auto;
margin:auto;
}
#container img
{
width:250px;
height:200px;
margin:2px;
}
h1
{
text-align:center;
}

desktop.css - the container is above 800px and 3 images will show in one row.

body{
background-color:#666;
color:#FFF;
font-family:Tahoma, Geneva, sans-serif;
}
#container
{
width:825px;
height:auto;
margin:auto;
}
#container img
{
width:250px;
height:200px;
margin:2px;
}
h1
{
text-align:center;
}

You can use chrome or safari to test it or if you have DW CS5 with the HTML 5 pack then there is the multiscreen preview option to test the queries – Click here to see the example
This is a very simple example you can do a lot with more with css for different sizes. The content is same but the display can be manipulated using the media queries.

Wow CSS3 animation property is great…you can really create great animation with this…Too bad Webkit is the only one supporting it for now. so Chrome and Safari are the browsers on which it will work. Click on the image to see the demo…

PS: Vendor-prefixed CSS Property Overview
is @ [...]]]>

Wow CSS3 animation property is great…you can really create great animation with this…Too bad Webkit is the only one supporting it for now. so Chrome and Safari are the browsers on which it will work. Click on the image to see the demo…

PS: Vendor-prefixed CSS Property Overview
is @ Click to see


Here is the code for the blue circle in the demo Pretty simple –

#circle {
background: #0CF;
height: 100px;
width: 100px;
-webkit-border-radius:100px;
-webkit-animation-name: circle; /*this is the name of the animation*/
-webkit-animation-timing-function: linear; /*Type of animation ease in ease out linear etc*/
-webkit-animation-iteration-count: infinite; /*How many times do you want it to run if you write 1 and it runs one time infinite is like looping*/
-webkit-animation-duration: 8s; /*How long do you want it to run*/
-webkit-animation-direction:alternate; /*alternate meaning-if you animate from point 1 to point 2 it animates and while returning from point 2 to point 1 it will also animate, the default is normal which is just from point 1 to point 2*/
}
@-webkit-keyframes circle {
0% {
opacity:0; /*At each keyframe what do you want the element to do, like at 20% of the animation i want the width to increase to 300px,height to 300px and margin-left change*/
}
20%
{
margin-left:500px;
width:300px;
height:300px;
opacity:1;
color:#fff;
}
50%
{
width:400px;
height:400px;
border:thick;
margin-right:200px;
color:#FF0;
}
100% {
margin-left:0px;
opacity:1;
font-size:150px;
color:#fff;
background-color:#FFF;
-webkit-box-shadow:3;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
width:1000px;
height:1000px;
}
}

you can view the source code by going to the demo page - Demo Page
I will be trying out practical examples using the animation property and lets see how that goes !!

Works well on Webkit(Chrome and Safari).
you can View the source code by clicking on Demo image above. Here is the CSS which does the sliding trick-

.facts:target{
opacity:1;
padding-left:10px;
;}

.facts{
opacity:0;
-webkit-transition-property:padding,opacity;
-webkit-transition-duration:0.5s,0.5s;
-webkit-transition-timing-function:ease,ease;
float:left;
padding-left:270px;

Works well on Webkit(Chrome and Safari).
you can View the source code by clicking on Demo image above. Here is the CSS which does the sliding trick-

.facts:target{
opacity:1;
padding-left:10px;
;}

email me at designer@vaniawebdesign.com if you have any questions around this example.I will be happy to help.

Works on Webkit(Chrome and Safari).
you can View the source code by clicking on Demo.

It is very simple to create such an effect with CSS3 transitions. The mouse over images are absolutely positioned and have an opacity of 0.On hover i am just changing the opacity and width height padding [...]]]>

Works on Webkit(Chrome and Safari).
you can View the source code by clicking on Demo.

It is very simple to create such an effect with CSS3 transitions. The mouse over images are absolutely positioned and have an opacity of 0.On hover i am just changing the opacity and width height padding of the image. The CSS which does the magic is below.
Hope you like the example.

.imagesgrid .showonhover{
position:absolute;
-webkit-transition-property:width,height,padding;
-webkit-transition-duration:0.5s,0.5s,0.5s;
-webkit-transition-timing-function:ease,linear,ease-in-out;
-moz-transition-property:width,height,padding;
-moz-transition-duration:0.5s,0.5s,0.5s;
-moz-transition-timing-function:ease,linear,ease-in-out;
-o-transition-property:width,height,padding;
-o-transition-duration:0.5s,0.5s,0.5s;
-o-transition-timing-function:ease,linear,ease-in-out;
opacity:0;
}
.imagesgrid:hover .showonhover
{
width:272px;
height:272px;
padding:20px;
opacity:1;
margin:auto;
}

Accordion Using CSS3 Transitions and HTML 5 elements (Try Chrome or Safari to see it correctly!! They Half work on FF
)-

Example uses:
-webkit-transition-property:width,opacity;
-webkit-transition-duration: 1s,1s;
-webkit-transition-timing-function:ease,linear;

Styles –

section,header,figure,aside,footer{
display:block
}
body{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333;
[...]]]>

Accordion Using CSS3 Transitions and HTML 5 elements (Try Chrome or Safari to see it correctly!! They Half work on FF
)-

Example uses:
-webkit-transition-property:width,opacity;
-webkit-transition-duration: 1s,1s;
-webkit-transition-timing-function:ease,linear;

Styles –

section,header,figure,aside,footer{
display:block
}
body{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333;
background:#333;
}
a{
color:#fff;
font-weight:bold;
text-shadow:#FFF;
text-decoration:none;
padding:5px;
background-color:#C93;
}
div{
height:300px;
width:60px;
background-color:#CCC;
padding:10px;
float:left;
}
.accordion
{
float:left;
height:200px;
width:auto;
overflow:hidden;
background-color:#9C0;
border:thin dotted #ccc;
}
.accordion p:target
{
width:500px;
opacity:1;
background-color:#9CC;
padding:10px;
margin:10px;
-webkit-border-radius:10px;
}
.accordion p{
width:60px;
opacity:0;
-webkit-transition-property:width,opacity;
-webkit-transition-duration: 1s,1s;
-webkit-transition-timing-function:ease,linear;

}

Try Chrome or Safari to see it correctly!! They Half work on FF

This Example uses the following Transitions –

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transition:height 2s linear;
-moz-transition:width 2s linear;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;

Click on the image to view the example.

CSS for this menu –

<style>
.accordion div
{
background-color:#9CF;
width:100px;
float:left;
-webkit-transition: width 1s ease;
-moz-transition:width 1s ease;
font-family:Georgia, "Times New Roman", Times, serif;
overflow:hidden;
height:50px;

}
.accordion p:first-child
{
padding:10px;
[...]]]>

CSS for this menu –


<style>
.accordion div
{
background-color:#9CF;
width:100px;
float:left;
-webkit-transition: width 1s ease;
-moz-transition:width 1s ease;
font-family:Georgia, "Times New Roman", Times, serif;
overflow:hidden;
height:50px;

}
.accordion p:first-child
{
padding:10px;
margin:10px;
}

.accordion div:hover
{
width:300px;
background-color:#09F;
height:373px;
border:#FFF;
}
.textstyle{
padding:5px;
color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
</style>

Click on the Image to see the Live Example. The animation part will only work on browsers which support CSS3 transitions – Chrome,Safari,Opera.Currently not working on Mozilla.