HTML5, CSS3 y Un Poco Más

Introducción a pseudoclases CSS3 Buen día el ejemplo de hoy es un formulario con algunas variaciones las cuales son posibles gracias a los nuevos estándares en la presentación de datos (HTML5) y de diseño de los mismo (CSS3) los cuales son producidos por la w3c, hoy en día HTML5 y CSS3 ya no son los simples lenguajes que conocimos en sus versiones anteriores, actualmente están orientados a mejorar la interacción entre los usuarios, el navegador web y los datos que con ayuda del navegador podemos manipular, HTML5 presenta diferentes API´s con las cuales podemos tatuar directamente nuestra página con dibujos en 2D, incluir audio y video sin la necesidad de lenguajes script, manejar la geo localización, tener la posibilidad de arrastrar y soltar archivos, comunicación interna con datos almacenados en el navegador, etc. Así mismo para esta la tercera versión de la hojas de estilo se han generado diversas pseudo clases para poder interactuar con las etiquetas dentro de los documentos b...

Elementos Form Nuevos Elementos en el Formulario para la Entrada de Datos La Lista de datos "datalist" es un nuevo elemento de HTML5 en el cual se pueden especificar opciones de manera predeterminada lo cual permite autoacompletar el texto que se esta escribiendo. Ejemplo :    Codigo: HTML5 actualmente ya nos permite manejar fechas de una manera mucho mas facil ya que este nuevo estandar maneja un tipo de elemento para entrada de fechas sin la necesidad de que tengamos nosostros que comprobar si la fecha es correcta. Ejemplo :    Selecciona la fecha de tu Nacimiento :  Codigo: Este tipo de entrada tambien es muy util, y supongo que te puedes imaginar que tipo de dato es el encargado de comprobar y aceptar, bueno si aun no lo imaginas pratica con el. Ejemplo :    E-mail :    Codigo: Este tipo de entrada es util cuando necesitamos que el usuario...

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 text...

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:#...