10 fragmentos de CSS simple e inteligente
CSS es el lenguaje subyacente que da a los sitios web su aspecto. Aunque CSS es un lenguaje sencillo y fácil de aprender, puede ser difícil aprovecharlo en algunos casos. No hay nada que temer, hay soluciones alternativas que puedes encontrar en línea, y aquí hay solo 10 prácticas que puedes usar.
Si desea ajustar el texto largo, ajustar automáticamente el ancho de las columnas de la tabla o crear un estado de carga simple sin el uso de Gif, tenemos los fragmentos que se entregarán, y más.
1. Alinear verticalmente cualquier cosa
Si trabajas con CSS, entonces esto te molestará: ¿cómo alinear texto o un elemento verticalmente del contenedor? Ahora, con el uso de las Transformaciones CSS3, podemos abordar este problema de manera más elegante, así:
.verticalcenter {position: relative; arriba: 50%; -webkit-transform: translateY (-50%); -o-transform: translateY (-50%); transformar: traducir Y (-50%); }
Con esta técnica, todo, desde una sola línea de texto, una serie de párrafos o una caja, se alineará verticalmente. En lo que respecta al soporte de navegador, CSS3 Transform funciona en Chrome 4, Opera 10, Safari 3, Firefox 3 e Internet Explorer 9.
2. Estirar un elemento a la altura de la ventana completa
En ciertos escenarios, es posible que desee estirar un elemento a la altura de la ventana completa. El cambio de tamaño del elemento básico solo cambiará el tamaño hasta el tamaño del contenedor, de modo que para que un elemento abarque la altura de la altura completa de la ventana, debemos abarcar el elemento superior: html
y body
.
html, cuerpo {altura: 100%; }
A continuación, aplique el 100% de altura a cualquier elemento, como ese:
div {altura: 100%; }
3. Aplicación de diferentes estilos según el formato de archivo
A veces puede tener varios enlaces que desea que se vean diferentes de los demás, para que sea más fácil saber a dónde va el enlace. Este fragmento a continuación agregará un icono antes del texto del enlace y usará diferentes íconos o imágenes para diferentes tipos de fuentes, que en este ejemplo es un enlace externo.
a [href ^ = "http: //"] {relleno-derecho: 20px; fondo: url (external.gif) no-repeat center right; } / * correos electrónicos * / a [href ^ = "mailto:"] {relleno-derecho: 20px; fondo: url (email.png) no-repeat center derecha; } / * pdfs * / a [href $ = ". pdf"] {relleno-derecho: 20px; fondo: url (pdf.png) no-repeat center right; }
Esto es lo que parece.
4. Imagen de navegador cruzado en escala de grises
La escala de grises puede brindar un tono más profundo a su sitio web, lo que le da un aspecto más elegante y, a veces, minimalista. Aquí, agregaremos un filtro de escala de grises a una imagen usando SVG. Esto es lo que hacemos para aplicar escala de grises:
Y para entregar este navegador cruzado, utilizamos la propiedad del filter
esta manera:
img {filter: url (filters.svg # escala de grises); / * Firefox 3.5+ * / filtro: gris; / * IE6-9 * / -webkit-filter: escala de grises (1); / * Google Chrome, Safari 6+ y Opera 15+ * /}
5. Animar un fondo degradado
Una de las características más atractivas de CSS es la posibilidad de agregar efectos de animación. Puedes animar el color de fondo, la opacidad, el tamaño, pero desafortunadamente no para Color de degradado. Actualmente, no puedes animar el fondo degradado, sin embargo, este fragmento puede ser de alguna ayuda. Mueve la posición de fondo para que parezca que está animando.
botón {background-image: linear-gradient (# 5187c4, # 1c2f45); fondo de tamaño: auto 200%; posición de fondo: 0 100%; transición: posición de fondo 0.5s; } botón: hover {background-position: 0 0; }
Aquí hay una demostración para mostrarte lo que hace.
6. Ancho de columna de la tabla CSS
Las tablas son un dolor especialmente cuando se trata de ajustar el ancho de las columnas. Sin embargo, hay un atajo que puedes usar. Agregue white-space: nowrap
en el elemento td
para corregir fácilmente el ajuste del texto.
td {white-space: nowrap; }
Mira la demostración para comparar el resultado.
7. Mostrar cuadro sombreado solo en uno o dos lados
Si quieres sombras de caja, prueba este truco que puede darte sombras de caja a cada lado de una caja. Para hacer esto, primero defina un cuadro con un ancho y alto específicos. Dale una sombra usando :after
pseudo elemento y juega para obtener el posicionamiento correcto. Este es el código para hacer una sombra de fondo:
.box-shadow {background-color: # FF8020; ancho: 160px; altura: 90px; margin-top: -45px; margin-left: -80px; posición: absoluta; arriba: 50%; izquierda: 50%; } .box-shadow: after {content: ""; ancho: 150px; altura: 1px; margin-top: 88px; margin-left: -75px; bloqueo de pantalla; posición: absoluta; izquierda: 50%; índice z: -1; -webkit-box-shadow: 0px 0px 8px 2px # 000000; -moz-box-shadow: 0px 0px 8px 2px # 000000; caja-sombra: 0px 0px 8px 2px # 000000; }
Esta es la demo:
8. Envoltura de contexto de texto largo
Si alguna vez encuentras una palabra que es más larga que el contenedor en sí, este truco te será útil. De forma predeterminada, el texto se llenará horizontalmente independientemente del ancho del contenedor, por ejemplo:
Con un código CSS simple, puede hacer que el texto ajuste el ancho del contenedor.
pre {espacio en blanco: línea previa; word-wrap: palabra de ruptura; }
Esto es lo que parece ahora:
9. Hacer el texto borroso
¿Quieres convertir el texto borroso? Lo que podemos hacer es hacer que el color sea transparente, para agregar sombra de texto como esta.
.blurry-text {color: transparent; sombra de texto: 0 0 5px rgba (0, 0, 0, 0.5); }
Y listo, tienes un texto borroso.
10. Animación de elipsis mediante CSS Animation
Estos fragmentos te ayudarán a crear una animación llamada ellipsis, útil para crear estados de carga simples en lugar de utilizar una imagen gif.
.loading: after {overflow: hidden; pantalla: bloque en línea; vertical-alinear: inferior; animación: elipsis 2s infinita; contenido: "\ 2026"; / * código ascii para el carácter de puntos suspensivos * /} @keyframes ellipsis {from {width: 2px; } a {ancho: 15px; }}
Vamos a ver la demostración.
Juega con los fragmentos y experimenta con qué más puedes hacer con él.

Diseño web móvil: 10 consejos para una mejor usabilidad
Se espera que la navegación web móvil se convierta en la próxima plataforma de Internet más importante. Ahora es fácil navegar por la red desde prácticamente cualquier lugar utilizando dispositivos móviles que se adaptan a una mano debido a la tecnología. Ser breve en la implementación de una buena usabilidad en el diseño web móvil hace que sea difícil navegar por varios sitios web móviles populares. El diseño p

9 Mujeres que cambiaron la forma en que usamos Internet
La diversidad en las compañías tecnológicas es uno de los temas más candentes en el ciberespacio y no muestra signos de extinción. Esto se debe principalmente a que las mayores corporaciones tecnológicas como Facebook, Twitter y Google publicaron sus datos de diversidad de trabajadores, lo que desató un nuevo debate sobre por qué no hay más mujeres trabajando en tecnología. También