Animaciones, triángulo lateral-fijo, esquina de página, sombras, menú
- El top, left, right, botton, es dónde se coloca ese margen
- al decirle 50% se pone a la mitad. Entonces si la figura mide 30px
- le damos un margin-top: -15px y entonces queda centrado
- Se quitan el width y el height y se ponen border de 15 px
- border-width:15px 15px 15px 0px; excepto el último para que se cargue el triangulo a donde no hay
- Pongo todos los bordes que tienen px transparentes para que no se pinten
- border-color: transparent blue transparent pink; exceptop el triángulo
- Lo pongo al mismo color del fondo para que se esconda y con el hover lo muestro
- Se colocan las medidas iniciales del DIV
- Se mueve el DIV hacía abajo -webkit-transform:translateY(15px);
- top:-13px; El triángulo se mueve arriba para que parezca que se queda
- Ambos eventos anteriores pasan en el hover
- -webkit-transition-duration:0.5s; se le pone tanto a DIV como a su before para que parezca que
sale el DIV
- esto se hace con degradados
- background:-webkit-linear-gradient(45deg, white 45%, gray 50%, lightgray 60%, white); Se le pone
al before
- height y width del before se ponen a cero. Y su -webkit-transition-duration:0.5s;
- En la pseudoclase hover del before se pone el height y width
- background:-webkit-linear-gradient(20deg, green,white 35%, white 68%,red);
- Se indica el inicio y fin del blanco
- box-shadow (desplazamiento horizontal, vertical, grueso y color)
- box-shadow:0px 0px 1px rgba(0,0,0,1); Estado inicial de la sombre
- box-shadow:0px 0px 10px rgba(0,0,0,0.6); en el hover
- Se colocan las medidas iniciales del DIV
- Con un transform y un duration hago que la caja se mueva arriba y la sombra abajo
- En el estado inicial con un opacity:0 escondo la sombre
- background:-webkit-radial-gradient(center, ellipse,
rgba(0,0,0,0.35) 0%,
rgba(0,0,0,0) 80%); Nos crea la sombre en el before
- opacity:1; nos aparece la sombe
- Se utiliza el before y el afeter con sombre ellipse
- La sombra empíeza transparente y termina opaca
- A continuación le digo de donde a donde desplazo la elipse
- background: radial-gradient(ellipse at 50% -50%,
rgba(0,0,0,0.9) 0%,
rgba(0,0,0,0) 80%);
- box-shadow:2px 3px 5px black;
- Se desplaza dos pixeles a la derecha y tres abajo
- con un grueso de 5px
- Si la quiero hacía arriba o izquierda es con negativos
- background:none; Con esto el color pasa al del padre, que en este caso es blanco
- lo mejor sería indicar el color blanco por si el body cambia
- Con el Inset se manda el borde hacía adentro
- box-shadow:inset 0px 0px 0px 5px darkblue;
- Se genera un before con un borde
- Con coordenadas de top, left, rigth, botton, se hace el marco
- Se cambia de color al borde o se puede desaparecer con un opacity
- Lo mismo que el interno pero con coordenadas negativas
- y comenzando el borde con zero de desplazamiento
- como el anterior pero el borde comienza con un opacity:0 para que no se vea
- además de que las coordenadas están fuera del marco. Y luego en el hoover se
- reducen las coordenadas y se manda el opacity:1
- border-radius:20px; en el hover
