Artículos y tips sobre diseño web
Somos desarrolladores, especialistas en diseño y desarrollo web. Aquí os dejamos unos pequeños tutoriales y trucos para todos aquellos que os estés iniciando en este mundo.
Somos desarrolladores, especialistas en diseño y desarrollo web. Aquí os dejamos unos pequeños tutoriales y trucos para todos aquellos que os estés iniciando en este mundo.
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
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
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)
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
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á
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.
#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
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
En la anterior entrada (ZOOM vs SCALE en CSS) hablábamos de escalado y la propiedad zoom, y parecía funcionar todo perfecto en cualquier navegador, pero me he encontrado un problema del que no consigo salir. El ejemplo sobre el que vamos a trabajar es muy sencillo, un div que contiene otros dos divs, el
Hace algunas entradas hablamos de las transformaciones 2D de CSS3, poniendo como ejemplo la rotación. Ahora vamos a dar algunos detalles más sobre el escalado de elementos. Según lo que hemos visto, en el estándar hacer un escalado CSS es tan sencillo como: #elem{ transform: scale(1.5); } Lo que haría el elemento “elem”