HTML5, CSS3 y Un Poco Más

Varios Efectos Con Transición Gira jwebmx.blogspot.mx Se Extiende Mi Blog  - - >    jwebmx.blogspot.mx Se Agranda jwebmx.blogspot.mx Se Deforma jwebmx.blogspot.mx Se Mueve jwebmx.blogspot.mx codigo de la hoja de estilo /* Codigo para hacer girar el link */ #gira{ width:150px; height:25px; transition:2s; -moz-transition:2s; /* Para Firefox */ -webkit-transition:2s; /* Para Chrome */ -o-transition:2s; /* Para Opera */ } #gira:hover{ transform:rotate(360deg); -moz-transform:rotate(360deg); /* Para Firefox */ -webkit-transform:rotate(360deg); /* Para Chrome */ -o-transform:rotate(360deg); /* Para Opera */ } /* Codigo para mostrar el link */ #extiende{ width:55px; height:25px; transition:2.5s; -moz-transition:2.5s; /* Para Firefox */ -webkit-transition:2.5s; /* Para Chrome */ -o-transition:2.5s; /* Para Opera */ overflow:hidden; /* Se oculta el texto que sobre saldria de la seccion */ } #extiende:hover{ width: 250px; } /* C

Sencillo ejemplo de como realizar un Acordeon Util para almacenar información que solo se muestre cuando el usuario lo requiere, evitando ocupar espacio innecesario en nuestra web Patriotas Logo Patriotas Logo 2 Lorem Ipsum Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500. Código de la Hoja de Estilos section{ position:relative; } section ul{ position:relative; } section ul li{ text-align:center; display:marker; } section ul li div{ width:200px; height:20px; font-size:20px; font-family:"Bradley Hand ITC", Broadway, Arial; color:#990033; transition: all 1s ease-out; -webkit-transition: all 1s ease-out; overflow:hidden; } section ul li div:hover{ border-radius: 10px; font-size:25px; width:

Menú con HTML5 y CSS3 Hace tiempo para cierto proyecto tuve que realizar disitntos tipos de menus y uno de los que me agrado bastante y que es bastante sencillo de realizar fue el siguiente el cual deseo compartir con ustedes Archivo Guardar Cerrar Salir Edicion Copiar Cortar Pegar Insertar Imagen Video Audio La hoja de estilos es la Siguiente /*menu de Opciones*/ nav{ padding:20px; position:relative; margin-right:100px; } nav ul{ padding-left:0px; margin-left:0px; color:white; width:1000px; display:inline; position:relative; } nav ul li{ margin-left:35px; text-align:center; display:table-cell; position:static; } nav ul li div{ width:120px; height:20px; border: 1px solid Black; border-radius: 10px; text-shadow: 0px 0px 5px grey; font-size:16px; color:#000000; transition: