Estilo & CSS3

Csar Carruitero Avila

Objetivo

CSS3 Styling

Objetivo

Dar a conocer las novedades de la nueva especificacin CSS3

Qu de bueno tiene usar CSS3?

-Cdigo ms simple -Ahorro tiempo y trabajo

Inconvenientes?

no est implementado al 100% en todos los navegadores

Antecedentes

CSS3 Styling

Pseudo-Elementos

CSS3 Styling

Pseudo-elementos

::first-line

::first-letter

::before

::after

::selection

Pseudo-Clases

CSS3 Styling

Pseudo-clases

:nth-child(N):nth-last-child(N):nth-of-type(N).:nth-last-of-type(N):last-child. :first-of-type:last-of-type.:only-child:only-of-type.:root.:empty.:enabled:disabled.:checked:not(S).....

Bordes

CSS3 Styling

border-color

Permite utilizar mltiples border-color

border: 8px solid #000;-moz-border-bottom-colors: #555 #666 #777 #888-moz-border-top-colors: #555 #666 #777 #888-moz-border-left-colors: #555 #666 #777 #888-moz-border-right-colors: #555 #666 #777 #888

border-image

-moz-border-image:url(border.png) 30 30 round;

-moz-border-image:url(border.png) 30 30 stretch;

border-radius

-moz-border-radius: 10px;

-moz-border-radius: 0 10px 0 10px;

Permite crear bordes redondeados de igual o diferente medida de una manera sencilla

box shadow

-moz-box-shadow: 10px 10px 10px #3f74a3;box-shadow: 10px 10px 10px #3f74a3;

Permite crear sombras a objetos

Fondos

CSS3 Styling

multiple background

Permite asignar multiples fondos a un elemento ..

Background: url("imagen"), url("imagen");

Y definir su posicin

Background-position: 20px 20px, top right;

background-size

Permite modificar el tamao de una imagen de fondo

background:url(img_flwr.gif);-moz-background-size:80px 60px;background-size:80px 60px;

gradient

Permite crear gradientes

background-image: -moz-linear-gradient( center bottom, rgb(6,153,99) 34%, rgb(36,167,171) 77%);

Color

CSS3 Styling

opacity

Permite modificar la opacidad de un elemento.

background-color: #f00; opacity: 1.00;

Valores de 0,0 a 1,0

RGBA color

Permite definir colores usando el formato rgb

background-color: rgb(0,200,0);

background-color: rgba(0,200,0,0.5);

RGB= Red Green Blue

HSL/A color

Permite usar hsl para definir color

background-color: hsl(0,50%,50%);

background-color: hsla(0,50%,50%,0.5);

HSL=Hue(Tonalidad) Saturation(Saturacin)Lughtness(Luminosidad)

Texto

CSS3 Styling

text-shadow

Sombras en texto

text-shadow: 2px 2px 2px #000;

multicolum

Crear columnas de una manera sencilla

-moz-column-count: 2;-moz-column-gap: 40px;

@font-face

Poder utilizar un tipo de fuente sin necesidad que el usuario la tenga instalada

@font-face {
font-family: DeliciousRoman;
src: url(/Delicious-Roman.otf);
}

h1 {
font-family: DeliciousRoman;
}

TRASFORM

CSS3 Styling

rotate

Rotar un objeto

-moz-transform: rotate(5deg);

scale

-moz-transform: scale(0.5,1.5);

skew

-moz-transform: skew(-30deg);

translate

-moz-transform: translate(30px, 0);

Transiciones

CSS3 Styling

transitions

Intervalos de tiempo entre cambio de propiedades

-moz-transition

-moz-transition-property Especifica el nombre de la propiedad CSS a la que la transicin ser apliacada-moz-transition-duration Duracin de la transicin-moz-transition-timing-function Especifica una curva bezier para definir los valores intermedios de la propiedad-moz-transition-delay Define el tiempo de espera entre el momento en que se cambia la propiedad y la transicin comienza en realidad

Animaciones

CSS3 Styling

@keyframes

animaciones completas mediante @keyframes (fotogramas clave)

@keyframe animacionCoche{ /*Indicamos que salimos de la posicin 0*/ from{ left:0px; } /*Indicamos que al final la posicin debe ser 350*/ to{ left:350px; }}

@media

Consiste en un tipo de expresiones que limiten el alcance de las hojas de estilo usando propiedades como ancho, color y altura

@media all and

Es decir aplicar un estilo condicional cuando se visualiza el contenido dependiendo de las dimensiones del navegador

@media

@media

Aplicacin

CSS3 Styling

FIN!

Semantics

Offline & Storage

Device Access

Connectivity

Multimedia

3D, Graphics & Effects

Performance & Integration

CSS3 Styling

Tecnologas HTML5

Estilo & CSS3

Csar Carruitero Avila
cesar(a)mozilla.pe /mozillaperu