10 trucos de CSS que debes saber

  • por Josefina Balmaceda

Estos 10 trucos pueden solucionarte la vida cuando estés trabajando con CSS.

1. Selector

Usar * te permite seleccionar todos los elementos de un selector particular, por ejemplo si usas *p y  agregas estilo CSS, se refleja en todos los selectores <p> que utilizas en tu documento. Esto hace mas fácil apuntar a todo tu sitio web.

 

2. Reescribir estilos

Debes ser cuidadoso al ocupar este método porque si lo utilizas para todo puedes tener problemas en un futuro. Sin embargo, si quieres  sobrescribir CSS solo para un elemento específico debes usar !important despues del estilo en tu CSS. Por ejemplo si necesitas que los <h1> de una sección específica sean azules en vez de grises utiliza el siguiente CSS:

.section h1 { color:blue !important; }

 

3. Ellipsis

Para truncar un texto y que aparezcan los típicos 3 puntitos cuando este sea más largo que el ancho del div que lo contiene debes seguir la siguiente regla de CSS:

.truncate {
 width: 250px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

 

4. Multiple line ellipsis

Si necesitas truncar un texto en más de una linea debes utilizar esta fórmula de CSS:

.truncate {
 display: block;
 max-width: 400px;
 height: 200px; /* alto máximo del div( debe tener directa relación con la cantidad de líneas a mostrar) o puedes calcularlo de esta forma: $font-size*$line-height*$lines-to-show */
 margin: 0 auto;
 font-size: 12px;
 line-height: 1.4;
 -webkit-line-clamp: 3; /*Cantidad de líneas que desea mostrar*/
 -webkit-box-orient: vertical;
 overflow: hidden;
 text-overflow: ellipsis;
}

 

5.  :before

Este selector de CSS te permite elegir un elemento y agregarle contenido antes de un elemento con una clase de CSS específica. Por ejemplo quiero que en mi página web antes de cada <h2> se agregue un contenido específico:

h2:before {
   content: "Read: ";
   <span class="Apple-converted-space">    color: #F00;</span>
}

 

Esto es muy útil, especialmente si está utilizando una fuente de iconos. Puede colocar iconos antes de ciertos elementos, y aplicarlos en todo tu sitio.

6. :after

Al igual que en el selector :before, puedes utilizarlo para insertar contenido después de un elemento. Un uso práctico sería agregar un "leer más" después de cada fragmento en un blog:

p:after{
   content: " -Reed more… ";
   color:#f00;
}

:after

7. Hijos

Para seleccionar los hijos directos de un elemento puedes utilizar el siguiente CSS:

#footer > a

Esto seleccionará y dará estilo a todos los elemento <a> bajo el id Footer, no selecciona nada que no sea un adentro del id footer.

 

8. Cuadrados responsive

Cuando el diseño de tu sitio web responsive incluya cuadrados debes tener en cuenta que estos no se deformen al cambiar el tamaño del navegador. Para lograr este efecto debes combinar html y CSS, por ejemplo:

<div class="square">
</div>

 

.square {
 width: 100%;
}

.square:after {
 content: "";
 display: block;
 padding-bottom: 100%;
}

El cuadrado tomará el 100% del ancho de su padre, si quieres que el cuadrado sea más chico cambia width:100%; por el porcentaje que el cuadrado debe cubrir del padre.

Para agregar contenido dentro del cuadrado debes hacerlo así:

<div class="square">
 <div class="content">
   Hello!
 </div>
</div>
.square {
 position: relative;
 width: 100%;
}

.square:after {
 content: "";
 display: block;
 padding-bottom: 100%;
}

.content {
 position: absolute;
 width: 100%;
 height: 100%;
}

 

9. Centrar contenido dentro de un div  vertical y horizontalmente

Para centrar un contenido dentro de un div vertical y horizontalmente primero debemos preguntarnos 3 cosas

¿Sabes el alto y ancho del elemento?

En este caso debes usar márgenes negativos que igualen la mitad del ancho y la mitad del alto, dejar la posición como absoluta y ajustar la posición arriba y a la izquierda como 50% para que este se centre.

.parent {
 position: relative;
}

.child {
 width: 300px;
 height: 100px;
 padding: 20px;

 position: absolute;
 top: 50%;
 left: 50%;

 margin: -70px 0 0 -170px;
}

¿No sabes el alto y ancho del elemento?

Si no sabemos el alto y ancho del elemento podemos usar la propiedad de transformación y trasladar en negativo 50% en ambas direcciones para centrar el elemento:

.parent {
 position: relative;
}
.child {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

¿Puedes usar flexbox?

Para centrar con flexbox necesitas usar estas 2 propiedades:

.parent {
 display: flex;
 justify-content: center;
 align-items: center;
}

 

10. Rest CSS

Los diferentes navegadores tienen configuraciones CSS por defecto, por lo que es necesario restablecer las reglas CSS, para tener un campo de juego uniforme y coherente.

Este método para restablecer el CSS establece una base estándar para todos tus sitios web, dándoles consistencia en su punto de partida. Se eliminan paddings no deseados, los márgenes preestablecidos, rellenos, líneas de alturas, estilos de listas, etc. Eric Meyer creó uno funciona bastante bien lo puedes conseguir en el siguiente link.

 

Referentes:

Ellipsis: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Multiline Ellipsis: http://codepen.io/martinwolf/pen/qlFdp

Responsive square: https://spin.atomicobject.com/2015/07/14/css-responsive-square/

Centering in CSS: https://css-tricks.com/centering-css-complete-guide/

http://www.webdesignerdepot.com/2016/10/20-essential-css-tricks-every-designer-should-know/