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;
}
                    

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;
}
                    

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

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;
}
                    

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

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

                        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 {
                            transform: rotateY(50deg);
                        }
                    

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;
                        }
                    

Exercise

Create a pure CSS3 Cycle Slider

No need to wait, start CSS3 now!

Might be usable today

• Media Queries (http://mediaqueri.es/)
• CSS3 Selectors
• CSS3 Color
• ...

Open Discussion

Thank you