Degradados , transiciones, efectos dinamicos

nos sirve para los degrados de la etiqueta
#principal{
width: 500px;
height: 40px;
//background-color: aqua;
text-align: center;
margin: 15px auto;
padding-top: 20px;
border: 3px solid #EC042F;
border-radius: 5px;
box-shadow: blue 10px 5px 10px ;
background:-webkit-linear-gradient(top, #00F, #3FF);
background:-moz-linear-gradient(top, #00F, #3FF);
background:-ms-linear-gradient(top, #00F, #3FF);
background:-o-linear-gradient(top, #00F, #3FF);
}

siempre distinguiendo en los diferences navegadores que se tenga

nos servira para manipular lo de un span
#titulo{
font: bold 36px normal;
text-shadow: yellow 3px 4px 2px
}


PARA HACER UNA ETIQUETA CIRCULAR DE COLORES
background: -webkit-radial-gradient(center, circle, #00F,#3FF)

para hacer un coloreador de tipo elipce

nos sirve para hacer opacidad con la etiqueta
color: rgba(0,12,15,0.5);

para dar bordes fuera de la etiqueta
outline: 2px dashed #01B994;
outline-offset: 15px;

para rotar un etiqueta
-webkit-transform:rotate(30deg)

cambiar la perspectiva de la etiqeuta

-webkit-transform:skew(30deg)

son seudoclases

permite dar un moviemiento al pasar el raton por ensima de la etiqueta seleccionada
#principal:hover{
-webkit-transform:skew(30deg);
}

permite tener una mejor vista al momento de posicionar el mouse en la etiqueta deacuerdo a los parametros que se le de
-webkit-transition:-webkit-transform 1s ease 0.5s;
-webkit-transition:-webkit-transform 0.3s ease-in-out 0.3s

para dar color al texto
color:white


escale es cuando pasas el mause por ensiam y la imagen se mueve hacia adelante
figure img:hover{
-webkit-transform:scale(1.2);
}