Home | Knowledge verification | Import for Anki (Save target as ...)

Content:
1. Round corners, shadow, rotation
2. Transformations
3. Transitions
4. Animations
5. Using different style based on screen size
6. Selectors

CSS3 builds on previous specifications of CSS and it is backwards compatible.
Specification on w3.org
CSS3 cheat sheet on www.onblastblog.com
CSS3 cheat sheet on websitesetup.org

1. Round corners, shadow, rotation

Not all browsers support these features. You may need to add browser specific attributes like -ms-transform for Microsoft browser. 

CSS
  div {
    border-radius: 25px;
     box-shadow: 10px 10px 5px #888888;
     -ms-transform: rotate(2deg);
     -moz-transform: rotate(2deg);
  }

2. Transformations

With transformation it is possible to modify geometry of elements.
Code example:CSS 3 Basics

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. Transitions

With transition it is possible to create effects where elements will change properties values from current to desired.
Code example:CSS 3 Basics

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. Animations

As transitions provides property change between 2 states, animation can go through multiple states.
Code example:CSS 3 Basics

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. Using different style based on screen size

Different devices like laptop or cell phone have screen with different sizes. In order to display content in a readable way, it is possible to change style based on the screen size available.

w3.org specification
Example of changing layout (change browser window width). 

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. Selectors

CSS 3 introduces new selectors, see Specification for details 

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 */



Home | Knowledge verification | Import for Anki (Save target as ...)