estilo & css3
TRANSCRIPT
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