H

I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1
iDESWEB
CURSO
< >
C
S
S

IDW-CSS-V3-01
H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
< CSS3 Bsicos >
Hoy veremos:
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Javier Snchez Riquelme

Estudiante de Ingeniera Multimedia
Universidad de Alicante
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
Contacto
http://www.xavdesign.tk
@xavis
IDW-HI-1 IDW-HI-1
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
Propiedades
IDW-HI-1 IDW-HI-1
C
S
S

Border-radius
Border-image
Gradientes
Box-shadow
Transiciones
H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Border-radius
Redondea los bordes de un elemento
Tiene gran utilidad con div, table y ms
Podemos dar un nivel de redondeo a
cada esquina
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Border-radius
border-radius: 30px;
border-radius: 30px 30px 30px 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Ejemplo
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
Propiedades
IDW-HI-1 IDW-HI-1
C
S
S

Border-radius
Border-image
Gradientes
Box-shadow
Transiciones
H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Border-image
Sirve para poner una imagen como borde
Podemos evitar que la imagen se deforme
Podemos personalizar cada uno de los
bordes (superior, inferior, izquierdo)
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Border-image
border-image: url(imagen") distancias corte1
(corte2);
-webkit- border-image: url(imagen") distancias
corte1 (corte2);
-moz-border-image: url(imagen") distancias corte1
(corte2);
border-top-image border-left-image
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Border-image distancias
1 elemento border-image: url(X) 15px stretch repeat
Misma distancia para todos los bordes
2 elementos border-image: url(X) 15px 25px stretch
repeat
Misma distancia para top/bottom y left/right
4 elementos border-image: url(X) 15px 25px 12px 25px
stretch repeat
Distancia distinta para cada borde top/right/bottom/left
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Border-image distancias
C
S
S

25% TOP
12% BOTTOM
20% LEFT 30% RIGHT
H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Border-image cortes
Stretch: alarga la imagen del borde para ajustarse
Repeat: repite la imagen hasta cubrir el tamao del
borde, pudiendo quedar cortada parte de la imagen en los
extremos
Round: repite la imagen ajustando el tamao para no
cortarla en los extremos. No en Chrome/Safari
Space: repite la imagen dejando espacios entre las
imgenes para no cortarla en los extremos. No en Chrome/Safari
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Border-image
C
S
S

border-image: url(border.png) 29px 28px 28px 29px CORTE
H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Border-image
C
S
S

Stretch Repeat
Round Round Space
SEGN CORTE
H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Ejemplo
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
Propiedades
IDW-HI-1 IDW-HI-1
C
S
S

Border-radius
Border-image
Gradientes
Box-shadow
Transiciones
H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Gradientes
C
S
S

Crea gradientes entre dos colores
Pueden ser lineales o radiales
Nos libran de poner imgenes que
ocupan gran tamao
H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Gradientes Lineales
C
S
S
-moz-linear-gradient(top, #333, #ccc);

-webkit-gradient(linear, left top,left bottom, from(#333),to(#ccc));

linear-gradient(top, #333, #ccc);
H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Gradientes Radiales
C
S
S
radial-gradient(center 45deg,circle cover, #ccc, #333);

-webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#ccc), to(#333));

-moz-radial-gradient(center 45deg,circle cover, #ccc, #333);
H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Ejemplo
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
Propiedades
IDW-HI-1 IDW-HI-1
C
S
S

Border-radius
Border-image
Gradientes
Box-shadow
Transiciones
H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Box-shadow
Crea una sombra a un elemento div,
table, etc.
Crea efecto de profundidad
Podemos usarlas para resaltar contenido
o como tcnica de diseo.
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Box-shadow
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Ejemplo
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
Propiedades
IDW-HI-1 IDW-HI-1
C
S
S

Border-radius
Border-image
Gradientes
Box-shadow
Transiciones
H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Transiciones
Crea animaciones fcilmente
Animamos propiedades CSS
Pueden animarse varias propiedades a la
vez
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Transiciones
-webkit-transition:color 1s ease-in;
-moz-transition:color 1s ease-in;
transition:color 1s ease-in
transition-property: color
transition-duration: 1s
transition-timing-function: ease-in
transition-delay: 0s
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Transiciones timing-function
Definen el avance de la transicin durante
su duracin.
Podemos hacer por ejemplo que al
principio vaya ms rpida, a mitad lenta y al
final rpida de nuevo
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Transiciones timing-function
linear: Siempre la misma velocidad
ease: Lento Rpido Lento
ease-in: Comienzo Lento
ease-out: Final Lento
ease-in-out: Comienzo lento y final lento
cubic-bezier(n,n,n,n) definirlo a mano
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
IDW-HI-1 IDW-HI-1
Ejemplo
C
S
S

H
I
S
T
O
R
I
A

Introduccin al desarrollo web
http://idesweb.es/
ALGUNOS ENLACES DE INTERS

Enlaces varios
https://developer.mozilla.org/en-US/docs/CSS
http://www.css3.com/
http://css3please.com/
HASTA OTRA!
C
S
S

W3Schools
http://www.w3schools.com/css3/default.asp