Estilos Css

Introducción al desarrollo web
http://idesweb.es/

CSS
HISTORIA

CURSO

< iDESWEB >
IDW-CSS-V3-01

IDW-HI-1

Introducción al desarrollo web

CSS
HISTORIA

http://idesweb.es/

Hoyveremos:

<

CSS3 Básicos

>

Introducción al desarrollo web

CSS
HISTORIA

http://idesweb.es/

Javier Sánchez Riquelme
Estudiante de Ingeniería Multimedia
Universidad de AlicanteIDW-HI-1

Introducción al desarrollo web
http://idesweb.es/

CSS
HISTORIA

Contacto
• http://www.xavdesign.tk
• @xavis

IDW-HI-1

Introducción al desarrollo web
http://idesweb.es/Propiedades
CSS
HISTORIA

•
•
•
•
•
IDW-HI-1

Border-radius
Border-image
Gradientes
Box-shadow
Transiciones

Introducción al desarrollo web
http://idesweb.es/

CSS
HISTORIABorder-radius
• Redondea los bordes de un elemento
• Tiene gran utilidad con div, table y más
• Podemos dar un nivel de redondeo a
cada esquina
IDW-HI-1

Introducción al desarrollo webhttp://idesweb.es/

CSS
HISTORIA

Border-radius
•
•
•

IDW-HI-1

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;

Introducción al desarrollo web
http://idesweb.es/

CSS
HISTORIA

Ejemplo

IDW-HI-1

Introducción al desarrollo webhttp://idesweb.es/

Propiedades
CSS
HISTORIA

•
•
•
•
•
IDW-HI-1

Border-radius
Border-image
Gradientes
Box-shadow
Transiciones

Introducción al desarrollo web
http://idesweb.es/

CSSHISTORIA

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…)
IDW-HI-1Introducción al desarrollo web
http://idesweb.es/

CSS
HISTORIA

Border-image
•

border-image: url(“imagen") distancias corte1
(corte2);

•

-webkit- border-image: url(“imagen")...