1_
Write a style that will rotate, create shadow and make rounded corners
CSS
div {
border-radius: 25px;
box-shadow: 10px 10px 5px #888888;
-ms-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
2_
Available transformations
CSS <div style=" border: solid 2px blue; width: 200px; height:100px; transform: translate(20px, -30px) scale(0.5,0.5) rotate(5deg) skew(-15deg, 0deg); ">Transform</div>
3_
Use transition to stretch DIV element when user moves mouse over the element
In this example, when user moves mouse over the element, height will be increasing its size from 100px to 200px
for 3 seconds starting immediatelly and after 1 second from the mouse move width of the div will be expanding from 100px to 200px for 2 seconds
CSS
#mytransition { width: 100px; height:100px; }
#mytransition:hover { width : 200px; height: 200px}
HTML <div id="mytransition" style=" border: solid 2px blue; transition: width 2s linear 1s, height 3s; ">Mouse over here</div>property - duration - type - delay
4_
Use animation to change element position and border
CSS
#myanimation:hover {
position: relative;
animation: animationPath 3s;
animation-fill-mode:forwards; /* remains at the end of the path */
}
@keyframes animationPath {
0% {border: solid 1px blue; left:0px; top:0px;}
50% {border: dashed 10px black; left:300px; top:300px;}
100% {border: solid 5px green; left:600px; top:0px;}
}
You can see that border type gets ignored
HTML <div id="myanimation" style="border: solid 2px blue;" >Mouse over here and hold it inside of the box</div>
5_
different style based on screen size
HTML
<head>
<link rel="stylesheet"
media="screen and (max-width: 640px)"
href="html5style1.css" />
<link rel="stylesheet"
media="screen and (min-width: 641px) and (max-width: 1024px)"
href="html5style2.css" />
<link rel="stylesheet"
media="screen and (min-width: 1025px)"
href="html5style3.css" />
</head>
6_
CSS3 selectors
CSS /* 1 logical */ img:not(p) - all elements except p /* 2 combinator */ div ~ li /* get all li direct siblings of div */ /* 3 content */ img[src*="ie"] - /* all attributes containing "ie" */ /* 4 order */ table tr:odd - rows with odd numbers li:nth-child(5n) - every fifth item /* 5 state */ input:enabled input:disabled input:checked - /* checked input elementes */ input:checkbox:checked /* all checked checkboxes */ input:empty input:required /* all elements with required attribute */ input:optional /* all elements without required attribute */ /* 6 hierachy */ img:only-of-type /* parent of img has only 1 img child */ input:only-child /* parent of img has only 1 child */ p:first-of-type /* selects first p elements of its parent */ p:last-of-type /* selects last p elements of its parent */