Post Top Ad

Your Ad Spot

miércoles, 22 de abril de 2020

20 TRUCOS ESENCIALES DE CSS QUE TODO DISEÑADOR DEBE SABER

Este es para los principiantes absolutos. Una vez que haya aprendido cómo funciona el modelo de caja y cómo flotar esas cajas, es hora de tomarse en serio su CSS. Con ese fin, hemos compilado una lista masiva de consejos, trucos, técnicas y el truco sucio ocasional para ayudarlo a construir el diseño que desea.
CSS puede ser complicado, y tú también deberías hacerlo. Y ahora, sin ningún orden en particular, (casi) todo lo que necesitará saber:

1. Posicionamiento absoluto

Si desea controlar dónde vive un elemento en nuestro sitio web en todo momento, el posicionamiento absoluto es la clave para que esto suceda. Si piensa en su navegador como un gran cuadro delimitador, el posicionamiento absoluto le permite controlar exactamente dónde permanecerá un elemento en ese cuadro. Use arriba, derecha, abajo e izquierda, acompañado de un valor de píxel para controlar dónde permanece un elemento.
position:absolute;
top:20px;
right:20px
El CSS anterior establece la posición de un elemento para permanecer 20 píxeles desde los bordes superior y derecho de su navegador. También puede usar el posicionamiento absoluto dentro de un div.


2. * + selector

El * le permite seleccionar todos los elementos de un selector en particular. Por ejemplo, si usó * p y luego agregó estilos CSS a eso, lo haría a todos los elementos en su documento con una etiqueta <p> . Esto facilita la orientación a partes de su sitio web a nivel mundial.

3. Anular todos los estilos.

Esto debe usarse con moderación, porque si hace esto para todo, se encontrará en problemas a largo plazo. Sin embargo, si desea anular otro estilo CSS para un elemento específico, use ! Important después del estilo en su CSS. Por ejemplo, si quisiera que los encabezados H2 en una sección específica de mi sitio fueran rojos en lugar de azules, usaría el siguiente CSS:
.section h2 { color:red !important; }

4. Centrado

Centrar es complicado, porque depende de lo que intente centrar. Echemos un vistazo al CSS de los elementos que se centrarán, según el contenido.

TEXTO

El texto se centra usando text-align: center; Si desea que esté a ambos lados, use izquierda o derecha en lugar de centro.

CONTENIDO

Un div (o cualquier otro elemento) puede centrarse agregando la propiedad de bloque y luego utilizando márgenes automáticos. El CSS se vería así:
#div1 {
    display: block;
    margin: auto;
    width: anything under 100% 
}
La razón por la que puse "algo por debajo del 100%" para el ancho es porque si fuera 100% de ancho, entonces sería de ancho completo y no necesitaría centrarse. Es mejor tener un ancho fijo, como 60% o 550 px, etc.

5. Alineación vertical (para una línea de texto)

Utilizará esto en un menú de navegación CSS, casi puedo garantizarlo. La clave es hacer que la altura del menú y la altura de la línea del texto sean iguales. Veo mucho esta técnica cuando vuelvo y edito sitios web existentes para clientes. Aquí hay un ejemplo:
.nav li{
    line-height:50px;
    height:50px;
}

6. Efectos de desplazamiento

Esto se usa para botones, enlaces de texto, secciones de bock de su sitio, íconos y más. Si desea que algo cambie de color cuando alguien pasa el mouse sobre él, use el mismo CSS, pero agregue : pase el mouse sobre él y cambie el estilo. Aquí hay un ejemplo:
.entry h2{
    font-size:36px;
    color:#000;
    font-weight:800;
}

.entry h2:hover{
    color:#f00;
}
Lo que esto hace es que cambia el color de su etiqueta h2 de negro a rojo cuando alguien pasa el mouse sobre ella. Lo mejor de usar: hover es que no tienes que declarar el tamaño de fuente o el peso nuevamente, si no está cambiando. Solo cambia lo que especifique.

TRANSICIÓN

Para efectos de desplazamiento, como con menús o en imágenes en su sitio web, no desea que los colores se ajusten demasiado rápido al resultado final. Lo ideal es que desee facilitar el cambio gradualmente, que es donde entra en juego la propiedad de transición.
.entry h2:hover{
    color:#f00;
    transition: all 0.3s ease;
}
Esto hace que el cambio suceda durante 0,3 segundos, en lugar de pasar instantáneamente a rojo. Esto hace que el efecto de desplazamiento sea más agradable a la vista y menos irritante.

7. Estados de enlace

Muchos diseñadores pasan por alto estos estilos, y realmente causa problemas de usabilidad con sus visitantes. La pseudoclase: link controla todos los enlaces en los que aún no se ha hecho clic. La pseudo clase : visitado maneja el estilo de todos los enlaces que ya ha visitado. Esto le dice a los visitantes del sitio web dónde ya han estado en su sitio y dónde aún tienen que explorar.
a:link { color: blue; }
a:visited { color: purple; }

8. Cambiar fácilmente el tamaño de las imágenes para que se ajusten

A veces te encuentras en un aprieto donde las imágenes deben ajustarse a un cierto ancho, mientras se escala proporcionalmente. Una manera fácil de hacer esto es usar el ancho máximo para manejar esto. Aquí hay un ejemplo:
img {
    max-width:100%;
    height:auto;
}
Esto significa que el tamaño máximo de la imagen es del 100%, y la altura se calcula automáticamente, en función del ancho de la imagen. En algunos casos, es posible que también deba especificar el ancho al 100%.

9. Controlar los elementos de una sección.

Usando el ejemplo de imagen anterior, si solo desea orientar las imágenes de una sección determinada, como su blog, use una clase para la sección de blog y combínela con el selector real. Esto le permitirá seleccionar solo las imágenes de la sección del blog, y no otras imágenes, como su logotipo o iconos de redes sociales, o imágenes en cualquier otra sección de su sitio, como la barra lateral. Así es como se vería el CSS:
.blog img{
    max-width:100%;
    height:auto;
}


10. Niños directos

Desearía haberlo sabido cuando comencé a usar CSS. ¡Esto me habría ahorrado mucho tiempo! Use > para seleccionar los hijos directos de un elemento. Por ejemplo:
#footer > a
Esto seleccionará y aplicará estilo a todos los elementos de enlace activos que están inmediatamente debajo de la ID de pie de página. No seleccionará nada más allá del elemento activo, o cualquier otra cosa contenida en el pie de página, como texto sin formato. Esto también funciona muy bien con los elementos de navegación de nivel superior.

ELEMENTOS SECUNDARIOS ESPECÍFICOS

Créeme, esto es útil cuando estás diseñando listas. Solo necesita contar cuántos elementos tiene el elemento que desea diseñar y luego aplicar ese estilo.
li:nth-child(2) {
    font-weight:800;
    color: blue;
    text-style:underline;
}
El CSS anterior apunta al segundo elemento de la lista y lo pone en negrita, subrayado y azul. Agregue una "n" después del número entre paréntesis y puede seleccionar cada segundo elemento de la lista. Imagine poder diseñar cualquier otra línea en un diseño de tabla para una fácil lectura. El CSS sería:
li:nth-child(2)

11. Aplicar CSS a múltiples clases o selectores

Digamos que desea agregar un borde idéntico alrededor de todas las imágenes, la sección del blog y la barra lateral. No tiene que escribir exactamente el mismo CSS 3 veces. Solo enumere esos elementos, separados por comas. Aquí hay un ejemplo:
.blog, img, .sidebar {
    border: 1px solid #000;
}
Ya sea que haya sido diseñador web durante años, o recién esté comenzando, aprender a crear sitios web de la manera correcta puede parecer un viaje difícil e interminable. Una vez que haya reducido los idiomas que desea aprender, debe aprender y perfeccionar sus habilidades.
No importa lo que aprenda, CSS es una de esas habilidades esenciales, pero desalentadoras que debe dominar. Sin embargo, no tiene por qué ser tan difícil, especialmente si conoce algunas técnicas CSS prácticas y menos conocidas para hacer el trabajo.

12. tamaño de la caja: caja de borde;

Este es un favorito entre muchos diseñadores web, porque resuelve el problema de los problemas de relleno y diseño. Básicamente, cuando establece un cuadro en un ancho específico y le agrega relleno, el relleno se agrega al tamaño del cuadro. Sin embargo, con el tamaño de la caja: border-box; , esto se niega y las cajas se mantienen del tamaño que deben ser.
tamaño de caja

13.: antes

Este CSS es un selector que le permite elegir un elemento CSS e insertar contenido antes de cada elemento con una clase específica aplicada. Digamos que tenía un sitio web donde deseaba un texto específico antes de cada etiqueta H2. Nos haría esta configuración:
h2:before { 
    content: "Read: ";
<span class="Apple-converted-space">    color: #F00;</span>
}
Esto es extremadamente útil, especialmente si está utilizando una fuente de icono. Puede colocar iconos antes de ciertos elementos y aplicarlos globalmente.
antes de

14.: después

Al igual que el selector: before, puede usar: after para insertar contenido globalmente en elementos específicos. Un uso práctico sería agregar "leer más" después de cada extracto en un blog. Así es como lo harías.
p:after{ 
    content: " -Read more… ";
    color:#f00;
}
después

15. contenido

El contenido es una propiedad CSS que resulta útil cuando necesita insertar un elemento que desea poder controlar. El uso más común que he visto para esto es insertar un icono de una fuente de icono en un lugar específico. En los ejemplos anteriores, puede ver que debe ajustar el texto que desea insertar entre comillas.

16. restablecimiento CSS

Los diferentes navegadores tienen configuraciones CSS predeterminadas, por lo que es imprescindible restablecerlas, para que tenga un campo de juego uniforme y uniforme. Piense en ello como la construcción de una casa, y si construye en la ladera de una montaña, en una playa de arena o en medio de una zona boscosa, quiere que esa base esté nivelada.
Este método de restablecimiento de CSS establece una base estándar para todos sus sitios web, dándoles consistencia en su punto de partida de CSS. Elimina bordes no deseados, márgenes preestablecidos, relleno, altura de líneas, estilos en listas, etc. Eric Meyer creó uno que funciona bien .

17. Gorras

Todos aman las gorras. Nos recuerda al libro impreso tradicional, y es una excelente manera de comenzar una página de contenido. Esa primera letra grande realmente llama tu atención. Hay una manera fácil de crear un capitular en css, y es usando el pseudo elemento:: primera letra. Aquí hay un ejemplo:
p:first-letter{
    display:block;
    float:left;
    margin:3px;
    color:#f00;
    font-size:300%;
}
Lo que esto hace es establecer la letra en 3 veces el tamaño de las otras letras. Establece 3px de espacio alrededor de la letra para evitar la superposición, y establece el color de la letra en rojo.
tapadera

18. Forzar que el texto sea todo en mayúsculas, en minúsculas o en mayúsculas

Sería absurdo escribir una sección completa en mayúsculas. Imagine tener que volver y arreglarlo más tarde cuando el formato del sitio web cambie o se actualice. En su lugar, use los siguientes estilos CSS para forzar el texto a cierto formato. Este CSS apunta a la etiqueta del título H2.
  • h2 {text-transform: mayúscula; } - todas mayúsculas
  • h2 {text-transform: minúscula; } - todo en minúsculas
  • h2 {text-transform: capitalize; } : Escribe en mayúscula la primera letra de cada palabra.
caso

19. Altura vertical de la pantalla

A veces, desea que una sección llene toda la pantalla, sin importar el tamaño de la pantalla. Puede controlar esto con vh o ver la altura. El número anterior es un porcentaje, por lo que si desea que ocupe el 100% del navegador, debe establecerlo en 100. Puede establecerlo en un valor como 85% para acomodar un menú de navegación fijo.
Cree una clase para el contenedor y aplique la cantidad de vh que desea que tenga. Una cosa que puede necesitar ajustar es el valor de la consulta de medios para pantallas u orientaciones específicas como teléfonos en modo vertical. Imagina estirar una imagen de paisaje para que se ajuste al modo retrato. Eso simplemente no se vería bien.
.fullheight { height: 85vh; }

20. Estilo de enlaces telefónicos

Si tiene un enlace que llama a un número de teléfono cuando un usuario lo toca en su teléfono, puede tener problemas para diseñarlo con el selector de enlace activo tradicional. En su lugar, use el siguiente CSS:
a[href^=tel] {
<span class="Apple-converted-space">    color: #FFF;</span>
<span class="Apple-converted-space">    text-decoration: none;</span>
}

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas