Artículos, tips y consejos sobre diseño y desarrollo web

Imágenes en blanco y negro con CSS3 (grayscale filter)
Imágenes en blanco y negro con CSS3 (grayscale filter)

Imágenes en blanco y negro con CSS3 (grayscale filter)

2018-08-29T10:36:58+01:0007/06/2012|Diseño web, HTML5|

Uno de los trabajos más nuevos de CSS3 son los filtros de imagen. Ya venían funcionando para imágenes SVG, pero ahora se amplia para todo tipo de imágenes. Con estos filtros podremos poner una foto en blanco y negro, sepia, cambiar colores, desaturar, etc. Casi como tener un pequeño Photoshop en nuestro CSS. Es interesante para

Más información

Box-Sizing, eligiendo el modelo de caja en CSS3
Box-Sizing, eligiendo el modelo de caja en CSS3

Box-Sizing, eligiendo el modelo de caja en CSS3

2018-08-29T10:37:23+01:0030/05/2012|Diseño web, HTML5|

En las entradas escritas hasta ahora, ha sido Internet Explorer quien se ha llevado más palos, pero en la de hoy voy a criticar a Firefox. Además vamos a ver una propiedad muy interesante para no volvernos locos en la maquetación, box-sizing. El modelo de caja que se usa por defecto, y el único

Más información

Placeholders en formularios HTML5
Placeholders en formularios HTML5

Placeholders en formularios HTML5

2018-08-29T10:38:47+01:0023/05/2012|Diseño web, HTML5|

Uno de los nuevos atributos de los elementos de formulario en HTML5 es placeholder. Con este atributo podemos especificar un texto a mostrar en los elementos de tipo texto o similares, a modo de información y que desaparece cuando comenzamos a escribir. Me parece muy útil para poner consejos, un ejemplo o requisitos en los campos

Más información

Animaciones con CSS3: keyframes
Animaciones con CSS3: keyframes

Animaciones con CSS3: keyframes

2020-12-20T08:43:33+01:0015/05/2012|Diseño web, HTML5|

En la entrada de introducción sobre animaciones veíamos el funcionamiento básico sobre el ejemplo de rotar una imagen. En resumen, podíamos hacer que el navegador animase el cambio en una clase CSS eligiendo la duración y la función de interpolación y esto funcionaba con cualquier valor interpolable, es decir, que pudiera ser transformado en valores numéricos. Respecto

Más información

Css3: Transparencias
Css3: Transparencias

Css3: Transparencias

2018-08-29T10:42:17+01:0009/05/2012|Diseño web, HTML5|

Css ha incorporado unas funciones de color, rgb y hls, con versiones que incluyen canal alpha o de transparencia. Quien trabaje con hls ya conoce como funciona, y a los demás con rbg tenemos suficiente. Así que me voy a centrar en la función rgba. Su sintaxis es: rgba (rojo, verde, azul, transparencia)

Más información

Atajos de teclado en redes sociales
Atajos de teclado en redes sociales

Atajos de teclado en redes sociales

2018-08-29T10:41:04+01:0002/05/2012|Diseño web|

Os dejamos una lista de atajos de teclado o “teclas rápidas” de twitter, facebook y youtube, ¡¡os ayudará a ahorrar tiempo y esfuerzo!! FACEBOOK: Alt + 1 página de inicio denuestra cuenta Alt + 2 acceder al perfil personal Alt + 3 solicitudes de amistad Alt + 4 página de mensajes Alt + 5

Más información

Animaciones con CSS3: Introducción
Animaciones con CSS3: Introducción

Animaciones con CSS3: Introducción

2020-12-20T08:35:36+01:0020/04/2012|Diseño web, HTML5|

Las animaciones en la web no son nada nuevo, basadas en javascript, y si usas alguna librería como Jquery son fáciles de conseguir. ¿Por qué usar entonces animaciones CSS? Pues porque el código de la animación se ejecutará nativamente en el navegador, cuyo código es compilado y está muy optimizado, mientras que javascript será

Más información

Bordes redondeados con CSS3
Bordes redondeados con CSS3

Bordes redondeados con CSS3

2018-08-29T10:44:37+01:0016/04/2012|Diseño web, HTML5|

Uno de los recursos estéticos que más se está usando para romper con la rigidez de bloques y bordes de las páginas web son las esquinas redondeadas. Durante años se han hecho virguerías para conseguir este efecto, tales como poner imágenes del mismo color del fondo en las esquinas, algoritmos que colorean pixeles, etc.

Más información

Text-overflow: Vista previa de un texto con CSS
Text-overflow: Vista previa de un texto con CSS

Text-overflow: Vista previa de un texto con CSS

2018-08-29T10:45:52+01:0009/04/2012|Diseño web, HTML5|

#contenedor{ overflow: hidden; text-overflow: ellipsis " [ver]"; white-space : nowrap; width: 300px; /** Extra para decoracion **/ background-color: #d0d0d0; padding: 10px 10px 10px 10px; border-radius: 8px; margin-left:0; margin-right:0; } #contenedor:hover{ white-space : normal; /** Extra para decoracion **/ background-color: #f0f0f0; } Texto de ejemplo para ver como funciona la propiedad text-overflow. Al pasar el ratón por

Más información

Problema en javascript al pasar a número ’08’ y ’09’
Problema en javascript al pasar a número ’08’ y ’09’

Problema en javascript al pasar a número ’08’ y ’09’

2018-08-29T10:46:18+01:0003/04/2012|Diseño web, HTML5|

Vamos a partir de un ejemplo sencillo y bastante común en javascipt, tenemos una fecha en formato texto de la que queremos sacar el día y pasarlo a número para poder sumar o restar días. var fecha="01/02/2011"; var trozos=fecha.split("/"); console.debug(trozos[0]); //Imprime 01 var dia=parseInt(trozos[0]); console.debug(dia); //Imprime 1 Parece que funciona bien, acabamos teniendo en día un

Más información

Artículos y tips sobre diseño web

Imágenes en blanco y negro con CSS3 (grayscale filter)

Box-Sizing, eligiendo el modelo de caja en CSS3

Placeholders en formularios HTML5

Animaciones con CSS3: keyframes

Css3: Transparencias

Atajos de teclado en redes sociales

Animaciones con CSS3: Introducción

Bordes redondeados con CSS3

Text-overflow: Vista previa de un texto con CSS

Problema en javascript al pasar a número ’08’ y ’09’

Diseño web en Valladolid

Agencia de marketing en Valladolid

Tictac Soluciones Informáticas es partner de y