CSS3

The beauty of the web

Created by Leijun Yang

What is CSS?

What is CSS

  • Cascading Style Sheets (CSS) is a language for specifying how documents are presented to users.
  • The primary goal of CSS is to allow separation of a document's presentation characteristics (formatting) from the document's content.

Why use CSS?

Why use CSS

CSS helps you to keep the informational content of a document separate from the details of how to display it. You keep the style separate from the content so that you can:

  • Avoid duplication
  • Make maintenance easier
  • Use the same content with different styles for different purposes

Find bugs


p {
  margin: 5px 10px
  font: arial;
  text-align: top;
  color: blue;
a {
  display: outline;
  transform: scale(1.2), rotate(-10deg);
  animation: animation(delay-opacity 230ms ease-in);
}
                    

CSS3

Rather than attempting to shove dozens of updates into a single monolithic specification, it will be much easier and more efficient to be able to update individual pieces of the specification. Modules will enable CSS to be updated in a more timely and precise fashion, thus allowing for a more flexible and timely evolution of the specification as a whole.

Time to enjoy CSS3 now

  • Understanding Transitions
  • Understanding transforms
  • Using Animations

Understanding Transitions

CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.

Without Transition Properties


#foo {
  color: white;
  padding: 5px 10px;
  background: #9c3;
}
#foo:hover {
  background: red;
}
                    
Click me!

With Transition Properties


#foo2 {
  color: white;
  padding: 5px 10px;
  background: #9c3;
  /* The property to be transitioned (in this case, the background property */
  transition-property: background;
  /* How long the transition should last (2s) */
  transition-duration: 2s;
  /* How fast the transition happens over time (ease) */
  transition-timing-function: ease;
}
#foo2:hover {
  background: red;
}
                    
Click me!

Timing Functions

The timing function value allows the speed of the transition to change over time by defining one of six possibilities: ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier (which allows you to define your own timing curve).

Demo

Delaying It


#foo3 {
  color: white;
  padding: 5px 10px;
  background: #9c3;
  transition-property: background;
  transition-duration: 2s;
  transition-timing-function: ease;
  /* Delay the transition by 3s */
  transition-delay: 3s;
}
#foo3:hover {
  background: red;
}
                    
Click me!

Shorthand Transition - All In One


a.foo {
  padding: 5px 10px;
  background: #9c3;
  transition: background 0.3s ease 0.5s;
}
a.foo:hover {
  background: #690;
}
					

Transition on Video

Sample

Understanding transforms

CSS transforms allows elements styled with CSS to be transformed (translate,scale,rotate,skew) in two-dimensional or three-dimensional space.

Two-dimensional transform

The 100px translation in X and Y

                        div {
                            transform: translate(100px, 100px);
                        }
                    

Applying the scale transform on hover


ul.gallery li a:hover img {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
}
						

How about multiple transform


ul.gallery2 li a:hover img {
  -webkit-transform: scale(1.5) rotate(-10deg);
  -moz-transform: scale(1.5) rotate(-10deg);
  -o-transform: scale(1.5) rotate(-10deg);
  transform: scale(1.5) rotate(-10deg);
}
						

Three-dimensional transform

Div with a rotateY transform, and perspective on its container

                        div {
                            transform: rotateY(50deg);
                        }
                    
Rotate 3D

Using Animations

CSS3 animation enables us to create animations without JavaScript by using a set of keyframes.

Animations states specified by keyframes


                        @keyframes wobble {
                            0% {left: 100px;}
                            40% {left: 150px;}
                            60% {left: 75px;}
                            100% {left: 100px;}
                        }
                    

Basic Animation Properties


                        div {
                            animation-name: wobble;
                            animation-duration: 1s;
                            animation-timing-function: ease-in-out;
                            animation-delay: 0.5s;
                            animation-iteration-count: 2;
                        }
                    
animate.css

Exercise

Create a pure CSS3 Cycle Slider

Example

No need to wait, start CSS3 now!

STRML

Might be usable today

Open Discussion

Thank you