.nuestra-clase::first-letter{
/*
Aqui nuestros estilos
que aplicaremos a nuestra primera letra
*/
}
.nuestra-clase::first-letter{
font-size: 30px;
float: left;
line-height: 1;
margin: 0.2rem;
margin-right: 0.6rem;
padding: 1rem;
background: #ffa900;
box-shadow: 0 0 0 .2rem #301896;
border: .2rem solid #fff;
border-radius: 5px;
}
La ventaja de ::first-letter es que se puede aplicar a cualquier texto, estático o dinámico, y que no empeora la accesibilidad del sitio. Además, si queremos ajustar el posicionamiento de cada inicial respecto al texto es más difícil hacerlo de forma distinta para cada letra, ya que tenemos un único estilo para todas las iniciales. Esto puede ser incómodo en ciertos casos ya que cada navegador ajusta el elemento flotante de forma distinta y algunas letras pueden quedar demasiado o muy poco separadas del texto, así como desplazar más líneas de texto en unos navegadores que en otros.
Póngamonos ahora en el caso en que un texto en un encabezado o en alguna parte en que tenemos un width determinado y queremos que solo ocupe una línea; la cosa puede parecer fácil porque puedes decir: bueno, pongo el texto que quiero y luego lo acorto con puntos supensivos; perfecto, pero ¿que pasa si el texto es dinámico? pues no te vas a poner a editar el texto, o peor aún, textos cada vez que cambien.
Para esto CSS nos da la solución convinando tres propiedades: white-space, overflow y text-overflow
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu lacinia dui. Suspendisse volutpat leo at ipsum porta malesuada. Mauris efficitur pellentesque dui, eu suscipit urna laoreet non. Nullam non est urna. Donec placerat pretium nunc, eu convallis elit pharetra sed. In hac habitasse platea dictumst. Etiam egestas dui metus, nec auctor eros rhoncus vel.
Y como resultado obtenemos:
El código para llegar a esto:
.nuestra-clase{
white-space: nowrap;/* Para que ocupe una sola línea */
overflow: hidden;/* Oculta todo el texto que sobrepase el ancho del contenedor */
text-overflow: ellipsis; /* Añade los tres puntos supensivos al final */
}
@media (max-width: 768px) {
nuestra-clase{
width: 300px; /* Definir un ancho si en un dispositivo lo necesita */
}
}
✳️ - Nótese que hemos añadido el media query y que damos un tamaño determinado al contenedor, el contenido o texto ya puede variar en tamaño o fuente, pero nunca sobrepasará el ancho del contenedor además de añadir tres puntos suspensivos al final.
Ahora nos ponemos en el caso de que lo que tenemos es un contenedor, sea un div, una sección, un párrafo o lo que sea, con un ancho y un alto determinado que contendrá un texto, pero ahora lo que nos interesa es que sea un texto de varias líneas, por jemplo el que tenemos justamente abajo a la izquierda cuyo contenedor tiene unas medidas determinadas y que por las medidas del alto y ancho solo tienen cabida siete líneas, ( en este ejemplo estamos detallando que la vista es un monitor o pantalla de PC o Mac ); pero dinamicamente el texto ha cambiado y lo que antes eran 7 líneas el texto pasa a ser mas grande y pasa a tener 12, el de abajo a la derecha, lo cual provocará un desbordamiento y por motivos estéticos nos rompe el diseño.
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
"Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. Fuga, soluta laudantium. Lorem ipsum dolor sit ametconsectetur adipisicing elit. Dicta assumenda architecto, temporibus ipsam?"
Pues esto se puede controlar añadiendo simplemente cuatro líneas de código CSS, y el resultado aplicado al ejemplo anterior será:
"Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. Fuga, soluta laudantium. Lorem ipsum dolor sit ametconsectetur adipisicing elit. Dicta assumenda architecto, temporibus ipsam?"
En el que tenemos igualmente el texto con 7 líneas, el contenedor mantiene las medidas exactas y añade los tres puntos suspensivos al final de la séptima línea indicando que no se está mostrando todo el texto. Para comprobarlo puedes inspeccionar el texto y varás como en el inspector de código del navegador si que aparece todo el texto.
El código es:
.nuestra-clase{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7; /* Número de líneas a mostrar */
}
Veamos ahora como hacer que un texto se muestre en columnas, sin recurrir a incluir divs o columnas adicionales.
Tenemos el el texto original que manipularemos con CSS inmediatemente debajo y lo vamos a transformar para que se nos muestre en tres columnas en pantallas grandes y en tres columnas en dispositivos móviles. Además separaremos las columnas y se añadirá una línea a tipo de borde que haga de separación y que sigue las reglass CSS de los bordes generales, de px, color y forma( solid, dashed, dotted )
¿Qué es Lorem Ipsum?
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
¿De dónde viene?
Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por Cicero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32
¿Por qué lo usamos?
Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).
¿Dónde puedo conseguirlo?
Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayoría sufrió alteraciones en alguna manera, ya sea porque se le agregó humor, o palabras aleatorias que no parecen ni un poco creíbles. Si vas a utilizar un pasaje de Lorem Ipsum, necesitás estar seguro de que no hay nada avergonzante escondido en el medio del texto. Todos los generadores de Lorem Ipsum que se encuentran en Internet tienden a repetir trozos predefinidos cuando sea necesario, haciendo a este el único generador verdadero (válido) en la Internet. Usa un diccionario de mas de 200 palabras provenientes del latín, combinadas con estructuras muy útiles de sentencias, para generar texto de Lorem Ipsum que parezca razonable. Este Lorem Ipsum generado siempre estará libre de repeticiones, humor agregado o palabras no características del lenguaje, etc.
El resultado es el siguiente.
(Notar que el texto que termina en la parte baja de una columna y sigue su sentido de lectura en la parte superior de la columna adyacente a la derecha.)
¿Qué es Lorem Ipsum?
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
¿De dónde viene?
Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por Cicero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32
¿Por qué lo usamos?
Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).
¿Dónde puedo conseguirlo?
Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayoría sufrió alteraciones en alguna manera, ya sea porque se le agregó humor, o palabras aleatorias que no parecen ni un poco creíbles. Si vas a utilizar un pasaje de Lorem Ipsum, necesitás estar seguro de que no hay nada avergonzante escondido en el medio del texto. Todos los generadores de Lorem Ipsum que se encuentran en Internet tienden a repetir trozos predefinidos cuando sea necesario, haciendo a este el único generador verdadero (válido) en la Internet. Usa un diccionario de mas de 200 palabras provenientes del latín, combinadas con estructuras muy útiles de sentencias, para generar texto de Lorem Ipsum que parezca razonable. Este Lorem Ipsum generado siempre estará libre de repeticiones, humor agregado o palabras no características del lenguaje, etc.
Y el código:
.nuestra-clase{
column-count: 5; /* Nº de columnas */
column-gap: 50px; /* Separación entre columnas */
column-rule: 2px dashed #e8a229; /* Bordes */
}
@media (max-width: 768px) {
nuestra-clase{
/* En responsive cambiamos la cantidad de columnas
y la distancia entre ellas */
column-count: 3;
column-gap: 30px;
}
}
El diseño fluido se refiere a un enfoque de diseño web en el que las dimensiones de los elementos son flexibles, escalando proporcionalmente al tamaño de la pantalla del usuario.
En lugar de medidas fijas de píxeles, utiliza unidades relativas como porcentajes o ems para garantizar que el diseño se ajuste sin problemas, independientemente del dispositivo.
Mostramos como añadir más iconos sin la necesidad de añadir más sets de SVGs, usando la fuente denominada "vanilla" y con la particularidad de que vamos a poder usarlos de manera global en todo nuestro sitio o solo en aquellas páginas o entradas en las que sea necesario.
La diferencia entre usarlos de manera global en todo el sitio o solo en aquellas páginas está en que en la primera manera cargaremos los kb de la fuente, en este caso 79Kb de manera innecesaria en aquellas páginas o entradas donde no requiramos el uso de estos iconos.
Un pequeño tip para lograr un efecto de subrayado animado con css y Oxygen
