Un nuevo día para impresionarse sobre las funcionalidades de CSS3. Esta vez me toco trabajar con un sistema que maneja HTML5 y CSS3.

Esta regla tal vez ya la conocias, se trata de modificar el texto seleccionado, usando cualquier otro fondo con el que dispone en navegador.

Sin mas las reglas basicas son las siguientes.

::-moz-selection {
	background:#FC0;/*#f24c15;*/
	color:#009;
	}

::selection {
	background:#FC0;/*#f24c15;*/
	color:#009;
	}

Como ven, ya he hecho algunos cambios y es impresionante.

Lo malo no funciona en Explorer.

Bueno hasta pronto.

En SpeckyBoy hicieron una recopilación de 25 Templates hechos solo con HTML y CSS todos los templates tienen una terminación muy profesional y bien vistosa, por lo que no solo sirven para reutilizarlos sino que también están perfectos para tomarlos como inspiración para nuevos proyectos, algunos estan hechos con Html5 y Css3, los 25 templates los pongo a continuación:

Descarga | CreativeStudio Download Page
Demo | Live Demo

Demo y Descarga | Greymatter Download Page

Descarga | Photomatic Download Page

Demo | Live Demo

Descarga | Magicbox Download Page

Demo | Live Demo

Descarga | Bestfolio Download Page

Demo | View Screenshots

Descarga | CSS Heaven 2 Download Page

Demo | Live Demo

Descarga | DarkPortfolio Download Page

Demo | Live Demo

Descarga | HTML5 Portfolio Download Page

Demo | Live Demo

Descarga | Studio One Download Page

Demo | Live Demo

Descarga | YIW Minimal Download Page

Demo | Live Demo

Descarga | MovieHunter Download Page

Demo | Live Demo

y Aqui les pongo el resto sin Screenshots.

Buzz

Descarga | Buzz Download Page

Demo | Live Demo

PhotoWall

Descarga | PhotoWall Download Page

Demo | Live Demo

Product Landing Page

Descarga | Landing Page Download Page

Demo | Live Demo

Corporate Blue

Descarga | Corporate Blue Download Page

Demo | Live Demo

Blogger

Descarga | Blogger Download Page

Demo | Live Demo

Tree Tops

Descarga y Demo | Tree Tops Download Page

Dapurkue E-Commerce Template

Descarga | Dapurkue Download Page

Demo | Live Demo

Clean vCard

Descarga | Clean vCard Download Page

Demo | Live Demo

Newserific

Descarga | Newserific Download Page

Demo | Live Demo

Social Community Management

Descarga  y Demo | Social Community Management Download Page

Acallia

Descarga | Acallia Download Page

Demo | Live Demo

Gallerised

Descarga | Gallerised Download Page

Demo | Live Demo

WhiteFolio

Descarga | WhiteFolio Download Page

Demo | Live Demo

960.GS CSS Photography Template

Descarga | Photography Template Download Page

Demo | Live Demo

Gray Admin Template

Descarga | Gray Admin Template Download Page

Demo | Live Demo

Encontré esta página en la que inscriben sitios hechos en HTML5 y CSS3 así como otras nuevas tecnologías, nos sirve para ver ejemplos muy bueno e interesantes sobre el uso de HTML5 y CSS3, y también los podemos usar como Inspiración para nuevos proyectos, el sitio del que les hablo es  101 Best Html5 Sites en la que podemos ver sitios como estos:

http://www.pixelbender.ca/

http://www.edgarleijs.nl/

http://wantist.com/

Slick CSS3 Animated Image Caption, fue un experimento más de CSS3 y un poco de HTML5 usando la propiedad transition de CSS3. Su uso es sencillo en este ejemplo solo se necesita poner la imagen y el título dentro de un DIV:

El Html :

<div class="wrap">
    <img src="Tu imagen" alt="imagen" />
    <article class="text"><!-- HTML5-->
        <h2><a href="#">Texto para la Animación</a></h2>
    </article><!-- texto -->
</div><!-- Contenedor -->

y aquí la magia del CSS3:

.wrap{
height:200px;width:400px;
background:#000;
overflow:hidden;
position:relative;
}
.text{
background:rgba(0,0,0,0.5);
top:-70px;
color:white;
font:14px Georgia,serif;
height:auto;width:inherit;
position:absolute;

/* Magia de la trancisión con CSS3 */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.text a{
color:#fff;
display:block;
padding:15px;
text-decoration:none;
/* CSS3 Transition Magic */
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .5s ease-out;
transition: all .4s ease-out;
}
.text a:hover{
color:red;
text-decoration:none;
}
.container:hover .text{
top:0;
}

Link | Slick CSS3 Animated Image Caption

Demo | Slick CSS3 Animated Image Caption Demo

52Framework, es básicamente una Web Base hecha con puro HTML5 y CSS3, en la cual usa todas las nuevas herramientas que trae consigo estas nuevas tecnologías, entonces teniendo en cuenta que no son aceptadas por todos los navegadores al 100%, hay que hacer malabares si quieres usarlo en nuevos proyectos, y el número 52 viene de 52px que viene del sistema de gridas que usa este framework (16 columnas, 52 pixel con 8 pixeles de separación)

Entre sus características estan las siguientes:

• HTML5
  • Usa los nuevos Tagas mas populares de html5: header, nav, section, article, footer, y más..
  • Usa todas las novedades de <!DOCTYPE html> y <html lang="en">
  • Nuevos tipos de Inputs: url, email, etc
  • Se añade un Script (javascript) para usar los tags sin el atributo Type
  • Modificado el reset para que funcione bien el HTML5
• CSS3
  • Usa todas las novedades :: selectores que habilitan las modificaciones del texto.
  • Bordes redondeados para bloques(divs e inputs) y elementos
  • Text-Shadow para elementos de textos
  • Box Shadow para bloques.
• Grid
  • 16 columnas, basado en 52 pixel con 8 pixeles de separación

Demo y Descarga | 52Framework

CanvasXpress es una libreria hecha con javascript con el unico motivo de generar gráficos con los tag <canvas> implementados en html5, lo interesantes de la etiqueta canvas es que con ella se puede crear casi todo tipo de gráficos en 2d y en 3d.

Su uso no es tan complicado ya que en la web oficial tiene todos los ejemplos necesarios para crear las gráficas y lineas.

Link | canvasXpress

Demos | Examples canvasXpress

BonBon Bottons, es simplemente un archivo .CSS basado en CSS3 que añade efectos visuales a los links que tengan la clase de “button” y sus variantes.

<a href="" class="button">Label</a>

Link y Demo | BonBon Sweet CSS3 Buttons

Y eso que aun no se lo usa a 100% el HTML5 ya podemos ver ejemplos increíbles hechos bajo el mismo lenguaje, como este juego de Helicoptero, ya antes se vio el juego de PACMAN incluso lo vimos en el logo de google.

Link | HTML5 Helicopter

Esta es una manera bastante curiosa en la que muestra los 104 elementos o etiquetas que usa HTML5, en este sitio uno puede ver link donde detallan el uso de cada uno.

Link | Periodic Table of the Elements HTML5

Addy Osmani nos enseña con lujo de detalles una forma de navegar mediante “hovers” usando:  jQuery, CSS3, HTML5 y @font-face, basicamente es un sitio con efectos jquery que mediante html5, CSS3 y @font-face logran un resultado magnífico.

Link | WanderWall

Demos | Demo 1 –  Demo 2 – Demo 3

Descarga | Download WanderWall