Categoría: Noticias

En este estudio profundo de los degradados de color en CSS3 ahora vamos a tratar de explicar los degradados con repetición, que se pueden hacer para conseguir un degradado entre dos o más colores que se repite varias veces a lo largo de todo el fondo del elemento al que se le coloque. Los degradados con repetición se realizan de manera similar a los que vimos al tratar los degradados lineares normales. La diferencia es que utilizaremos el nombre de atributo repeating-linear-gradient y que, para que se produzcan las repeticiones tendremos que utilizar…

Leer más

En este artículo vamos a tratar sobre las nuevas características de CSS para maquetación automática de textos en columnas, que se encontrarán disponibles cuando CSS 3 se implemente finalmente en los navegadores. Aunque todo esto no pase de un estado experimental, lo cierto es que ya podemos empezar a probarlo y utilizar en navegadores modernos, como muchas de las nuevas posibilidades que estamos comentando sobre CSS 3 Numerosas publicaciones maquetan el texto en diversas columnas, como criterio de diseño y para facilitar la lectura. Podríamos imaginarnos el texto de los periódicos…

Leer más

La propiedad box-shadow, que sirve para producir una sombra en un contenedor, por medio de CSS. Es una de esas propiedades que vienen como novedad en la tercera especificación de CSS y que nos vendrán como anillo al dedo para conseguir ciertos efectos que antes sólo podíamos emular mediante el uso de imágenes semi-transparentes por canal alpha. Así pues, lo que antes era un verdadero engorro y peso adicional innecesario para nuestras páginas, ahora se puede hacer con unas sencillas propiedades de CSS 3. Como decíamos, ya explicamos la propiedad box-shadow de CSS 3 y…

Leer más

Como sabemos, los colores en HTML se expresan en valores RGB, igual que en CSS, que admite diversas notaciones para definir el color, a través de números en hexadecimal e incluso en decimal. Todo esto suponemos no será un misterio para los lectores, que sin duda habrán experimentado con CSS y probablemente estén familiarizados con las distintas notaciones para especificar color en las hojas de estilo. Ahora queremos hablar de una nueva notación, que no es simplemente una manera nueva de expresar lo mismo, sino una que nos permite definir…

Leer más

El nuevo elemento <picture> de HTML5 permite describir con todo detalle cómo deben cargarse las imágenes de tu sitio web. Ya no serán necesarios los hacks de CSS o JavaScript para gestionar las imágenes responsive de los diseños web. Además, los usuarios se aprovecharán de las ventajas de cargar solamente las imágenes optimizadas para el dispositivo que están utilizando, lo que es especialmente útil para usuarios con móviles y conexiones lentas a Internet. Al margen de los nuevos atributos srcset y sizes definidos recientemente para los elementos <img>, el nuevo elemento<picture> permite una mayor flexibilidad al especificar qué imágenes utiliza…

Leer más

Las cadenas de texto de JavaScript han sido desde siempre muy limitadas, sobre todo comparadas con las cadenas de lenguajes como PHP, Python o Ruby. Las Template Strings del estándar EcmaScript 6 (que están disponibles a partir de Google Chrome 41) eliminan todas estas limitaciones y permiten incluso definir DSLs (domain-specific languages) en tus aplicaciones JavaScript. Las principales funcionalidades que aportan las Template Strings son: Interpolación de cadenas. Posibilidad de incluir (y evaluar) expresiones dentro de cadenas. Definición de cadenas de texto en varias líneas sin tener que usar hacks. Formatear cadenas de manera avanzada.…

Leer más

Las imágenes son una de las partes más importantes del diseño web. Normalmente dejamos que sean los navegadores los que redimensionen y escalen las imágenes para que encajen bien en el diseño y se vean lo mejor posible. No obstante, en ocasiones es mejor controlar explícitamente cómo se escalan las imágenes. Por ese motivo, la versión 41 de Google Chrome añadió soporte para el nuevo valor pixelated de la propiedad image-rendering de CSS 3. Gracias a esta propiedad, podrás definir el algoritmo utilizado para ampliar las imágenes. En concreto, el valor pixelated permite desactivar el suavizado de…

Leer más

Las Media Queries son, en una traducción rápida, consultas de las características del medio donde se está visualizando una web y nos sirven para definir estilos condicionales, que solo se aplicarán en caso que esa consulta del medio sea satisfactoria. Son una de las herramientas fundamentales para implementar el «Responsive Web Design» y han llegado de la mano de las CSS3, convirtiéndose en un aliado fundamental de cualquier diseñador web. En la mayoría de los casos las Media Queries sirven para definir estilos diferentes para distintos tamaños de la pantalla.…

Leer más