HTML5, CSS3 y Un Poco Más

Efectos CSS3 Este ejemplo es bastante sencillo de realizar, ya que solo utilizaremos instrucciones de CSS3 , como se aprecia en la imagen los efectos son texto 3D , efecto blur , un efecto mayor de negritas , un desvanecimiento en el color de texto, que nuestro texto gire de manera automática en el eje Y y en el eje X.  El HTML usado en este ejemplo es el siguiente: Efecto 3D: Efecto 3D en CSS3 #ddd {         margin : 0;     text-align : center;        font-size: 90px;     line-height : 200px;         font-weight : bold;     color: #fff;     text-shadow:    0 1px 0 #ccc,                     0 2px 0 #c9c9c9,                     0 3px 0 #bbb,                      0 4px 0 #b9b9b9,                      0 5px 0 #aaa,                      0 6px 1px rgba(0, 0, 0, .1),                      0 0 3px rgba(0, 0, 0, .15),                      0 1px 3px rgba(0, 0, 0, .2),                      0 3px 5px rgba(0, 0, 0, .2),                      0 5px 10px rgba(0,

En este ejemplo aprenderás como crear las poderosas esferas de DragonBall utilizando solo CSS3. El documento HTML, contiene la siguiente estructura y es bastante sencilla por lo cual omitiré su explicación: Código HTML Bien lo primero que haremos será establecer el fondo del documento: body {             padding : 2em 5em;             background-image : url(grass.png);             background-attachment : fixed;             background-size : 100% 100%;         } Después mediante el uso de div con id " container " establecemos que todo lo que vaya dentro del el se deberá de ubicar en la parte inferior del documento: #container {             position : fixed;             bottom : 27px;             text-align : center;         } Bien ahora si creamos el diseño de nuestra esfera mediante CSS3, los puntos calve dentro de esta esfera el utiliza border-radius , un background con radial-gradient y para obtener el efecto de reflejo del luz utilizaremos 

En un plano general podemos definir el D iseño Responsivo como la manera que conjugamos distintas tecnologías en la construcción un sitio para que este sea lo suficientemente flexible para funcionar bien a través de una amplia gama de dispositivos. El diseño responsivo en la web se construye en parte a través de  HTML5 y CSS3   las cuales son nuevas especificaciones lanzadas por la W3C (World Wide Web Consortium) y son parte de un conjunto de tecnologías que se denomina " open web platform .", Ademas de trabajar con Javascript o de librerías desarrolladas mediante este lenguaje de programación. ¿Diseñar primero para dispositivos móviles o primero para escritorios?  ( Mobile First vs. Desktop First ) Esta es una discusión que nos podría llevar una entrada por separado totalmente, ya que la mayoría de los programadores nacemos con una manera de desarrollar y de pensar en las soluciones a los problemas con los que nos enfrentamos, y esa misma manera de pensar e

Este ejemplo permite de manera muy simple generar el diseño de una página web con estilo parallax, con solo utilizar HTML5 y CSS3 sin una sola gota de JavaScript . De manera similar dentro de la página crearemos un texto en formato 3D solo con ayuda de 6 directivas de CSS3 . Página Paralax Como se puede ver en la imagen el código se genera un texto con formato 3D el código que se utilizó dentro de  la página web fue una etiqueta <h1/> , la cual se enlaza con el siguiente código CSS3: De esta manera tan sencilla es como se genera dicho efecto fácil, cierto? Para obtener el efecto parallax es necesario, un poco más de código, las partes clave de dicho código que nos permiten crear este efecto se muestran remarcadas en color azul. Así de simple! Si quieres descargar el ejemplo y conocer un poco más de su funcionamiento da clic aquí .