EFECTOS CON CSS

PSEUDOELMENTOS:
Todos los elementos en html se pueden representar como cajas rectangulares
que tienen un ancho y un alto, adems de esto, todos los elementos esta
acompaados de dos elementos mas que no son visibles a menos que se
configuren de manera contraria, estos dos elementos son:
:Before
:After

Supongamos que se declara un elemento Div en una pgina web con su Css
particular:

Hasta este punto, los pseudoelementos no han sido activados y por tal razn
no se muestran.
Para activarlos basta con hacer referencia al elemento al que pertenecen
seguido de dos puntos y el nombre del pseudoelemento:
Div:before{}
Algo que es obligatorio para todos los pseudoelementos es la instruccin
content:

Ejemplo:
div
{
border:2px solid black;
width:50%;
position:relative;
margin-left:25%;
}

Div:before
{
Content:hola;
}
Div:after
{
Content:mundo;
}

A partir de este punto los pseudoelementos que ya estn declarados tendrn

los mismos atributos que cualquier elemento.
PSEUDOCLASES:
Las Pseudoclases son cdigos que pueden hacer referencia al estado en el que
se encuentra un elemento o al uso que se est haciendo de el en un momento
dado.
Continuando con el ejemplo anterior ahora declararemos una nueva caja (div)
que tenga un enlace en su interior:

Supongamos que queremos cambiar los estilos de un elemento cunado el ratn

pase por encima, para esto se usa la pseudoclase :hoover.
Div:hoover
{
Todo el estilo que se aplica cuando el ratn esta encima del enlace.

}
El enlace que declaramos en la caja anterior tiene pseudoclases propias (no de
todos los elementos) tales como focus, que es para cuando el enlace fue
visitado y recibe el foco, y la pseudoclase active, que es para cuando se hace
click sobre el enlace (solo durante el tiempo que dura el click presionado).
EFECTOS:
La mayora de efectos generados en CSS radican en ocultar un objeto detrs o
dentro de otro y jugar a camuflarlos con color, con trasparencia o con posicin.
1) Triangulo lateral

Para generar el efecto del triangulo lateral que sale de la caja cuando el mouse
pasa sobre ella lo primero que se debe hacer es generar la caja:

Fijmonos que la divisin donde se encuentra la caja con traingulo lateral hace
parte de la clase triangulo, esta ser una clase que declararemos.
Las clases que declara el programador (clases propias) se declaran con un
ppunto(.) seguido del nombre de la clase:

La clase triangulo contiene una lnea que empieza con el prefijo de

explorador Google Chrome, este prefijo se utiliza para utilizar algunos de los
mtodos o funciones propias de los exploradores,otros prefijos son:

Para crear el triangulo pequeo que aparece y desaparece vamos a utilizar el

pseudoelemento before:

Esquina plegada:
Este efecto es creado con transformacin por tamao:

En este efecto tambin se incluye el efecto de degradado gradiente.