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

Hace ya tiempo que se publicó en DesarrolloWeb.com un análisis de las capacidades de 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…

Leer más

Vamos a hablar rápidamente sobre uno de los nuevos atributos de las CSS 3, que sirve para personalizar los bordes de los elementos HTML con imágenes. Publicamos este artículo dentro del Manual de CSS 3, que es una especie de compendio de ejemplos y técnicas que nos permitirá aplicar esta nueva especificación de las Hojas de Estilo en Cascada. De manera resumida, border-image es un atributo que nos ayudará a aplicar nuevos estilos a las cajas con CSS, a través de la utilización de imágenes en los bordes de los elementos,…

Leer más