Impresionantes animaciones con HTML5 y CSS3
HTML5 se ha ido desarrollando de tal forma que es increíble la cantidad de animaciones y efectos que se pueden hacer con él. Nos hace la vida mucho más cómoda, hace unos años era impensable hacer lo que hacemos hoy en día con tanta facilidad, gracias a HTML5 y sus nuevas etiquetas. En esta página … Lee más!
Las formas de CSS
Chris Coyier ha realizado una página de ejemplos en el que se puede ver cómo con CSS podemos hacer casi todas las formas geométricas que nos propongamos con CSS3: círculos, cuadrados, rectángulos, rombos, trapezoides… Muestro un ejemplo, el enlace hacia la página de ejemplos y otro para su descarga: Ver la página de ejemplos … Lee más!
Crear un globo rotando en 3D con CSS3
¿Te imaginas poder hacer un globo que gire, únicamente con 2 imágenes y código CSS3? Pues es posible, gracias a la propiedad keyframe y a animations. Uniéndolo todo podemos hacer un efecto bastante conseguido, de un globo que gira en la dirección y con el tiempo que deseemos. A continuación te muestro cómo se haría: … Lee más!
Crear diseño responsive en 3 pasos
Actualmente se habla mucho de los diseños responsive, de hecho hace poco publiqué una lista de frameworks responsive y de plantillas responsive. Aunque, los más novatos pueden tener dudas acerca qué es el diseño responsive, y a ellos va dirigido este artículo, en el que aprenderás a diseñar de manera responsive en 3 simples pasos, … Lee más!
Logos famosos creados sólo con CSS3
Los logotipos son una parte muy importante del diseño, ya que refleja nuestra marca y crea una imagen en la mente del usuario. La mayoría de las veces son realizadas con Adobe Photoshop, y, aunque es de las mejores opciones, siempre va a tardar más en cargar la imagen que el código CSS, por lo … Lee más!
Efectos JQuery y CSS para menús drop-down
En este artículo quiero compartir unos efectos para menús desplegables contigo. La idea es transformar un input simple en algo llamativo gracias al uso de JQuery. Podemos configurar las opciones como deseemos para lograr efectos únicos. El plugin JQuery que se utiliza permitirá estilizar la lista desplegable, gracias a JQuery y CSS. Recuerda que CSS … Lee más!
9 bonitos efectos con box shadow
Hace tiempo hice un artículo en el que explicaba qué era box shadow. Ahora, he pensado que sería ideal hacer uno para gente más avanzada, con el que aprenderán a realizar efectos con box shadow, para que sus diseños queden novedosos y sofisticados, de forma simple y sencilla. Todos los efectos son completamente funcionales … Lee más!
Estilo del texto en placeholder
Antes de nada, revisa información si no sabes que es un texto en placeholder. El texto placeholder en el input (en los navegadores que lo tengan implementado) da un color gris por defecto. Para elegir el color que deseemos, simplemente tendremos que añadir estas líneas de código a nuestro archivo CSS. En mi caso he elegido … Lee más!
Imagen circular con CSS3
Existen muchas cosas que se pueden crear con círculos: Logos circulares, menús circulares… Hoy os mostraré como crear imágenes circulares mediante el uso de CSS3. La única pega que se le puede poner, es que la imagen aparecerá como fondo (background). Es decir, en teoría no se podría hacer este efecto en una etiqueta de … Lee más!
CSS3: resize, propiedad
Al igual que podemos redimensionar ventanas en el sistema operativo, con la propiedad resize podremos hacer lo mismo, pero con las cajas de texto (textarea). Esta propiedad, una nueva característica de la interfaz de usuario de CSS3, nos permitirá agrandar o hacer más pequeñas las cajas de texto, con el cursor. Por ahora únicamente está … Lee más!
Crea fácilmente botones 3D con CSS3 y Ruby
Alexis ha creado una fórmula para poder realizar botones en tres dimensiones con CSS3 y Compass, una extensión de Ruby, de forma sencilla y rápida. Únicamente hay que seguir estos pasos: Instalación de la extensión Cuando hayas descargado la extensión, únicamente será necesario incluirla en el sitio y realizar una referencia a ella: @import "fancy_3d_buttons"; … Lee más!
Espectacular animación 3D de Creative Commons con CSS3 y HTML5
Ya sabemos las maravillas que puede realizar CSS3, pero los de Creative Commons nos sorprenden todavía más con esta animación realizada únicamente con HTML5 y CSS3, usando las propiedades CSS animations, transforms y transitions. El resultado es bastante espectacular, pero se necesita Firefox 4.0 beta, Chrome o Safari 5 para que funcione. Sin duda, esto … Lee más!
