Las 45 mejores plantillas gratuitas de HTML5-CSS3

Para iniciarse en el desarrollo de sitios web con HTML5 y CSS3 puede ser una idea interesante tomar una plantilla como punto de inicio. Ver cómo está estructurada y analizar los estilos CSS que se han utilizado y cómo estos estilos además de "vestir" el sitio añaden interesantes efectos.

En este post han realizado una selección con las 45 mejores plantillas gratuitas de HTML5 y CSS3.

Free HTML5-CSS3 Template for Download

45 Best Free HTML5-CSS3 Templates for Download » »

Generar prefijos CSS3 con PHP

Los navegadores actuales soportan las propiedades CSS3 con prefijos específicos para cada tipo de navegador, hasta que la propiedad sea aprobada y finalizada por el W3C. Eso significa mucha repetición a la hora de escribir código. Pongamos como ejemplo la siguiente declaración:

#caja{
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
        -ms-border-radius: 5px;
	border-radius: 5px;
}

Más código significa mayores probabilidades de cometer errores y produce hojas de estilos que son más largas y más difícil de mantener. En lugar de escribir el prefijo específico del tipo de navegador y los valores una y otra vez, podemos utilizar PHP para generarlo por nosotros.

Podemos utilizar una función PHP para producir el código CSS3. La función tendrá que saber dos cosas: el nombre de base de la propiedad (por ejemplo, border-radius) y el valor asociado a ella ("5px"). Por lo tanto, deberíamos escribir:

<?php
header('Content-type: text/css');

function css3_write ($property, $value) {
	$css3 = "-webkit-".$property.": ".$value.";\n"
	." -moz-".$property.": ".$value.";\n"
	." -o-".$property.": ".$value.";\n"
	." -ms-".$property.": ".$value.";\n"
	." ".$property.": ".$value.";\n";
	echo $css3;
} ?>

La primera línea es para indicar el tipo de contenido del archivo php. Obviamente a la hora de invocar nuestra hoja de estilos lo haremos llamando el archivo php:

<link rel='stylesheet' type='text/css' href='css/estilos.php' />

En la función css3_write queremos producir la correspondiente declaración de CSS para todos los navegadores. La propiedad base se incluye al final, como fallback. Construiremos la declaración utilizando una serie de concatenaciones y utilizando \n (nueva línea) para hacer que la función escriba un CSS más legible.

Para producir nuestro CSS3 tan sólo tenemos que llamar a la función con la propiedad CSS3 y el valor para dicha propiedad. Por ejemplo:

#caja {
	border: 1px solid black;
	background: #fff;
    <?php css3_write("border-radius", "5px"); ?>
	width: 50%;
    <?php css3_write("box-shadow", "5px 5px 2px rgba(0, 0, 0, 0.5)"); ?>
}

Lo que generará el siguiente código:

#caja {
	border: 1px solid black;
	background: #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px; width: 50%;
	width: 50%;
	-webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
	-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
	-ms-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5);
}

Este método es una alternativa al uso de compiladores como Less o Sass. Para obtener más información acerca de cómo crear CSS con PHP podéis consultar: Controlar CSS con PHP y Comprimir varios CSS en uno con PHP.

CSS3 Transforms

Las transformaciones en CSS3 ofrecen la posibilidad de añadir persepectiva a tus elementos HTML. Podemos usar las transformaciones CSS3 para disponer los elementos en un espacio 2D o 3D. HTML es generalmente una presentación lineal, todos los elementos son esencialmente rectángulos. Las transformaciones nos permiten aprovechar los diferentes planos para dar a nuestro "layout" cierta perspectiva. Hay dos tipos de transformaciones: 2D y 3D. Vamos a ver primero las transformaciones 2D:

  • Skew: Define un sesgo 2D a lo largo de los ejes x e y.
  • Scale: Proporciona un escalado 2D sobre los ejes x e y.
  • Rotate: Proporciona una rotación 2D a un número de grados definido.
  • Translate: Se traslada (o desplaza) el elemento a una posición definida 2D.

Vamos a ver un ejemplo:

CSS:

.caja{
	display:block;
	margin-bottom:20px;
	width:100px;
	height:60px;
	background:#ddd;
	border:2px solid #c8c8c8;
}
.caja_skew {
	transform: skew(30deg);
	-ms-transform: skew(30deg); /* IE 9 */
	-webkit-transform: skew(30deg); /* Safari y Chrome */
	-o-transform: skew(30deg); /* Opera */
	-moz-transform: skew(30deg); /* Firefox */
}
.caja_scale {
	transform: scale(1,0.5);
	-ms-transform: scale(1,0.5); /* IE 9 */
	-webkit-transform: scale(1,0.5); /* Safari y Chrome */
	-o-transform: scale(1,0.5); /* Opera */
	-moz-transform: scale(1,0.5); /* Firefox */
}
.caja_rotate {
	transform: rotate(15deg);
	-ms-transform: rotate(15deg); /* IE 9 */
	-webkit-transform: rotate(15deg); /* Safari y Chrome */
	-o-transform: rotate(15deg); /* Opera */
	-moz-transform: rotate(15deg); /* Firefox */
}
.caja_translate {
	transform: translate(125px, 15px);
	-ms-transform: translate(125px, 15px); /* IE 9 */
	-webkit-transform: translate(125px, 15px); /* Safari y Chrome */
	-o-transform: translate(125px, 25px); /* Opera */
	-moz-transform: translate(125px, 15px); /* Firefox */
}
.caja_rotate_skew_scale_translate {
	transform: skew(30deg) scale(1,0.5) rotate(30deg) translate(25px,25px);
	-ms-transform: skew(30deg) scale(1,0.5) rotate(30deg) translate(25px,25px); /* IE 9 */
	-webkit-transform: skew(30deg) scale(1,0.5) rotate(30deg) translate(25px,25px); /* Safari y Chrome */
	-o-transform: skew(30deg) scale(1,0.5) rotate(30deg) translate(25px,25px); /* Opera */
	-moz-transform: skew(30deg) scale(1,0.5) rotate(30deg) translate(25px,25px); /* Firefox */
}

HTML:

<p>sesgar:</p>
	<div class="caja caja_skew"></div>
<p>escalar:</p>
	<div class="caja caja_scale"></div>
<p>rotar:</p>
	<div class="caja caja_rotate"></div>
<p>trasladar:</p>
	<div class="caja caja_translate"></div>
<p>rotar, sesgar, escalar y trasladar:</p>
	<div class="caja caja_rotate_skew_scale_translate"></div>

Ver ejemplo en funcionamiento » »

CSS3 transformaciones en 3D

Las transformaciones en 3D se implementan de manera similar a las transformaciones 2D, pero también tienes acceso a un tercer plano. A continuación vemos las opciones disponibles para las transformaciones 3D.

  • translate3d: Traslada (o desplaza) el elemento a una posición 3D definida en los ejes x,y,z.
  • scale3d: especifica una operación de escala 3D en los ejes x,y,z.
  • rotateX: especifica una rotación hacia la derecha por el ángulo dado alrededor del eje x.
  • rotateY: especifica una rotación hacia la derecha por el ángulo dado alrededor del eje y.
  • rotateZ: especifica una rotación hacia la derecha por el ángulo dado alrededor el eje z.

Vamos a ver otro ejemplo.

CSS:

.caja{
	display:block;
	margin-bottom:20px;
	width:100px;
	height:60px;
	background:#ddd;
	border:2px solid #c8c8c8;
}
.caja_translate3d {
	transform: translate3d(75%, ?25%, 0);
	-ms-transform: translate3d(75%, ?25%, 0); /* IE 9 */
	-webkit-transform: translate3d(75%, ?25%, 0); /* Safari y Chrome */
	-o-transform: translate3d(75%, ?25%, 0); /* Opera */
	-moz-transform: translate3d(75%, ?25%, 0); /* Firefox */
}
.caja_scale3d {
	transform: scale3d(0.5, 1.25,1);
	-ms-transform: scale3d(0.5, 1.25,1); /* IE 9 */
	-webkit-transform: scale3d(0.5, 1.25,1); /* Safari y Chrome */
	-o-transform: scale3d(0.5, 1.25,1); /* Opera */
	-moz-transform: scale3d(0.5, 1.25,1); /* Firefox */
}
.caja_rotate_x {
	transform: rotateX(100deg);
	-ms-transform: rotateX(100deg); /* IE 9 */
	-webkit-transform: rotateX(100deg); /* Safari y Chrome */
	-o-transform: rotateX(100deg); /* Opera */
	-moz-transform: rotateX(100deg); /* Firefox */
}
.caja_rotate_y {
	transform: rotateY(10deg);
	-ms-transform: rotateY(10deg); /* IE 9 */
	-webkit-transform: rotateY(10deg); /* Safari y Chrome */
	-o-transform: rotateY(10deg); /* Opera */
	-moz-transform: rotateY(10deg); /* Firefox */
}
.caja_rotate_z {
	transform: rotateZ(40deg);
	-ms-transform: rotateZ(40deg); /* IE 9 */
	-webkit-transform: rotateZ(40deg); /* Safari y Chrome */
	-o-transform: rotateZ(40deg); /* Opera */
	-moz-transform: rotateZ(40deg); /* Firefox */
}

HTML:

<p>trasladar 3d:</p>
    <div class="caja caja_translate3d"></div>
<p>escalar 3d:</p>
    <div class="caja caja_scale3d"></div>
<p>rotar x:</p>
    <div class="caja caja_rotate_y"></div>
<p>rotar y:</p>
    <div class="caja caja_rotate_z"></div>
<p>rotar z:</p>
    <div class="caja caja_rotate_x"></div>

Ver ejemplo en funcionamiento » »

Para ver mejor el efecto de las transformaciones vamos a realizar unas simples animaciones.

CSS:

.caja{
	display:block;
	margin-bottom:20px;
	width:100px;
	height:60px;
	background:#ddd;
	border:2px solid #c8c8c8;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
.caja_translate3d:hover {
	transform: translate3d(75%, -25%, 0);
	-ms-transform: translate3d(75%, -25%, 0); /* IE 9 */
	-webkit-transform: translate3d(75%, -25%, 0); /* Safari y Chrome */
	-o-transform: translate3d(75%, -25%, 0); /* Opera */
	-moz-transform: translate3d(75%, -25%, 0); /* Firefox */
}
.caja_scale3d:hover {
	transform: scale3d(0.5, 1.25,1);
	-ms-transform: scale3d(0.5, 1.25,1); /* IE 9 */
	-webkit-transform: scale3d(0.5, 1.25,1); /* Safari y Chrome */
	-o-transform: scale3d(0.5, 1.25,1); /* Opera */
	-moz-transform: scale3d(0.5, 1.25,1); /* Firefox */
}
.caja_rotate_x:hover{
	transform: rotateX(100deg);
	-ms-transform: rotateX(100deg); /* IE 9 */
	-webkit-transform: rotateX(100deg); /* Safari y Chrome */
	-o-transform: rotateX(100deg); /* Opera */
	-moz-transform: rotateX(100deg); /* Firefox */
}
.caja_rotate_y:hover{
	transform: rotateY(10deg);
	-ms-transform: rotateY(10deg); /* IE 9 */
	-webkit-transform: rotateY(10deg); /* Safari y Chrome */
	-o-transform: rotateY(10deg); /* Opera */
	-moz-transform: rotateY(10deg); /* Firefox */
}
.caja_rotate_z:hover{
	transform: rotateZ(40deg);
	-ms-transform: rotateZ(40deg); /* IE 9 */
	-webkit-transform: rotateZ(40deg); /* Safari y Chrome */
	-o-transform: rotateZ(40deg); /* Opera */
	-moz-transform: rotateZ(40deg); /* Firefox */
}

HTML:

<p>trasladar 3d:</p>
    <div class="caja caja_translate3d"></div>
<p>escalar 3d:</p>
    <div class="caja caja_scale3d"></div>
<p>rotar x:</p>
    <div class="caja caja_rotate_y"></div>
<p>rotar y:</p>
    <div class="caja caja_rotate_z"></div>
<p>rotar z:</p>
    <div class="caja caja_rotate_x"></div>

Ver ejemplo en funcionamiento » »

Acordeón usando únicamente CSS3

El siguiente ejemplo muestra cómo realizar un sistema de acordeón para mostrar/ocultar múltiples contenidos. El ejemplo se fundamenta en el uso de las transiciones de CSS3. Para ampliar la información acerca de las transiciones puedes acceder a un post anterior de este blog: "CSS3 Transitions: Realizar transiciones con CSS"

Lo primero es ver el ejemplo en funcionamiento

HTML:

<div class="block">
  <input type="radio" name="bloque_1" id="bloque_1" />   
  <label for="bloque_1"><span>Título bloque 1</span></label>
  <div class="info">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel libero quis massa interdum fermentum. Aenean lorem purus, eleifend condimentum fermentum vitae, euismod a turpis. Vivamus a pellentesque nisi. Quisque consequat lobortis nisl, ac hendrerit ligula placerat at. Cras id dui id enim gravida sagittis at vitae dui. Etiam convallis magna vel urna sodales consequat. </p>
  </div>
</div>
<div class="block">
  <input type="radio" name="bloque_1" id="bloque_2"/>
  <label for="bloque_2"><span>Título bloque 2</span></label>
  <div class="info">
    <p>Sed luctus elementum augue, vel eleifend diam condimentum posuere. Pellentesque quis erat et nunc faucibus rutrum eu in ante. Curabitur at auctor velit. Suspendisse potenti. Donec at velit ac nisl tempus vestibulum. Vestibulum bibendum, mi sed interdum aliquet, ligula tellus euismod odio, lacinia adipiscing lacus ipsum ut tortor. Cras id dui id enim gravida sagittis at vitae dui. Etiam convallis magna vel urna sodales consequat. </p>
  </div>
</div>
<div class="block">
  <input type="radio" name="bloque_1" id="bloque_3" />
  <label for="bloque_3"><span>Título bloque 3</span></label>
  <div class="info">
    <p>Nullam elit sem, egestas sed blandit sit amet, posuere at diam. Sed at eros et purus commodo malesuada. Aenean et dui nunc, nec pharetra libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam turpis orci, cursus pulvinar feugiat nec, sollicitudin quis enim. Cras id dui id enim gravida sagittis at vitae dui. Etiam convallis magna vel urna sodales consequat. </p>  
  </div>
</div>

CSS:

.block{
	background: #369;
	color: #fff;
	padding-top: 5px;
	border: solid 1px #ddd;
	border-top:none;
	line-height:25px;
}
.block input[type='radio']:checked ~ .info{
	height: 130px;
	transition: height 0.5s linear;
	-moz-transition:height 0.5s linear;
	-webkit-transition:height 0.5s linear;
	-o-transition:height 0.5s linear;
}
input[type='radio']{
	display: none;
}
label{
	width: 470px;
	margin-left: 15px;
	cursor: pointer;
}
span{
	font-weight: bold;
}
.info{
	background: #F4F4F4;
	color: #555;
	font-size:12px;
	line-height:17px;
	height: 0;
	padding:0 15px;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
	transition: height 0.5s linear;
	-moz-transition:height 0.5s linear;
	-webkit-transition:height 0.5s linear;
	-o-transition:height 0.5s linear;
} 

Visto en » »

15 HTML5-CSS3 plantillas gratuitas para comenzar tu proximo pryecto web

HTML5 no es una simple sustitución de HTML 4.01 o XHTML 1.0 ya que es una evolución. Algunas de las nuevas características de HTML5 son funciones para incluir video, audio, gráficos, almacenamiento de datos en el lado del cliente y un aumento de la interactividad. HTML5 mejora la interoperabilidad y reduce los costos de desarrollo. En este post se recogen 15 plantillas libres y de alta calidad HTML5+CSS3 que puedes utilizar para tu próximo proyecto. Algunas de estas plantillas se incluyen dentro de detallados tutoriales que muestran paso a paso cómo crear tu web con HTML5+CSS3.

15 Free HTML5-CSS3 Templates to Start the Future of Web Design

15 Free HTML5-CSS3 Templates to Start the Future of Web Design » »