CSS

Formas para cambiar el color (u otro estilo que le queramos dar) al atributo «placeholder» de los input o textarea de nuestros formularios. Por defecto observamos que es de un gris claro. Para cambiar los estilos generales de «todos» los […]

Leer más...

Para crear más de 2 bordes a un objeto la forma más sencilla es la de utilizar la propiedad «box-shadow» de CSS3. Ejemplo de un elemento con 6 bordes (simulando los colores del arco iris) de 5px de grosor: .box{ […]

Leer más...

CSS: borde interior

Dos formas diferentes de crear un borde interno a un div u otro elemento en CSS. A continuación 2 ejemplos diferentes de borde interior y exterior: A. Usando la propiedad «border» para crear el borde interior, y «outline» para el […]

Leer más...

Para insertar «opacidad» a los border en css3 se usa el método RGBa (que es la extensión del RGB pero con un canal de opacidad) para seleccionar el color del borde. Un ejemplo de un borde de 1 pixel de […]

Leer más...

Diferentes formas de customizar la propiedad «resize» de css que permite redimensionar los textarea de los formularios. La propiedad resize de css tiene estos 4 valores: resize: both; resize: horizontal; resize: vertical; resize: none; Unos ejemplos de uso: both: Redimensiona […]

Leer más...

En html las tablas tienen los atributos cellpadding (permite especificar la distancia entre el margen interior de la celda y su contenido) y cellspacing (permite especificar la distancia entre las celdas y el margen exterior de la tabla). Por ejemplo: […]

Leer más...

CSS: if data-atributo

Si utilizais en html5 los data attributes y quereis jugar desde css en función del valor de un determinado data-atributo a continuación unos ejemplos: Un html y css de ejemplo para que veáis el resultado: <div class="elemento" data-comentarios="56"></div> <div class="elemento" […]

Leer más...

La propiedad de css3 «user-select» permite deshabilitar la «selección de texto» con el ratón. Un ejemplo, imagina que tienes un texto que quieres que no se pueda seleccionar: .no-seleccionable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } En […]

Leer más...

Si usáis la propiedad «transition» de css3 para crear animaciones, y observáis que al hacer «hover» sobre un elemento, el efecto hace que a su vez se mueva 1px… para solucionarlo podemos añadir la función «translateZ» de transform con valor […]

Leer más...