10 códigos de CSS que te sacarán de más de un apuro - Parte 2

CSS es el lenguaje subyacente que proporciona a los sitios web su aspecto. Aunque CSS es un lenguaje sencillo y fácil de aprender, puede ser difícil de sacarle todo el jugo, en algunos casos. No hay nada que temer, hay soluciones que se pueden encontrar por la red y si no, puedes echar un vistazo a este artículo. Para los casos in extremis, hemos reunidos 10 códigos de CSS que te sacarán de más de un apuro

Si deseas ajustar el ancho de un texto, que el ancho de las columnas de la tabla se ajusten automáticamente, crear una notificación de carga sin usar gifs... tenemos los códigos que necesitas, y más.

Aquí puedes leer la primera parte

6. Autoancho de columnas en tablas

Las tablas son lo peor, sobretodo cuando tienes que ajustar de manera precisa el ancho de las columnas. Sin embargo, existe un truquito que puedes poner en práctica. Añade white-space: nowrap en el elemento td para corregir fácilmente el ajustado del texto.

td {
    white-space: nowrap;
}

Mira la demo para comparar el resultado.

7. Mostrar la sombra de una tabla en uno o dos lados

Si quieres mostrar sombras en una caja, prueba este sencillo truco el cual te brinda la posibilidad de proyectar sombras a ambos lados de una caja. Para hacer esto, primero define una caja con una anchura y altura específica. Dale una sombra usando el pseudo-elemento :after y juega con eso hasta conseguir el posicionamiento correcto. Este es el código para hacer solamente una sombra inferior:

.box-shadow {
    background-color: #FF8020;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

Esta es la demo:

8. Ajustar la longitud de textos largos según el contenedor

Es posible que ya te hayas encontrado con una palabra que es más larga que su propio contenedor. Por defecto, el texto se completará en sentido horizontal, independientemente de la anchura del contenedor, por ejemplo:

Con este código de CSS se puede hacer que el texto se ajuste al ancho del contenedor.

pre {
    white-space: pre-line;
    word-wrap: break-word;
}

Y así es como queda ahora:

9. Crear texto borroso

¿Quieres que el texto se vuelva borroso y que sea ininteligible? Podemos hacerlo con un truquito de CSS aplicando color transparente y despues añadiéndole sombras tal que así:

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Y voilá, aquí tienes al texto borroso.

10. Elipsis animada con CSS

Este código te ayudará a hacer una animación llamada elipsis, muy útil para hacer simples estados de carga en lugar de utilizar una imagen gif.

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}

Vamos a ver la demo.

Juega con estos códigos y experimenta con todo lo que pueden hacer por ti.

Y este ha sido el artículo en el que trataba explicaros 10 códigos de CSS que te sacarán de más de un apuro, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
SIGUIENTE ARTÍCULO