Hola a todos, bienvenidos a este post sobre algunas cosas básicas sobre CSS que les puede llegar a ser util.
Antes que nada algunos Tips para CSS.
Las Class
La Class (clase) se la puede asignar en CSS por medio de un "punto" ".", el cual nos va a asignar una clase.
.TuClase {
}
Las Class tienen la ventaja de que se pueden repetir y usar en varias Div, se utiliza mucho para los textos el cual le damos una clase que va a contener la fuente, sombra, color, etc.
Se la puede llamar en el HTML varias veces dentro de varias div. Ejemplo:
/* El CSS */
.ClaseTexto {
color: red;
font-weight: bold;
}
<-- El HTML !-->
<div class="ClaseTexto"> Ejemplo texto 1 </div>
<div class="ClaseTexto"> Ejemplo texto 2 </div>
Las ID.
Las ID por el contrario, forman parte de una Div en especifico, la cual va a ser una sola y no se puede repetir. Esto le otorga una "identificación" a la Div. Siempre la ID va a ser mas importante que la class.
Las ID se llaman por medio de el "numeral" "#".
Y se aplican a el HTML de esta forma:
/* El CSS */
#Bloque {
display: block;
position: absolute;
width: 100px;
height: 100px;
border-radius: 6px;
}
<-- El HTML !-->
<div id="Bloque"></div>
CSS Externo
Llamar externamente al código css y no incluirlo en el html, es algo que te reducirá tiempo de carga de una web. La forma mas conveniente es utilizando:
<link rel=”stylesheet” href=”nombredeestilo.css” type=”text/css”>
CSS abreviado
Reducir las lineas, es reducir el tiempo de carga, por ejemplo:
.encabezado {
background-color: #FFFFFF;
background-image: url (imagen.gif);
background-repeat: no-repeat;
background-position: top left;
]
La forma abreviada sería así:
.encabezado { background: url (image.gif) no-repeat top left #FFF;}
En este ejemplo 4 lineas de codigo pasaron a ser solo una, con la propiedad background, ademas de haber reducido también el codigo de color de #FFFFFF a #FFF.
- Mantener tu código limpio y ordenado: Con espaciado legible para las próximas correcciones, asi se te hará mas fácil la escritura en el futuro, es también recomendable seguir un orden alfabetico o de importancia en cada estilo.
Sin mas comencemos...
Box Shadow
Lo que box shadow hace, es añadir una sombra a un elemento del tipo caja (display: box), su sintaxis es la siguiente:
box-shadow: opcional: inset | desplazamiento-x | desplazamiento-y | desenfoque | expansion | color de sombra
Le podemos definir un valor opcional llamado “inset” lo que hara es poner la sombra dentro de la caja en vez de afuera.
Ejemplo 1:
#hola {
box-shadow: 1px 1px 20px 5px #D6D6D6;
moz-box-shadow: 1px 1px 20px 5px #D6D6D6;
webkit-box-shadow: 1px 1px 20px 5px #D6D6D6;
}
Uno de la forma más sencilla para dar un poco de profundidad a un elemento a nivel de bloque es para aplicar una sombra poco a ella. Sin embargo, las sombras son peligrosas: pueden arruinar su diseño fácilmente.
La idea detrás de éste es dar una sombra muy pequeña y sutil a un elemento de bloque.
.Sombra.Arriba.top {
box-shadow: 0 -4px 2px -2px rgba(0,0,0,0.4);
}
.Sombra.Derecha.right {
box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4);
}
.Sombra.Abajo.bottom {
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);
}
.Sombra.Izquierda.left {
box-shadow: -4px 0 2px -2px rgba(0,0,0,0.4);
}
Mira cómo se utiliza un valor diferencial negativo con el fin de dar un poco de profundidad a la sombra. Se parece mucho más realista de esta manera en mi humilde opinión.
Nota: el color utilizado en la declaración box-shadow puede variar en función del color de fondo de tu elemento. El más claro es la caja, el más ligero de la sombra tiene que ser con el fin de preservar un contraste decente.
Los 4 ejemplos tienen por objeto destacar el contenido con un resplandor exterior, blanco o negro, borrosa o borrosa no, dependiendo de lo que quieras y más importante aún en el fondo de la caja (color claro, textura, imagen, etc.)
.emphasize-dark {
box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}
.enfatizar-light {
box-shadow: 0 0 0 10px rgba(255,255,255,.25);
}
.enfatizar-inset {
box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5);
}
.enfatizar-border {
box-shadow: inset 0 0 0 7px rgba(255,255,255,.5);
}
Por último, pero no menos importante cuando se trata de sombras, dos efectos de relieve. La primera es bastante sutil, ya que sólo se aplica a la reflexión de luz muy pequeña en la parte superior de un objeto, y la segunda es más compleja. Se ve especialmente bien en los elementos circulares, como los botones.
.relieve-light {
border: 1px solid rgba(0,0,0,0.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.relieve-heavy {
border: 1px solid rgba(0,0,0,0.1);
box-shadow:
inset 0 2px 3px rgba(255,255,255,0.3),
inset 0 -2px 3px rgba(0,0,0,0.3),
0 1px 1px rgba(255,255,255,0.9);
}
Nota: Se puede utilizar una coma para poner varias propiedades en un solo box shadow, como en el ejemplo anterior. Luego por supuesto el punto y coma.
Gradients | Degradado
A veces, es posible que desee aplicar un degradado suave a un elemento con el fin de darle un poco de alivio. La idea era darle un degradado que usted no tiene que cambiar si cambia el color de fondo / imagen.
.gradient-light-linear {
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
}
.gradient-dark-linear {
background-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,0));
}
.gradient-light-radial {
background-image: radial-gradient(center 0, circle farthest-corner, rgba(255,255,255,0.4), rgba(255,255,255,0));
}
.gradient-dark-radial {
background-image: radial-gradient(center 0, circle farthest-corner, rgba(0,0,0,0.15), rgba(0,0,0,0));
}
Básicamente, se basa en la aplicación de una capa transparente para más transparente en sus cosas, y como se hace en Photoshop, por ejemplo. Bastante simple.
Border Radius
Border-radius añade bordes redondeados en las esquinas, su sintaxis es:
border-radius: radio top | radio right | radio bottom | radio left
Dependiendo del diseño, los ángulos agudos puede ser hermoso o muy perjudicial. De todos modos, es posible que desee añadir border-radius a un montón de elementos. Incluso los más pequeños. Así que he creado algunas clases para eso.
.light-rounded {
border-radius: 3px;
}
.heavy-rounded {
border-radius: 8px;
}
.full-rounded {
border-radius: 50%;
}
.barrel-rounded {
border-radius: 20px/60px;
}
Nota: border-radius: 50% dibuja un círculo perfecto, siempre y cuando usted está tratando con un cuadrado. Si se trata de un rectángulo, entonces te va a convertir en una elipse.
Bueno, eso es todo, es algo simple y se puede obtener grandes efectos.
