Esta publicación destaca algunas líneas poderosas de CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a más que hacen un gran trabajo pesado y lo ayudan a crear diseños modernos y sólidos.
Los diseños de CSS modernos permiten a los desarrolladores escribir reglas de estilo realmente significativas y sólidas con solo unas pocas teclas. La charla anterior y esta publicación posterior examinan 10 poderosas líneas de CSS que hacen un gran trabajo pesado.
Para seguir o jugar con estas demostraciones por su cuenta, consulte la inserción de Glitch arriba o visite 1linelayouts.glitch.me.
01. Supercentrado: place-items: center
Para el primer diseño de ‘una sola línea’, resolvamos el mayor misterio en todo el terreno de CSS: centrar las cosas. Quiero que sepas que es más fácil de lo que piensas con place-items: center.
Primero especifique grid como el display método, y luego escribir place-items: center en el mismo elemento. place-items es una forma abreviada de definir tanto align-items y justify-items En seguida. Configurándolo en center, ambos align-items y justify-items están configurados para center.
.parent {
display: grid;
place-items: center;
}Esto permite que el contenidoEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, más esté perfectamente centrado dentro del padre, independientemente del tamaño intrínseco.
02. El panqueque deconstruido: flex: <grow> <shrink> <baseWidth>
¡A continuación tenemos el panqueque deconstruido! Este es un diseño común para los sitios de marketing, por ejemplo, que puede tener una fila de 3 elementos, generalmente con una imagen, un título y luego algo de texto, que describe algunas características de un producto. En dispositivos móviles, queremos que se apilen bien y se expandan a medida que aumentamos el tamaño de la pantalla.
Al usar Flexbox para este efecto, no necesitará consultas de medios para ajustar la ubicación de estos elementos cuando la pantalla cambie de tamaño.
los flex abreviatura significa: flex: <flex-grow> <flex-shrink> <flex-basis>.
Por eso, si desea que sus casillas se llenen a su <flex-basis> tamaño, encoger en tamaños más pequeños, pero no tramo para llenar cualquier espacio adicional, escriba: flex: 0 1 <flex-basis>. En este caso, su <flex-basis> es 150px entonces se ve así:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}Si tu hacer desea que los cuadros se estiren y llenen el espacio a medida que se ajustan a la siguiente línea, configure el <flex-grow> a 1, por lo que se vería así:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}Ahora, a medida que aumenta o disminuye el tamaño de la pantalla, estos elementos flexibles se encogen y crecen.
Esta demostración aprovecha las mínimo máximo función para diseños de cuadrícula. Lo que estamos haciendo aquí es establecer el tamaño mínimo de la barra lateral en 150px, pero en pantallas más grandes, permitiendo que eso se extienda a 25%. La barra lateral siempre ocupará 25% del espacio horizontal de su padre hasta que 25% se vuelve más pequeño que 150px.
Agregue esto como un valor de grid-template-columnas con el siguiente valor:
minmax(150px, 25%) 1fr. El elemento de la primera columna (la barra lateral en este caso) obtiene un minmax de 150px a 25%, y el segundo elemento (el main sección aquí) ocupa el resto del espacio como un solo 1fr pista.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}04. Pila de panqueques: grid-template-rows: auto 1fr auto
A diferencia de Deconstructed Pancake, este ejemplo no envuelve a sus hijos cuando cambia el tamaño de la pantalla. Comúnmente conocido como pie de página pegajoso, este diseño se usa a menudo tanto para sitios web como para aplicaciones, en aplicaciones móviles (el pie de página es comúnmente una barra de herramientas) y sitios web (las aplicaciones de una sola página a menudo usan este diseño global).
Añadiendo display: grid al componente le dará una cuadrícula de una sola columna, sin embargo, el área principal solo será tan alta como el contenido con el pie de página debajo.
Para que el pie de página se pegue al final, agregue:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}Esto configura el contenido del encabezado y pie de página para que tome automáticamente el tamaño de sus hijos y aplica el espacio restante (1fr) al área principal, mientras que el auto La fila de tamaño tomará el tamaño del contenido mínimo de sus hijos, de modo que a medida que el contenido aumente de tamaño, la fila en sí crecerá para ajustarse.
05. Disposición clásica del Santo Grial: grid-template: auto 1fr auto / auto 1fr auto
Para este diseño clásico del santo grial, hay un encabezado, pie de página, barra lateral izquierda, barra lateral derecha y contenido principal. Es similar al diseño anterior, ¡pero ahora con barrasLas trailing slashes son las barras que aparecen al final de una URL ( "https://es.ryte.com/" ) y representan un directorio. Si la URL no finaliza con una barra representa un archivo. No obstante, esto son solo guías, no un requerimiento. No obstante, usar una barra como representación de un directorio ha sido aceptado como estándar con el tiempo. Uso de las barras "https://es.ryte.com/" y SEO A pesar de que dichas más laterales!
Para escribir esta cuadrícula completa usando una sola línea de código, use el grid-template propiedad. Esto le permite establecer filas y columnas al mismo tiempo.
El par de propiedad y valor es: grid-template: auto 1fr auto / auto 1fr auto. La barra inclinada entre la primera y la segunda lista separadas por espacios es el salto entre filas y columnas.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}Como en el último ejemplo, donde el encabezado y el pie de página tenían contenido de tamaño automático, aquí la barra lateral izquierda y derecha se dimensionan automáticamente en función del tamaño intrínseco de sus hijos. Sin embargo, esta vez es de tamaño horizontal (ancho) en lugar de vertical (alto).
06. Cuadrícula de 12 tramos: grid-template-columns: repeat(12, 1fr)
A continuación tenemos otro clásico: la rejilla de 12 vanos. Puede escribir cuadrículas rápidamente en CSS con la repeat() función. Utilizando: repeat(12, 1fr); para las columnas de la plantilla de cuadrícula le da 12 columnas cada una 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}Ahora que tiene una cuadrícula de pistas de 12 columnas, podemos colocar a nuestros hijos en la cuadrícula. Una forma de hacer esto sería colocarlos usando líneas de cuadrícula. Por ejemplo, grid-column: 1 / 13 abarcaría desde la primera línea hasta la última (13) y abarcaría 12 columnas. grid-column: 1 / 5; abarcaría los primeros cuatro.
Otra forma de escribir esto es usando el span palabra clavePor definición, una palabra clave, (keyword en inglés), es una palabra informativa utilizada en un sistema de recuperación de información para indicar el contenido de un documento con la expectativa de un resultado de búsqueda coincidente. Herramientas de palabras clave La búsqueda de palabras clave para proyectos web individuales se ve enormemente facilitada por útiles herramientas. Al mismo tiempo, las herramientas de palabras clave ayudan mucho en la optimización del más. Con span, establece la línea de inicio y luego la cantidad de columnas que se van a abarcar desde ese punto de inicio. En este caso, grid-column: 1 / span 12 sería equivalente a grid-column: 1 / 13y grid-column: 2 / span 6 sería equivalente a grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}07. RAM (Repetir, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Para este séptimo ejemplo, combine algunos de los conceptos que ya ha aprendido para crear un diseño receptivo con elementos secundarios flexibles y colocados automáticamente. Con buena pinta. Los términos clave para recordar aquí son repeat, auto-(fit|fill)y minmax()', que recuerda por el acrónimo RAM.
Todo junto, parece:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}Está utilizando repetir de nuevo, pero esta vez, utilizando el auto-fit palabra clave en lugar de un valor numérico explícito. Esto permite la colocación automática de estos elementos secundarios. Estos niños también tienen un valor mínimo base de 150px con un valor máximo 1fr, es decir, en pantallas más pequeñas, ocuparán la totalidad 1fr ancho, y a medida que alcanzan 150px de ancho cada uno, comenzarán a fluir hacia la misma línea.
Con auto-fit, las cajas se estirarán a medida que su tamaño horizontal supere los 150px para llenar todo el espacio restante. Sin embargo, si cambia esto a auto-fill, no se estirarán cuando se exceda su tamaño base en la función minmax:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}08. Alineación: justify-content: space-between
Para el siguiente diseño, el punto principal para demostrar aquí es justify-content: space-between, que coloca el primer y último elemento secundario en los bordes de su cuadro delimitador, con el espacio restante distribuido uniformemente entre los elementos. Para estas tarjetas, se colocan en un modo de visualización Flexbox, con la dirección configurada en columna usando flex-direction: column.
Esto coloca el título, la descripción y el bloque de imagen en una columna vertical dentro de la tarjeta principal. Entonces, aplicando justify-content: space-between ancla el primer (título) y el último (bloque de imagen) elementos a los bordes de la caja flexible, y el texto descriptivo entre ellos se coloca con el mismo espaciado en cada punto final.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Sujetar mi estilo: clamp(<min>, <actual>, <max>)
Aquí es donde entramos en algunas técnicas con menos soporte de navegador, pero tienen algunas implicaciones realmente interesantes para los diseños y el diseño de interfaz de usuario Una interfaz de usuario es un medio por medio de del cual una persona puede controlar un software o hardware específico. Lo ideal es que las interfaces de usuario sean fáciles de utilizar para que la interacción sea lo más instintiva e intuitiva factible. En el caso de los programas informáticos, esto se denomina interfaz gráfica de usuario. Desarrollo y tipos de interfaces de usuario A diferencia de la más receptivo. En esta demostración, está configurando el ancho usando una abrazadera de la siguiente manera: width: clamp(<min>, <actual>, <max>).
Esto establece un tamaño mínimo y máximo absoluto y un tamaño real. Con valores, eso puede verse así:
.parent {
width: clamp(23ch, 50%, 46ch);
}El tamaño mínimo aquí es 23ch o 23 unidades de caracteres, y el tamaño máximo es 46ch, 46 caracteres. Unidades de ancho de caracteres se basan en el tamaño de fuente del elemento (específicamente el ancho de la 0 glifo). El tamaño ‘real’ es 50%, que representa el 50% del ancho principal de este elemento.
Que clamp() La función que está haciendo aquí es permitir que este elemento retenga un 50% de ancho hasta 50% es mayor que 46ch (en ventanas gráficas más amplias) o más pequeño que 23ch (en ventanas gráficas más pequeñas). Puede ver que a medida que estiro y encojo el tamaño principal, el ancho de esta tarjeta aumenta hasta su punto máximo de sujeción y disminuye hasta su mínimo de sujeción. Luego permanece centrado en el padre ya que hemos aplicado propiedades adicionales para centrarlo. Esto permite diseños más legibles, ya que el texto no será demasiado ancho (arriba 46ch) o demasiado aplastado y estrecho (menos de 23ch).
Esta también es una excelente manera de implementar tipografía receptiva. Por ejemplo, podrías escribir: font-size: clamp(1.5rem, 20vw, 3rem). En este caso, el tamaño de fuente de un título siempre se mantendría entre 1.5rem y 3rem pero crecería y se encogería en función de la 20vw valor real para ajustarse al ancho de la ventana gráfica.
Esta es una gran técnica para garantizar la legibilidad con un valor de tamaño mínimo y máximo, pero recuerde que no es compatible con todos los navegadoresConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet más modernos, así que asegúrese de tener alternativas y haga sus pruebas.
10. Respeto por el aspecto: aspect-ratio: <width> / <height>
Y finalmente, esta última herramienta de diseño es la más experimental del grupo. Recientemente se introdujo en Chrome Canary en Chromium 84, y hay un esfuerzo activo de Firefox para implementarlo, pero actualmente no se encuentra en ninguna edición de navegadorUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los más estable.
Sin embargo, quiero mencionar esto porque es un problema que se encuentra con mucha frecuencia. Y eso es simplemente mantener la relación de aspecto de una imagen.
Con el aspect-ratio propiedad, al cambiar el tamaño de la tarjeta, el bloque visual verde mantiene esta relación de aspecto de 16 x 9. Respetamos la relación de aspecto con aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}Para mantener una relación de aspecto de 16 x 9 sin esta propiedad, debe utilizar un padding-top cortar a tajos y darle un relleno de 56.25% para establecer una relación entre la parte superior y el ancho. Pronto tendremos una propiedad para que esto evite el hack y la necesidad de calcular el porcentaje. Puedes hacer un cuadrado con 1 / 1 proporción, una proporción de 2 a 1 con 2 / 1, y realmente cualquier cosa que necesite para escalar esta imagen con una proporción de tamaño establecida.
.square {
aspect-ratio: 1 / 1;
}Si bien esta función aún está en auge, es bueno conocerla, ya que resuelve muchos conflictos de desarrolladores que he enfrentado muchas veces, especialmente cuando se trata de videos e iframes.
Conclusión
Gracias por seguir este viaje a través de 10 poderosas líneas de CSS. Para obtener más información, mire el video completoy prueba las demostraciones usted mismo.
