10 trucos de css que todo desarrollador debe conocer
Si quieres convertirte en un Desarrollador Web Full Stack, seguro que este artículo sobre los trucos css te interesa. Tener a mano herramientas y trucos que faciliten el diseño no solo ayudará a que optimices tu tiempo, sino que, además podrás lograr diseños que se adapten a las necesidades de tus clientes. ¿Quieres conocer los 10 mejores trucos CSS? ¡Vamos a ello!Antes de empezar, es importante que debas contar con un buen HTML, el lenguaje de etiquetas es básico para que el resultado final, y el proceso de creación sea de calidad.Un HTML sencillo, con una buena semántica y limitado a la expresión del contenido, nunca a la presentación, te ayudará a conseguir mejores resultados.Box-sizingLa propiedad de CSS box-sizing nos sirve para calcular las medidas de un elemento. Esto que a priori podría no tener demasiada importancia, debemos tenerlo en cuenta ya que, por defecto CSS considera que el ancho y alto de la caja es de las propiedades width y height. En otras palabras, si añades un padding o un border, el tamaño de renderizado de la caja será: width + padding + border.Gracias a la box-sizing, eliminarás diferencias en el modelo de caja entre navegadores. De este modo, al probar las páginas en varios navegadores será más fácil que todo esté colocado en el mismo sitio.*{box-sizing: border-box;}Diseñar un cursor parpadeanteSi eres un desarrollador front-end de verdad… ¡No puedes dejar de lado las animaciones para conseguir efectos en tus webs! Uno de los más comunes es el del cursor que parpadea cuando no estamos escribiendo.Para eso, lo primero que tendremos que hacer es definir el texto con el que vamos a trabajar.<div class="blink"> <span>Estoy escribiendo...</span></div>Una vez preparado, definimos en los estilos que el span va a contar con un borde derecho de 2px , que será el que funcione como cursor y con la propiedad animation, la manera en la que va a funcionar la animación..blink span { letter-spacing: .2rem; border-right: 2px solid var(--p-color); animation: blink 3s steps(30, end), cursor 1s step-end infinite;}@keyframes blink { from { width: 0; } to { width: 100%; }}@keyframes cursor { from, to { border-color: transparent;} 50% {border-color: var(--p-color); }}Alineación vertical con table-cellSi eres de los que usa el modelo de tablas desde CSS, con los display correctos, lograrás lo que a veces parece una misión imposible: la alineación vertical, ya que las celdas permiten el atributo vertical-align. Otra de las ventajas de este truco, es que funciona en casi la totalidad de los navegadores..caja{display: table-cell;vertical-align: middle;}Acortar textosSi tienes un texto demasiado extenso, puedes acortarlo con CSS. Para conseguirlo, usaremos ellipsis, es decir los “...” de siempre. De esta manera, estamos dando la indicación de que hay más información de la que se está visualizando.Lo conseguimos gracias al text-overflow y la cosa quedaría así:p.truncate {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}Transformar textosSi quieres seguir jugando con el texto, vamos a darte un truco para que puedas transformarlo. Con CSS puedes hacer que todo el texto de un elemento aparezca en mayúsculas o minúsculas. También puedes hacer, que la primera letra de cada palabra sea mayúscula aunque se escribiese originalmente de otra manera en HTML.Esto lo puedes conseguir gracias a la propiedad text-transform. Por ejemplo: Este es el HTML que vamos a cambiar:<p class=”lowercase”>MINÚSCULAS</p><p class=”uppercase”>mayúsculas</p><p class=”capitalize”>primera letra mayúscula</p>Si te das cuenta, es un poco contradictorio que “minúsculas” esté en “mayúsculas” y “mayúsculas” en “minúsculas”. Pues para que en CSS todo coincida:.lowwecase { text-transform:lowercase;}.uppercase { text-transform:uppercase;}.capitalize { text-transform:capitalize;¡Ya estaría!.Permite que se adapteDeja que los contenidos se adapten a las dimensiones de los contenedores. Para conseguirlo, utiliza medidas relativas. Recuerda que no solo debes hacerlo en los tamaños de los elementos, además debes modificarlo tanto en los atributos como en el margen..articulo{width: 32%;margin: .5%;}RGBA en colores con transparenciaSi no quieres volverte loco y perder el tiempo haciendo malabares con imágenes .png puedes conseguir transparencia en los colores por el canal RGBA.#soloFondoSemitransparente {background-color: rgba(255, 120, 50, 0.5);}Includes de CSSSi necesitas distribuir tu CSS en diferentes archivos, olvídate del no realices los @import, esto lo único que consigue es aumentar conexiones al servidor. Los preprocesadores CSS consiguen eso además de otras tantas cosas. Uno de los más sencillos es Less. El código se encontraría en un archivo .less y se añadirían otros archivos less con las diferentes partes de tu código Less. No olvides que antes de publicar tu web tendrás que procesar los less y generar el CSS. Tranquilo, hay varias herramientas con las que podrás conseguirlo de manera muy sencilla. ¡Less drama, more tricks!// CSS reset@import "reset.less";@import "site.less";Definir estilos utilizando clasesLas clases nos sirven para crear definiciones de estilos que se pueden utilizar en múltiples ocasiones.Podemos definir la clase entre las etiquetas <STYLE> (en la cabecera del documento), o en un archivo externo a la página con la que estamos trabajando. Para definirlas usamos: un punto seguido del nombre de la clase y entre llaves los atributos de estilos que queremos añadir. Por ejemplo: .nombredelaclase {atributo: valor;atributo2:valor2; ...}Cuando hayamos creado una clase, podemos usarla en cualquier etiqueta HTML. Utilizaremos el atributo class, añadiendo como valor el nombre de la clase: <ETIQUETA class="nombredelaclase">Ocultar elementos sin afectar al SEO webOcultar elementos como “display: none;” o “visibility: hidden;” del documento HTML de una web suele ser un problema para los motores de búsqueda que acaban por penalizar el SEO de una web. Sin abusar de ello, podemos usar de vez en cuando el comando CSS que nos permite ocultar estos elementos:.hidden { position: absolute; top: -9999px; left: -9999px;}Estos son solo algunos de los trucos de css que existen. Pero, si quieres saber más y convertirte en un experto desarrollador web… ¡Pregúntanos por el bootcamp de Desarrollo Web Full Stack!Sigue leyendo. Artículos especializados en diferentes áreasEcha un vistazo al resto de artículos que tenemos en nuestro blog. Trabajamos duro para crear contenido de calidad y enriquecer la comunidad.
¿Te has quedado con ganas de saber más?No lo dudes y contacta con nosotros, te resolveremos todas las dudas y te asesoraremos para que encuentres el bootcamp, la modalidad y el plan de financiación que mejor se adapta a ti.
SOLICITA INFORMACIÓN