Empecemos.

El marcado HTML5

Primero, necesitamos crear un html Documento con el siguiente marcado:

 
 
 
 
Apple iPhone 4 - 16GB
 
El iPhone más asombroso hasta ahora..
 
 
 
  
 
 
El chip A5 de doble núcleo más rápido. La cámara de 8 megapíxeles con una óptica completamente nueva también graba videos HD de 1080p. Y presentando a Siri. Es el iPhone más asombroso hasta ahora..
 
 
Características del producto
 
 
Cámara de 8 mega píxeles con grabación de video de 1080p completa
 
Asistente de voz siri
 
iCloud
 
Impresión de aire
 
Pantalla retina
 
Geoetiquetado de fotos y videos.
 
 
 Compra ahora 
 
 

Usamos varias etiquetas nuevas de la especificación HTML5, como la encabezamiento, hgroup, figura, sección, y uno que hemos discutido antes; la detalles y resumen etiqueta.

Sin embargo, no vamos a profundizar en estas etiquetas, no porque no estemos dispuestos a hacerlo, sino que son temas básicos que puede encontrar fácilmente en otros lugares. Entonces, si eres realmente nuevo en HTML5, te recomendaría que leas las siguientes referencias de esas etiquetas; Los han explicado exhaustivamente:

• Hablemos de semantica
• El elemento de encabezado HTML5
• El elemento hgroup
• Referencia de etiquetas HTML5

Ahora veamos la primera aparición de nuestra página..

Bueno, parece sensato sin ningún estilo. En la parte superior está el encabezado y luego aparece la sección de la imagen, la descripción y, por último, el botón "Comprar ahora". Ahora, vamos a animar esta página.

Los estilos

Comenzaremos por normalizar todos los estilos predeterminados usando esta hoja de estilo y agregaremos un fondo degradado a la html etiqueta.

 html altura: 100%; fondo: # f3f3f3; fondo: -moz-lineal-gradiente (arriba, # f3f3f3 0%, #ffffff 50%); fondo: -webkit-gradiente (lineal, superior izquierdo, inferior izquierdo, límite de color (0%, # f3f3f3), límite de color (50%, # ffffff)); fondo: -webkit-linear-gradient (arriba, # f3f3f3 0%, # ffffff 50%); fondo: -o-lineal-gradiente (arriba, # f3f3f3 0%, # ffffff 50%); fondo: -ms-lineal-gradiente (arriba, # f3f3f3 0%, # ffffff 50%); fondo: gradiente lineal (arriba, # f3f3f3 0%, # ffffff 50%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

Recuerde que nuestros elementos de producto están envueltos en una div con la clase de producto. Entonces, aquí nos gustaría centrar la envoltura y establecer el ancho en aproximadamente 650px.

 .envoltura ancho: 650px; margen: auto; relleno: 25px 0px; 

La sección de cabecera

En la sección de encabezado tenemos dos encabezados. h1 y h4, así que vamos a diseñar estos elementos.

 h1, h4 font-family: Helvetica Neue, Arial, sans-serif; fuente-peso: normal; margen: 0;  h1 font-size: 24pt;  h4 font-size: 16pt; color: #aaa; 

Y luego agregue un poco de espacio en la parte inferior de la encabezamiento con un margen.

 encabezado margen inferior: 20px; 

Si miras el lado derecho del encabezado, habrá mucho espacio en blanco en ese lado.

Entonces, ¿por qué no ponemos también el logo de Apple?.

 encabezado margen inferior: 20px; fondo: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') no-repetir centro derecho; 

La imagen del producto

A continuación, desplace la imagen a la izquierda y establezca el ancho máximo de la imagen en 350px.

 figura flotador: izquierda;  figure img max-width: 350px; 

Dado que la imagen se ha empujado a la izquierda, flotaremos la sección de descripción a la derecha y estableceremos el ancho a 300px.

 sección font-family: Tahoma, Arial, sans-serif; línea de altura: 150%; flotar derecho; ancho: 300px; color: # 333; 

Ahora veamos el resultado hasta ahora..

Comienza a verse bien, pero la etiqueta de detalles aún no funciona (excepto en Chrome), así que vamos a ponerle estilo al botón siguiente..

El botón

Para los estilos de botones, imitaremos el de Apple.com Store. Y aquí está toda la sintaxis que necesita poner en su hoja de estilos para el botón.

 botón fondo: # 36a9ea; fondo: -moz-lineal-gradiente (arriba, # 36a9ea 0%, # 127fd2 100%); fondo: -webkit-gradiente (lineal, superior izquierda, inferior izquierda, stop de color (0%, # 36a9ea), stop de color (100%, # 127fd2)); fondo: -webkit-linear-gradient (arriba, # 36a9ea 0%, # 127fd2 100%); fondo: -o-lineal-gradiente (arriba, # 36a9ea 0%, # 127fd2 100%); fondo: -ms-lineal-gradiente (arriba, # 36a9ea 0%, # 127fd2 100%); fondo: gradiente lineal (arriba, # 36a9ea 0%, # 127fd2 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); borde: 1px sólido # 00599d; color: #fff; relleno: 8px 20px; -webkit-border-radius: 3px; radio del borde: 3px; -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1), inserción 0px 1px 0px 0px rgba (250, 250, 250, .3); caja-sombra: 0px 1px 1px 0px rgba (0, 0, 0, .1), recuadro 0px 1px 0px 0px rgba (250, 250, 250, .3); text-shadow: 0px 1px 1px # 156cc4; filtro: dropshadow (color = # 156cc4, offx = 0, offy = 1); tamaño de letra: 10 puntos; botón: desplazarse fondo: # 2f90d5; fondo: -moz-lineal-gradiente (arriba, # 2f90d5 0%, # 0351b7 100%); fondo: -webkit-gradiente (lineal, superior izquierda, inferior izquierda, stop de color (0%, # 2f90d5), stop de color (100%, # 0351b7)); fondo: -webkit-linear-gradient (arriba, # 2f90d5 0%, # 0351b7 100%); fondo: -o-lineal-gradiente (arriba, # 2f90d5 0%, # 0351b7 100%); fondo: -ms-lineal-gradiente (arriba, # 2f90d5 0%, # 0351b7 100%); fondo: gradiente lineal (arriba, # 2f90d5 0%, # 0351b7 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0); botón: activo fondo: # 127fd2; -webkit-box-shadow: recuadro 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0, 0); box-shadow: recuadro 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px rgba (0, 0, 0, 0); 

Ahora el botón debería verse mejor.

Problema en Internet Explorer

Como es habitual, IE (Internet Explorer) siempre causa algunos problemas; Si abres esto en cualquier IE inferior a 9, la página permanecerá sin estilo..

Esto se debe a que Internet Explorer no reconoce los nuevos elementos (sección, encabezamiento, etc.) por lo que los estilos que hemos especificado fallan en aplicar. Así, en el siguiente paso trabajaremos para resolver este problema..

Prueba de soporte del navegador

En nuestra publicación anterior, hemos abordado el soporte del navegador para el elemento de detalles utilizando este polyfill; para que pueda funcionar en los navegadores no compatibles. Sin embargo, esta vez probaremos diferentes formas de hacerlo con Modernizr..

Desde su web oficial., "Modernizr es una biblioteca de código abierto de JavaScript que te ayuda a construir la próxima generación de HTML5 y CSS3-sitios web motorizados". Técnicamente, Modernizr probará el soporte del navegador para ciertos nuevos elementos y características. Si no se proporciona soporte, debemos proporcionar un respaldo, ya sea dando diferentes estilos o proporcionando rellenos. En este caso, utilizaremos Modernizr para ayudarnos a probar los detalles y el elemento de resumen..

1. Ir a Modernizr y pasar a su página de descarga..

2. En la página de descarga, Modernizr proporciona algunas opciones para configurar la biblioteca, por lo que solo tiene que seleccionar ciertas funciones que realmente necesita para su sitio web. En este caso, necesitamos:

   • HTML5Shiv 3.4
   • Añadir clases de CSS, esta característica insertará automáticamente las clases en la etiqueta html.
   • la Modernizr.load,
   • Vaya al cuadro de complementos de la comunidad y seleccione detalles de elem,
   • En la sección Extensibilidad, seleccione Modernizr.addTest.
3. Generar y descargar el archivo..
4. Enlácelo a su html y vuelva a cargar la página en Internet Explorer. La página ahora debería tener un estilo ya que Internet Explorer ahora puede reconocer las etiquetas.

Y, si ve la fuente o el elemento inspeccionado, encontrará que la clase sin detalles se ha insertado en la etiqueta html; indicando que el navegador donde estamos previsualizando la página; Actualmente no está soportando el elemento de detalles. @@@@ [No puedo entender esta oración. ]

Luego podemos crear un respaldo utilizando esta clase como gancho, lo que haremos en el siguiente paso..

El fallback

En este paso proporcionaremos similares detalles Funcionalidad de elementos para otros navegadores (excluyendo Chrome). En la publicación anterior, este paso se realizó automáticamente utilizando este script, pero esta vez lo crearemos por nuestra cuenta..

Nota: Solo revisando un poco de nuestro post anterior; el elemento de detalles actualmente solo es compatible con el navegador Chrome.

Entonces, comencemos a trabajar en el CSS primero.

En la etiqueta de resumen, cambiamos su modo de cursor a puntero, por lo que el usuario notará que se puede hacer clic.

 sumario cursor: puntero; tamaño de letra: 12 puntos; esquema: 0; 

Para dar más espacios en la parte superior e inferior del elemento de detalles con un margen.

 detalles margen: 20px 0px; 

Por defecto, la etiqueta de resumen tendrá una flecha. Pero aquí nos gustaría reemplazarlo con un icono de menos-menos.

Nota: Antes de continuar, previamente he descargado los íconos de esta colección de Fugue, los descargo y los escribo en un archivo..

Agreguemos un pseudo-elemento anterior y adjuntemos el icono como fondo. Observe que en este punto, la posición de fondo se encuentra en la parte superior, que mostrará el icono más.

 detalles> resumen: antes ancho: 16px; altura: 16px; pantalla: bloque en línea; contenido: "! important; background: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') no-repetir parte superior central; margen derecho: 5px; posición: relativa; superior: 2px;

Luego, cuando el elemento de detalles está abierto, la posición del fondo se moverá a la parte inferior, que mostrará el icono menos.

 detalles [abrir]> resumen: antes, detalles. abrir> resumen: antes fondo: url ('… /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ) centro inferior sin repetición; 

los [abierto] El signo es un selector. En este caso, seleccionará el atributo abierto de detalles en el navegador compatible.

Por último deberíamos ocultar la flecha que por defecto se muestra en Chrome..

 detalles> resumen :: - webkit-details-marker mostrar: ninguno; 

Entonces, veamos el resultado en un navegador por un tiempo..

La flecha predeterminada ahora se ha reemplazado con nuestro ícono, y si lo ves en Chrome ya tendrás un efecto de alternancia cuando hagas clic en él; el icono cambiará en consecuencia. Pero, en otros navegadores no pasará nada todavía. Entonces, en el siguiente paso intentaremos replicar el efecto con jQuery.

El efecto de alternar con jQuery

Antes de comenzar con la parte de jQuery, me gustaría agradecer a Ian Devlin por la inspiración, el siguiente guión es en realidad una ligera modificación de su.

Muy bien, vamos a crear una variable para almacenar la etiqueta de resumen.

 var summary = $ ('resumen de detalles'); 

Luego envolvemos todos los elementos hermanos del resumen con una div.

summary.siblings (). wrapAll ('
');

Y oculta ese div cuando el elemento de detalles no tiene la clase abierta.

$ ('detalles: no (.open) resumen'). hermanos ('div'). hide ();

Cuando se hace clic en el resumen, queremos que se muestre el div oculto y, al contrario, cuando el div está inicialmente abierto, se ocultará..

 summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Para asegurarnos de que esas funciones solo se ejecutarán en los navegadores no compatibles, las envolvemos dentro de esta declaración condicional.

 if ($ ('html'). hasClass ('no-details')) // el código va aquí

Y debajo está el código que tenemos:

 if ($ ('html'). hasClass ('no-details')) var summary = $ ('details details'); summary.siblings (). wrapAll ('
'); $ ('detalles: no (.open) resumen'). hermanos ('div'). hide (); summary.click (function () $ (this) .siblings ('div'). toggle (); $ ('details'). toggleClass ('open');); 

Ahora vamos a probarlo en el navegador; el efecto de alternancia debería haber funcionado en todos los navegadores, lo he comprobado personalmente (hasta Internet Explorer 7).

• Manifestación
• Descargar fuente

Consejos: Alternativamente puedes cambiar el .palanca() con .slideToggle () para crear un efecto de diapositiva. Además, si desea que los detalles se abran inicialmente, puede agregar una clase abierta en el elemento de detalles.

Conclusión

Hemos pasado por todos los pasos para crear una página de producto individual utilizando HTML5, depurando para navegadores no compatibles y replicando el efecto de alternar para el elemento de detalle por nuestra cuenta, así que esperamos que pueda aprender mucho de él..

Sin embargo, soy consciente de que no expliqué todo en detalle en esta publicación, por lo que si desea aclarar algo, no dude en publicar la pregunta en el cuadro de comentarios a continuación..