Con tu Nombre y Correo recibes las ltimas Plantillas y Cdigos

* indicates required
Close

subscribe to the RSS Feed

Friday, May 18, 2012

html5snippets.com html5 y CSS3

Escrito por Dattahome el enero 30, 2012

Como verán a trabes de muchos temas que rondan en la Web estamos en la era Html5 y CSS3.
Unos de los proyectos muy buenos que he encontrado recorriendo la Web es html5snippets.com.
Este proyecto te permite compartir fragmentos de HTML5. Se trata de un pequeño proyecto experimental creado por Roberto Brevé.
En el aprenderás muchos trucos que te serán de utilidad al momento de programar tu proyecto basado en Html5 y CSS3.
Les dejo una muestra de código, y esperamos que les sea de utilidad.

<!doctype html>
<!-- simplified doctype works for all previous versions of HTML as well -->
<!-- Paul Irish's technique for targeting IE, modified to only target IE6, applied to the html element instead of body -->
<!--[if lt IE 7 ]><html lang="en"><![endif]-->
<!--[if (gt IE 6)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Glowing Tabs</title>
<style>
html, body, div, span, applet, object, iframe, code, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    font-style: normal;
    font-family: inherit;
    text-align: left;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ul {
    list-style: none;
}
q:before, q:after, blockquote:before, blockquote:after {
    content: "";
}
h1 {
    color: #fff;
    text-align: center;
    padding: 80px 0 30px 0;
}
h2 {
    text-align: center;
    padding: 40px 0 0 0;
    width: 75%;
    margin: 0 auto;
}
body {
    background: #131925;
}
ol {
    list-style: decimal;
    font-size: 24px;
    width: 400px;
    padding: 30px 0 0 60px;
    margin: 0 auto;
}
ul#navigation {
    height: 36px;
    padding: 20px 20px 0 30px;
    width: 904px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
ul#navigation li {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    float: left;
    width: 110px;
    margin: 0 10px 0 0;
    background-color: #2B477D;
    border: solid 1px #415F9D;
    position: relative;
    z-index: 1;
}
ul#navigation li.selected {
    z-index: 3;
}
ul#navigation li.shadow {
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: -3px;
    left: 0;
    border: none;
    background: none;
    z-index: 2;
    -webkit-box-shadow: #111 0 -2px 6px;
    -moz-box-shadow: #111 0 -2px 6px;
    box-shadow: #111 0 -2px 6px;
}
ul#navigation li a:link, ul#navigation li a:visited {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    display: block;
    text-align: center;
    width: 110px;
    height: 40px;
    line-height: 36px;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
    outline: none;
    float: left;
    background: #2B477D;
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
}
ul#navigation li a:hover {
    background-color: #5a87dd;
}
ul#navigation li.selected a:link, ul#navigation li.selected a:visited {
    color: #2B477D;
    border: solid 1px #fff;
    -webkit-transition: background-color 0.2s linear;
    background: -moz-linear-gradient(top center, #d1d1d1, #f2f2f2 80%) repeat scroll 0 0 #f2f2f2;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(.2, #f2f2f2), color-stop(.8, #d1d1d1));
    background-color: #f2f2f2;
}
#content {
    width: 850px;
    background: #f2f2f2;
    padding: 0 0 50px 0;
    margin: 0 auto;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<div style="width: 850px; margin: 0 auto 0 auto;">
<h1>CSS3 Glow Tabs with Box Shadow</h1>
<ul id="navigation">
    <li class="one"><a href="#">Details</a></li>
    <li class="two"><a href="#">Schedule</a></li>
    <li class="three selected"><a href="#">Speakers</a></li>
    <li class="four"><a href="#">Sponsors</a></li>
    <li class="five"><a href="#">Register</a></li>
    <li class="shadow"></li>
</ul>
    <div id="content">
    <h2>The tabs in this demo are image-less tabs<br />with 4 different CSS3 enhancements:</h2>
    
    <ol>
        <li>Rounded Corners (border-radius)</li>
        <li>Box Shadow (bottom of inactive tabs)</li>
        <li>Transitions (the glow on hover)</li>
        <li>Gradients (the active tab)</li>
    </ol>
    
    <h2>CSS Transitions work in Chrome, Safari, Opera 10.5 &amp; Firefox 3.7</h2>
    </div>
</div>
<script>
$(document).ready(function(){
    $("ul#navigation li a").click(function() {
        $("ul#navigation li").removeClass("selected");
        $(this).parents().addClass("selected");
        return false;
    });
});
</script>
</body>
</html>

Post Relacionados:

  1. CSS3 Vs. CSS2
  2. Html5 plantilla especial para tu empresa
  3. Bienvenidos al mundo css3
  4. CSS dropdown menu para WordPress
  5. Efecto de Esquinas Redondeadas con CSS

Archivado en: Cajas en CSS, Código CSS, Código html, Código web, Diseño Web, Html5

Etiquetas: , , , ,

Comentaron

Una Respuesta en “html5snippets.com html5 y CSS3”
  1. miguel dice:
    febrero 25, 2012 a las 4:28 pm

    Excelente hermano tu codigo.
    me gustaria charlar mas contigo sobre estos codigos mi correo es: isc_master@hotmail.cm

    Responder

Deja un comentario, y si quieres tu propia imagen para mostrar al lado de tus comentarios, busca una en gravatar!

Imagen CAPTCHA
*

Los enlaces en los comentarios pueden encontrarse libres de nofollow.

Portada | top

Red Ceobitacora.com
Educational blog network Ceobitacora.com
 
 

English
Hosting