Estilo & CSS3

Estilo & CSS3 César Carruitero Avila

Objetivo ,[object Object],Qué de bueno tiene usar CSS3? -Código más simple -Ahorro tiempo y trabajo Inconvenientes? no está implementado al 100% en todos los navegadores

Pseudo-elementos ,[object Object]

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

border-color ,[object Object],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; ,[object Object]

box shadow -moz-box-shadow: 10px 10px 10px #3f74a3; box-shadow: 10px 10px 10px #3f74a3; ,[object Object]

multiple background ,[object Object],Background: url("imagen"), url("imagen"); ,[object Object],Background-position: 20px 20px, top right;

background-size ,[object Object],background:url(img_flwr.gif); -moz-background-size:80px 60px; background-size:80px 60px;

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

opacity ,[object Object],background-color: #f00; opacity: 1.00; ,[object Object]

RGBA color ,[object Object],background-color: rgb(0,200,0); background-color: rgba(0,200,0,0.5); ,[object Object]

HSL/A color ,[object Object],background-color: hsl(0,50%,50%); background-color: hsla(0,50%,50%,0.5); ,[object Object]

text-shadow ,[object Object],text-shadow: 2px 2px 2px #000;

multicolum ,[object Object],-moz-column-count: 2;-moz-column-gap: 40px;

@font-face ,[object Object],@font-face { font-family: DeliciousRoman; src: url(/Delicious-Roman.otf); } h1 { font-family: DeliciousRoman; }

rotate ,[object Object],-moz-transform: rotate(5deg);

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

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

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

transitions ,[object Object],-moz-transition -moz-transition-property Especifica el nombre de la propiedad CSS a la que la transición será apliacada -moz-transition-duration Duración de la transición -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 transición comienza en realidad

@keyframes ,[object Object],@keyframe animacionCoche{ /*Indicamos que salimos de la posición 0*/ from{ left:0px; } /*Indicamos que al final la posición debe ser 350*/ to{ left:350px; } }

@media ,[object Object],@media all and Es decir aplicar un estilo condicional cuando se visualiza el contenido dependiendo de las dimensiones del navegador

Estilo & CSS3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to Estilo & CSS3

Similar to Estilo & CSS3 (20)

Estilo & CSS3