1 OWMX-1

2 SilverBlog

3 Clean Red

4 Serenity

5 Minimalism

6 Simple Style 7

7 Small Business

8 Cooking Site

9 VividPhoto

10 ElegantPress

11 FreshIdeas

12 Restaurant

13 Lifebook

14 Kroft

15 Business Project

16 Studio One

17 Shinra

18 One Page Portfolio

19 HTML5 Starter Pack

20 HTML5 Admin Template

Post Relacionados

• 20 plantillas HTML y CSS gratuitas

• Pointe
  

  pointe /point/

  Dance performed on the tips of the toes

  Prev Next

  x Close

Demo 1

Demo 2

Demo 3

Post Relacionados

• Soporte de CSS3 en IE6, 7 y 8
• Crear Curriculum Vitae con CSS3
• Crear Accordion con CSS3
• YoxView : Excelente plugin para galería de imá
• Lightbox JavaScript con TopUp y jQuery
• Bordes redondeados CSS3 para todos los navegador

Post Relacionados

• Spine Mobile: Framework para WebApps moviles
• Barra de mensajes de notificación con CSS
• Chuleta infográfica de HTML5
• Top 10 juegos hechos con HTML5
• Player de Video HTML5: VideoJS
• Nueva Forma de Embeber Videos de Youtube
• Reproductor Multimedia Open Source con jQuery y
• jStorage : Plugin jQuery para Base de Datos HTML

HTML:

CSS:

Iconos

Post Relacionados

• Generador de Sprites CSS online con Stitches

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* IE6+ using IE-CSS3 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* IE6+ using IE-CSS3 */

  behavior: url(ie-css3.htc); /* para incluir las funciones en la clase 'box' */
}

Post Relacionados

• Lightbox con CSS3
• Crear Curriculum Vitae con CSS3
• Crear Accordion con CSS3
• Bordes redondeados CSS3 para todos los navegador

Post Relacionados

• SEO: Optimización de permalinks en WordPress
• ScreenCast: Como mejorar el performance de mi We
• Como utilizar los CSS Sprites
• Video: Optimización y Escalabilidad en Aplicaci
• Video: Cómo acelerar nuestro Javascript
• Canonical URL para mejorar el SEO de nuestra Web
• URLs amigables con .htaccess y PHP
• 2 excelentes ScreenCasts sobre CSS

Mejores Características.

• Utilización de CSS3 y jQuery.
• CSS y HTML validados.
• Compatibilidad con Firefox, Safari, Chrome, IE.
• Utilización de Font API de Google.

Sección de Experiencia

Seccion de Habilidades

Post Relacionados

• Lightbox con CSS3
• Soporte de CSS3 en IE6, 7 y 8
• Crear Accordion con CSS3
• Bordes redondeados CSS3 para todos los navegador

Paso 1: Estructura HTML.

Paso 2: Incluir el CSS.

Paso 3: Incluir la librería jQuery y función JavaScript.

Ejemplo del Accordion

Post Relacionados

• Top 10 librerías para gráficos en php
• 5 librerías para generar PDF con PHP
• Tutorial MVC con PHP
• Tabs CSS simples con jQuery
• Mostrar archivos ocultos en Mac
• 20 Plantillas CSS Gratuitas
• El mejor IDE para PHP
• 10 Excelentes plugins jQuery para formularios

<div class="verticalaccordion">
<ul>
	<li>
        <h3>Heading 1</h3>
		<div>Content For Panel 1.</div>
	</li>
	<li>
        <h3>Heading 2</h3>
		<div>Content For Panel 2</div>
	</li>
	<li>
        <h3>Heading 3</h3>
		<div>Content For Panel 3.</div>
	</li>
	<li>
        <h3>Heading 4</h3>
		<div>Content For Panel 4</div>
	</li>
</ul>
</div>

Estilos para el Accordion

/* CSS3 Transition Effect */
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;

.verticalaccordion>ul {
    margin: 0;
    padding: 0;
    list-style:none;
    width: 500px;
}

.verticalaccordion ul>li {
    display:block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style:none;
    height:40px;
    width: 500px;

    /* Decorative CSS */
    background-color:#f0f0f0;

    /* CSS3 Transition Effect */
    transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
}

.verticalaccordion ul>li>h3 {
    display:block;
    margin: 0;
    padding:10px;
    height:19px;

    /* Decorative CSS */
    border-top:#f0f0f0 1px solid;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    text-transform:uppercase;
    color: #000;
    background: #cccccc;
}

.verticalaccordion ul>li>div {
    margin:0;
    overflow: auto;
    padding:10px;
    height:220px;
}

.verticalaccordion ul>li:hover {
    height: 280px;
}

.verticalaccordion:hover ul>li:hover>h3 {
    /* Decorative CSS */
    color:#fff;
    background: #000000;
}

.verticalaccordion ul>li>h3:hover {
    cursor:pointer;
}

Post Relacionados

• Lightbox con CSS3
• Soporte de CSS3 en IE6, 7 y 8
• Crear Curriculum Vitae con CSS3
• Bordes redondeados CSS3 para todos los navegador

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	
	$(".checklist input:checked").parent().addClass("selected");
	
	$(".checklist .chk-select").click(
		function(event) {
			event.preventDefault();
			$(this).parent().addClass("selected");
			$(this).parent().find(":checkbox").attr("checked","checked");
		}
	);
	
	$(".checklist .chk-deselect").click(
		function(event) {
			event.preventDefault();
			$(this).parent().removeClass("selected");
			$(this).parent().find(":checkbox").removeAttr("checked");
		}
	);
});
</script>

Trabajando el CSS

<style type="text/css">
.checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.checklist li {
	float: left;
	margin-right: 10px;	
	font: normal 12px "Lucida Grande","Lucida","Arial",Sans-serif;
}
.checklist li.selected a.chk-deselect {
	display: block;
}
.checklist li.selected .chk-select {
	display: none;
}

.chk-select,a.chk-deselect{
    padding: 5px 7px;
    float: left;
    font-weight:bold;
    text-decoration:none;
}
.chk-select {
	display: block;
	background: #8DC63F;
	color: #fff;
}
a.chk-deselect{
	display: none;
	background: #eee;
    color: #8DC63F;
}

.checklist li input {
	display: none;	
}

.sendit {
	display: block;
	float: left;
	top: 118px;
	left: 10px;
	width: 115px;
	height: 34px;
	border: 0;
	cursor: pointer;
	background: #3FA2C6;	
	margin: 20px 0;
    color:#fff;
    font-weight:bold;
}

.round{  
 -webkit-border-radius: 3px;  
 -moz-border-radius: 6px;  
 -ms-border-radius: 6px;  
}  
</style>

Creando el HTML

<ul class="checklist">
    <li>
        <input name="jqdemo" value="value1" type="checkbox"/>
        <a class="chk-select round" href="#">#php</a>
        <a class="chk-deselect round" href="#">#php</a>
    </li>
    <li>
        <input name="jqdemo" value="value2" type="checkbox"/>
        <a class="chk-select round" href="#">#css</a>
        <a class="chk-deselect round" href="#">#css</a>
    </li>
    <li>
        <input name="jqdemo" value="value3" type="checkbox" checked="checked"/>
        <a class="chk-select round" href="#">#js</a>
        <a class="chk-deselect round" href="#">#js</a>
    </li>
    <li>
        <input name="jqdemo" value="value4" type="checkbox"/>
        <a class="chk-select round" href="#">#ajax</a>
        <a class="chk-deselect round" href="#">#ajax</a>
    </li>
</ul>

Ejemplo

Post Relacionados

• Top 10 librerías para gráficos en php
• 5 librerías para generar PDF con PHP
• Tutorial MVC con PHP
• Tabs CSS simples con jQuery
• Mostrar archivos ocultos en Mac
• 20 Plantillas CSS Gratuitas
• El mejor IDE para PHP
• 10 Excelentes plugins jQuery para formularios