Negocioscontralaobsolescencia.
com
Guía Rápida CSS3
Selector de atributo
palabraclave[atributo=valor]
Pseudo clase
:nth-child() si nos fijamos la estructura arbórea que hayamos creado en nuestro documento
HTML , esta pseudo clase en capaz de encontrar un hijo.
p:nth-child(3) referenciamos el elemento p que tiene varios hermanos y nos referimos al 3.
:first-child= :nth-child(1) aquí en las dos haríamos referencia al primer hijo.
:last-child hace referencia al último hijo.
:only-child único hijo de un mismo elemento padre.
:not() La usaríamos para referenciar todos los elementos menos el marcado.
Selectores
Selector > referencia el elemento de la derecha cuando el elemento de la izquierda es su
padre.
Div>h2
Selector + hace referencia a elementos hermanos, referencia al de la derecha cuando es
inmediatamente precedido por el de la izquierda.
h1+p
Selector ~ Este selector es similar al anterior pero sin ser necesario que esté ubicado
inmediatamente después del elemento que pongamos a la izquierda.
Efectos visuales y dinámicos.
Border-radius Sirve para crear esquinas redondeadas el primer parámetro haría referencia a
la horizontal y el segundo a la vertical.
Border-radius: 10px / 20px ;
Border-radius: 30px ; (el valor al ser uno solo, sería el mismo para las cuatro esquinas).
Box –shadow: Crea sombras para la caja que envuelve el elemento.
Negocioscontralaobsolescencia.com
Box-shadow: #ffffff 5px 5px 8px inset;
El primer atributo haría referencia al color, los dos siguientes al desplazamiento de la sombra
en vertical y en horizontal (los valores pueden ser positivos o negativos depende y el cuarto la
opacidad de la sombra mientras que el quinto sería una palabra clave que en este caso hace
una sombra interna para provocar un efecto de profundidad.
@font-face Con esta regla podremos usar la fuente que queramos solo necesitaremos el
archivo .ttf, darle un nombre con la propiedad font-family y especificar la dirección del archivo
con src.
@font-face {
font-family: 'SEGA';
src: url('MR ROBOT.ttf');
Linear-gradient(inicio, color inicio, color final)
Se puede aplicar a: background o background-image
La posición de inicio recordar que se puede dar con palabras clave: center, top, bottom, left y
right o también declarando en pixeles o en porcentaje.
background: -webkit-linear-gradient(top, #ffc0cb 30%, #ff0000 85%);
background: -moz-linear-gradient(top, #ffc0cb 30%, #ff0000 85%);
radial-gradient(inicio, color inicio, color final)
Se puede aplicar a: background o background-image
Existirían dos valores para la forma que queramos darle al gradiente: circle y ellipse.
La posición de inicio recordar que se puede dar con palabras clave: center, top, bottom, left y
right o también declarando en pixeles o en porcentaje.
background: -webkit-radial-gradient(top, ellipse, #ffc0cb 30%, #ff0000 85%);
Negocioscontralaobsolescencia.com
background: -moz-radial-gradient(top, ellipse, #ffc0cb 30%, #ff0000 85%);
rgba() esta función sería rgb pero ampliada mediante un cuarto valor que hace referencia a la
opacidad del color.
rgba(rojo con un rango de 0-255, verde de 0-255, azul de 0-255, opacidad con un rango de 0-
1)
hsla()esta función sería hsl pero ampliada mediante un cuarto valor que hace referencia a la
opacidad del color.
hsla(tono de 0-360, saturación en porcentaje, luminosidad en porcentaje, opacidad de 0-1)
outline ha sido ampliada con la propiedad outline-offset las cuales combinándolas podríamos
crear un doble borde el segundo alejado del original.
outline: 2px solid #ffffff;
outline-offset: 15px;
border-image: Con esta propiedad podemos generar bordes con imágenes personalizadas
solo necesitaremos un imagen la que pondremos su dirección con url un tamaño para las
piezas y una palabra clave para indicar como debe tratarla: stretch, round y repeat.
border-image: url(“archivo imagen.png”) 20 stretch;
Transform Podemos transformar un elemento como su nombre indica.
Sus atributos serían:
scale (escalar) solo tendría un parámetro con un valor negativo invierte el elemento, los
valores inferiores a uno lo hacen más pequeño, con un 1 mantendría la proporción y superior a
uno lo haría más grande.
Transform: scale(1.8);
rotate (rotar) también tendría un parámetro este expresado en grados.
transform: rotate(75deg);
Negocioscontralaobsolescencia.com
skew (inclinar) Recibiría dos parámetros uno para la transformación horizontal y vertical
también en grados.
Transform: skew(30deg, 80deg);
translate (trasladar) mueve el objeto tantos pixeles como especifiquemos podemos indicarlo
con el eje horizontal y el vertical, X e Y. si aplicamos valores negativos en el X izquierda y en el
Y arriba.
transform: translateX(-80px) translateY(40px);
Transition Esta propiedad la usaremos para crear una transición de un objeto que tiene un
punto inicial a otro final generando los pasos intermedios, se podrán usar hasta 4 parámetros
Que serán la propiedad a la que se hace referencia, el tiempo que tardará desde la posición
inicial a la final, una palabra clave entre: ease, linear, ease-in, ease-out, ease-in-out y un valor
que retardará el inicio desde que el cursor se posa encima del objeto.
transition: color 3s linear 0.5s;
