Hoy os traemos como invitado a nuestra agencia seo a Hector Peña de Webelx, este artículo es para ti si eres un profesional que quiere aprender algunos tips que te ayuden a ser mejor diseñador o si eres un aficionado con un conocimiento bastante amplio de HTML y CSS y quieres ampliar ligeramente tus horizontes para poder seguir avanzando con este lenguaje. No es que vayamos a descifrar secretos de CSS que nadie sepa, pero en esta mini guía de consejos y «truquillos» es bastante probable que encuentres algunas funcionalidades que te ayuden en el día a día, ya sea en el trabajo o en un proyecto propio o en alguna cosa en concreto con la que te estás volviendo loco ahora mismo. Esta mini guía debe ser usada por personas con unos conocimientos mínimos en CSS para poder ser aprovechada, si crees que aún no has alcanzado unos conocimientos suficientes para seguir adelante con este artículo te recomendamos visitar este enlace para empezar desde un nivel más básico. Para los más novatos, solo decir que CSS es un lenguaje maravilloso que no es muy difícil de asimilar, pero tiene una curva de aprendizaje y hay que ser paciente a la hora de estudiarlo.
Índice de contenidos
Aumenta tus habilidades con estos consejos
Conforme va pasando el tiempo, CSS es cada vez más potente y ofrece a tus desarrollos web un gran abanico de posibilidades. En este artículo te ofreceremos una serie de técnicas avanzadas para consolidar tus habilidades con CSS, ten en cuenta que algunas de ellas aún se encuentran en fase experimental y hay que usarlas en un entorno controlado. Como todo, siempre es bueno probarlas y ser precavido antes de usarlas en entorno real.
El uso de SVG para los iconos
Lo bueno del SVG es que es compatible con todos los navegadores modernos y funciona bien con todos los tipos de resolución, por lo que no hay razón para seguir subiendo los iconos en .jpg o .gif. No olvides usar la propiedad background-size para escalar la imagen de fondo y que se adapte al contenedor donde está situada. .logo { display: block; text-indent: -9999px; width: 100px; height: 82px; background: url(imagen.svg); background-size: 100px 82px; }
DISEÑOS DE TABLAS FIJOS
Es una propiedad poco conocida pero con muy pocos problemas de compatibilidad que cambia la forma de renderizar tablas a un diseño más predecible. table { table-layout: fixed; } La shape-outsidees una propiedad CSS que permite crear formas geométricas y hacerlas flotar de forma que el texto envuelve el contorno de las mismas. .shape { width: 300px; float: left; shape-outside: circle(50%); }
CAJAS RESPETANDO LA RELACIÓN DE ASPECTO
Usando el 20% para el padding hace que la altura de la caja sea el 20% de su anchura. No importa la anchura, el div «hijo» saltará a la relación de aspecto (100% / 20% 5:1). .container { height: 0; padding-bottom: 20%; position: relative; } .container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
TRANSICIÓN DE CAMBIO DE COLOR AL PASAR EL RATÓN POR ENCIMA
Una manera realmente fácil para hacer que tus links (o cualquier otro elemento) tenga mejor aspecto. a { color: #000; -webkit-transition: color 1s ease-in; /* safari y chrome */ -moz-transition: color 1s ease-in; /* firefox */ -o-transition: color 1s ease-in; /* opera */ } a:hover { color: #000; }
DANDO ESTILO A LAS IMÁGENES ROTAS
Las imágenes rotas suelen ser una faena, pero a veces pasa que alguna imagen deja de estar disponible por alguna razón en tu web. Usando algunos estilos CSS avanzados, es posible dar estilo a las imágenes rotas y mostrar un
mensaje de error personalizado a los usuarios del portal. img { min-height: 50px; } img:before { content: " "; display: block; position: absolute; top: -10px; left: 0; height: calc(100% + 10px); width: 100%; background-color: rgb(230, 230, 230); border: 2px dotted rgb(200, 200, 200); border-radius: 5px; } img:after { content: "\f127" " Imagen rota de " attr(alt); display: block; font-size: 16px; font-style: normal; font-family: FontAwesome; color: rgb(100, 100, 100); position: absolute; top: 5px; left: 0; width: 100%; text-align: center; } ¿Ya has probado lo que se puede hacer con esta técnica? ¡Esto mola mucho más que lo que enseñan los navegadores por defecto, eh!
SELECTORES DE ATRIBUTO VACÍO Y NO VACÍO
CSS3 hace fácil aplicar diferentes estilos a un elemento, depende como, un atributo data-* puede estar vacío o no. Así debe quedar tu HTML y tu CSS, con un estilo específico para cada elemento div con un atributo data-attr vacío: div { border: 1px solid black; height: 100px; margin: 10px; width: 100px; } /* Selector de atributo vacío */ div[data-attr=''] { background: red; } /*Selector de atributo que no está vacío */ div:not([data-attr='']) { background: green; }
LISTAS SEPARADAS POR COMAS
Esto es un pequeño snippet para mostrar una lista desordenada como si fuera una lista separada por comas. Date cuenta del uso de :not(:last-child) para asegurarte que al último elemento de la lista no se le pondrá una coma 😉 ul > li:not(:last-child)::after { content: ","; } Esperamos que todos estas técnicas te sirvan de ayuda y como solemos decir, lo más importantes es que practiques una y otra vez para poder potenciar tu conocimiento sobre CSS y HTML. Con el tiempo y la práctica de todo este conocimiento podrás diferenciarte en este sector, en el que estudiar día a día y actualizarte continuamente es lo más valioso. Y ya sabes, si te has quedado con ganas de más, hay un gran número de selectores y atributos aún por descubrir en CSS que harán más fáciles tus desarrollos y darán un plus de profesionalidad a tus proyectos.
Tamara es redactora #seo y la boxeadora de la oficina. 🥊
Siempre escribe textos con gancho 😉
