You are here
Ejemplo de página de producto con HTML5 y CSS3 Sin categoría 

Ejemplo de página de producto con HTML5 y CSS3

Ejemplo de página de producto con HTML5 y CSS3

En este post, vamos a trabajar en un proyecto de ficción, creando una sola página de producto para ofrecer el iPhone 4S, y en este proyecto en el que también se van a poner en práctica los métodos que hemos discutido en los artículos anteriores; el <detalles> elemento y el selector de negación .

Ejemplo de página de producto con HTML5 y CSS3
Ejemplo de página de producto con HTML5 y CSS3

Empecemos.

El marcado HTML5

En primer lugar, tenemos que crear un html documento con la siguiente línea de código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
< Div clase = "producto" >
  < Encabezado >
    < Hgroup >
      < H1 > Apple iPhone 4 16GB - </ h1 >
      < H4 > El iPhone más sorprendente aún. </ H4 >
    </ Hgroup >
  </ Header >
  < Cifra >
    < Img src = " http://media02.hongkiat.com/html5-single-product-page/iphone4s-3d.png " >
  </ Figura >
  < Sección >
  < P > El chip A5 de doble núcleo más rápido. La cámara de 8MP con todo nueva óptica y grabación de vídeo HD de 1080p. Y la introducción de Siri. Es el iPhone más sorprendente aún. </ P >
  < Detalles >
   < Resumen > Características del producto </ resumen >
      < Ul >
        < Li > cámara de 8 mega píxeles con grabación de vídeo de 1080p </ li >
        < Li > Siri Asistente de voz </ li >
        < Li > iCloud </ li >
        < Li > Aire Imprimir </ li >
        < Li > pantalla Retina </ li >
        < Li > Foto y vídeo geotagging </ li >
      </ Ul >
  </ Detalles >
  < Botón > Compra Ya </ botón >
  </ Sección >
</ Div >

Utilizamos varias nuevas etiquetas de la especificación HTML 5, como la.Cabecera , hgroup , la figura , la sección , y uno que hemos discutido antes; la información y resumen de la etiqueta.

Sin embargo, no vamos a profundizar en estas etiquetas, no porque no estamos dispuestos a, sino que estos son los temas básicos que se pueden encontrar fácilmente en otros lugares. Por lo tanto, si usted es realmente nuevo en HTML 5, recomiendo que leas las siguientes referencias de esas etiquetas; que les han explicado exhaustivamente:

  • Hablemos de Semántica
  • El elemento de cabecera HTML5
  • El elemento hgroup
  • HTML5 etiqueta Referencia

Ahora vamos a ver la primera aparición de nuestra página.

Ejemplo de página de producto con HTML5 y CSS3
Ejemplo de página de producto con HTML5 y CSS3

Bueno, parece razonable y sin ningún estilo. En la parte superior se encuentra la cabecera, y luego viene la sección de la imagen, descripción y, por último, el botón ‘Comprar ahora’. Ahora, vamos a perk hasta esta página.

los Estilos

Vamos a empezar por la normalización de todos los estilos predeterminados mediante esta hoja de estilo y añadir un gradiente de fondo a la html tag.

1
2
3
4
5
6
7
8
9
10
11
html {
  altura : 100% ;
  fondo : # f3f3f3 ;
  fondo : -moz-linear-gradiente ( parte superior , # f3f3f3 0% , #ffffff 50% );
  fondo : -webkit-degradado (lineal, izquierda superior , izquierda inferior , el color de ventanilla ( 0% , # f3f3f3 ), el color de ventanilla ( 50% , #ffffff ));
  fondo : -webkit-lineal de gradiente ( parte superior , # f3f3f3 0% , #ffffff 50% );
  fondo : -o-lineal de gradiente ( parte superior , # f3f3f3 0% , #ffffff 50% );
  fondo : -ms-lineal-gradiente ( parte superior , # f3f3f3 0% , #ffffff 50% );
  fondo : lineal gradiente ( parte superior , # f3f3f3 0% , #ffffff 50% );
  Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3 ' , endColorstr = " # ffffff' , GradientType = 0 );
}

Recuerde que nuestros elementos de producto están envueltos dentro de undiv con la clase de producto. Así pues, aquí nos gustaría centrar la envoltura y establecer el ancho a ser de aproximadamente 650 píxeles .

1
2
3
4
5
.wrapper {
  ancho : 650 píxeles ;
  margen : auto ;
  padding : 25px 0px ;
}

La sección de encabezado

En la sección de encabezado tenemos dos partidas h1 y h4 , así que vamos a estilo de estos elementos.

1
2
3
4
5
6
7
8
9
10
11
12
h 1 , h 4 {
  font-family : Helvetica Neue, Arial , sans-serif ;
  font-weight : normal de ;
  Margen : 0 ;
}
h 1 {
  font-size : 24pt ;
}
h 4 {
  font-size : 16pt ;
  Color : #aaa ;
}

Y a continuación, añadir un poco de espacio en la parte inferior de la cabeceracon un margen.

1
2
3
{cabecera
  margin-bottom : 20px ;
}

Si nos fijamos en el lado extremo derecho de la cabecera, habría un espacio en blanco mucho en ese lado.

Ejemplo de página de producto con HTML5 y CSS3
Ejemplo de página de producto con HTML5 y CSS3

Así que por qué no nos ponemos también la de Apple logo en ese país.

1
2
3
4
{cabecera
  margin-bottom : 20px ;
  background : url ( '../ http://media02.hongkiat.com/html5-single-product-page/apple.png ' ) no-repeat right center ;
}

La Imagen del producto

A continuación, flotar la imagen a la izquierda y establecer el ancho máximo de la imagen de 350 píxeles .

1
2
3
4
5
6
figura {
  flotador : izquierda ;
}
Figura img {
  max-ancho : 350px ;
}

Dado que la imagen ha sido empujado hacia la izquierda, a continuación, vamos a flotar la sección de descripción a la derecha y ajustar el ancho de 300 px .

1
2
3
4
5
6
7
sección {
  font-family : Tahoma , Arial , sans-serif ;
  line-height : 150% ;
  flotador : la derecha ;
  ancho : 300px ;
  de color : # 333 ;
}

Ahora vamos a ver el resultado hasta el momento.

Ejemplo de página de producto con HTML5 y CSS3
Ejemplo de página de producto con HTML5 y CSS3

Se comienza a verse bien, pero el código de detalles todavía no funciona todavía (excepto en Chrome), así que vamos a estilizar el siguiente botón.

El botón

Para los estilos de botón, vamos a imitar la una de la tienda Apple.com . Y aquí es toda la sintaxis que se necesita para poner en su hoja de estilo para el botón.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
botón {
  fondo : # 36a9ea ;
  fondo : -moz-linear-gradiente ( parte superior , # 36a9ea 0% , # 127fd2 100% );
  fondo : -webkit-degradado (lineal, izquierda superior , izquierda inferior , el color de ventanilla ( 0% , # 36a9ea ), el color de ventanilla ( 100% , # 127fd2 ));
  fondo : -webkit-lineal de gradiente ( parte superior , # 36a9ea 0% , # 127fd2 100% );
  fondo : -o-lineal de gradiente ( parte superior , # 36a9ea 0% , # 127fd2 100% );
  fondo : -ms-gradiente lineal ( arriba , # 36a9ea 0% , # 127fd2 100% );
  fondo : lineal gradiente ( parte superior , # 36a9ea 0% , # 127fd2 100% );
  Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 36a9ea' , endColorstr = '# 127fd2' , GradientType = 0 );
  frontera : 1px sólida # 00599d ;
  Color : #fff ;
  padding : 8px 20px ;
  -webkit-border-radius: 3px ;
  la frontera de radio: 3px ;
  webkit-box-shadow: 0px 1px 1px 0px RGBA ( 0 , 0 , 0 ., 1 ), inserción 0px 1px 0px 0px (RGBA 250 , 250 , 250 ., 3 );
  box-shadow: 0px 1px 1px 0px RGBA ( 0 , 0 , 0 ., 1 ), inserción 0px 1px 0px 0px (RGBA 250 , 250 , 250 ., 3 );
  text-shadow : 0px 1px 1px # 156cc4 ;
  Filtro: dropshadow (color = # 156cc4 , desvx = 0 , offy = 1 );
  font-size : 10pt ;
}
Botón: hover {
  fondo : # 2f90d5 ;
  fondo : -moz-linear-gradiente ( parte superior , # 2f90d5 0% , # 0351b7 100% );
  fondo : -webkit-degradado (lineal, izquierda superior , izquierda inferior , el color de ventanilla ( 0% , # 2f90d5 ), el color de ventanilla ( 100% , # 0351b7 ));
  fondo : -webkit-lineal de gradiente ( parte superior , # 2f90d5 0% , # 0351b7 100% );
  fondo : -o-lineal de gradiente ( parte superior , # 2f90d5 0% , # 0351b7 100% );
  fondo : -ms-lineal-gradiente ( parte superior , # 2f90d5 0% , # 0351b7 100% );
  fondo : lineal gradiente ( parte superior , # 2f90d5 0% , # 0351b7 100% );
  Filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 2f90d5' , endColorstr = '# 0351b7' , GradientType = 0 );
}
botón: activa {
  fondo : # 127fd2 ;
  webkit-box-shadow: inserción 0px 2px 1px 0px RGBA ( 0 , 47 , 117 ., 5 ), 0px 1px 1px 0px RGBA ( 0 , 0 , 0 , 0 );
  box-shadow: inserción 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.

Ejemplo de página de producto con HTML5 y CSS3
Ejemplo de página de producto con HTML5 y CSS3

Problema en Internet Explorer

Como de costumbre IE (Internet Explorer) siempre provoca algunos problemas;si abre esto en cualquier IE inferior a 9, la página se mantendrá labrado-un.

Esto se debe a que Internet Explorer no reconoce los nuevos elementos (sección , de cabecera , etc.) para los estilos que hemos especificado failst aplicar. Por lo tanto, en el siguiente paso vamos a trabajar en la solución de este problema.

Soporte para el navegador de pruebas

En nuestro post anterior, hemos abordado el soporte de los navegadores para el elemento de datos que utiliza este polyfill ; de modo que pudiera trabajar en los navegadores no compatibles. Sin embargo, esta vez vamos a probar diferentes maneras de hacerlo con Modernizr .

Desde su página web oficial, Modernizr es un código abierto biblioteca JavaScript que le ayuda a construir la próxima generación de HTML 5 y CSS 3Accionado sitios web . Técnicamente, Modernizr pondrá a prueba el soporte de los navegadores para ciertos nuevos elementos y características. Si no se proporciona apoyo, a continuación, deben proporcionar un retroceso si se trata de dar diferentes estilos o proporcionar polyfills . En este caso, utilizaremos Modernizr para ayudar a probar los detalles y elemento de resumen.

  1. Ir a Modernizr y proceder a su página de descarga .
  2. En la página de descarga, Modernizr ofrece algunas opciones para configurar la biblioteca, por lo que sólo tiene que seleccionar determinadas funciones que realmente necesita para su sitio web. En este caso, necesitamos:
    • 3.4 HTML5Shiv
    • Añadir Clases CSS, esta función insertará automáticamente las clases en la etiqueta html.
    • la Modernizr.load ,
    • ir a la caja de complementos sociales y seleccionar elem-detalles,
    • En la sección de extensibilidad, seleccione Modernizr.addTest.
  3. Generar y descargar el archivo.
  4. Vincularlo a su html y volver a cargar la página en Internet Explorer. La página debe ahora hemos sido labrado desde Internet Explorer ahora puede reconocer las etiquetas.

Y, si ve la fuente o elemento de inspeccionar, encontrará los detalles no-clase se ha insertado en la etiqueta html; lo que indica que el navegador en el que la vista previa de la página; Actualmente no está apoyando detalles elemento.@@@@ [No puedo entender esta frase. ]

Ejemplo de página de producto con HTML5 y CSS3

Podemos entonces crear un repliegue utilizando esta clase como el gancho, lo que vamos a hacer en el siguiente paso.

el repliegue

En este paso vamos a ofrecer similares detalles funcionalidad elemento para otros navegadores (con exclusión de Chrome). En el post anterior, este paso se realiza de forma automática utilizando este script , pero esta vez vamos a crear por nosotros mismos.

Nota: Sólo la revisión de un poco de nuestro post anterior; el elemento de datos sólo está soportado en el navegador Chrome.

Por lo tanto, vamos a empezar a trabajar en la primera CSS.

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

1
2
3
4
5
resumen {
  cursor : puntero ;
  font-size : 12pt ;
  esquema : 0 ;
}

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

1
2
3
detalles {
  margen : 20px 0px ;
}

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

Nota: Antes de continuar, me he descargado previamente los iconos de esta colección por la fuga , descarga y Sprite en un archivo.

Vamos a añadir un antes pseudo-elemento y adjunte el icono como fondo.Observe que en este punto, la posición de fondo es en la parte superior que mostrará el icono más.

1
2
3
4
5
6
7
8
9
10
detalles> Resumen: Antes de {
  anchura : 16px ;
  altura : 16px ;
  display : inline- bloque ;
  contenido : '' importante! ;
  background : url ( '../ http://media02.hongkiat.com/html5-single-product-page/plus-min.png ' ) no-repeat center top ;
  margin-right : 5px ;
  posición : relativa ;
  top : 2px ;
}

Entonces, cuando el elemento de datos está abierta, la posición de fondo se moverá a la parte inferior que mostrará el icono menos.

1
2
3
4
Detalles [abierta]> Resumen: antes,
details.open> Resumen: Antes de {
  background : url ( '../ http://media02.hongkiat.com/html5-single-product-page/plus-min.png ' ) no-repeat center bottom ;
}

El [abierta] signo es un selector. En este caso, se seleccionará a los detalles atributo abierta en el apoyo navegador.

Por último debemos ocultar la flecha que por defecto se muestra en Chrome.

1
2
3
detalles> Resumen :: - webkit-detalles- marcador {
  pantalla : ninguno ;
}

A continuación, vamos a ver el resultado en un navegador por un tiempo.

Ejemplo de página de producto con HTML5 y CSS3
Ejemplo de página de producto con HTML5 y CSS3

La flecha por defecto ha sido sustituido con nuestro icono, y si lo ves en Chrome ya tendrá un efecto de palanca cuando se hace clic en él; el icono cambiará en consecuencia. Sin embargo, en otros navegadores no pasará nada todavía. Así, en el siguiente paso vamos a tratar de replicar el efecto con jQuery.

El efecto de conmutación con jQuery

Antes de comenzar con la parte jQuery, me gustaría dar las gracias a Ian Devlin por la inspiración , la secuencia de comandos a continuación es en realidad una ligera modificación de la de él.

Muy bien, vamos a crear una variable para almacenar el marcador de resumen.

1
var summary = $ ( 'detalles de síntesis » );

Luego envolvemos todos los elementos relacionados con el resumen de un div .

1
summary.siblings () wrapAll (. '<div> </ div>' );

Y ocultar div que cuando el elemento de datos no tiene la clase abierta.

1
$ ( 'Detalles: no (.open resumen)' ) .siblings ( 'div' ) .hide ();

Cuando se hace clic en el resumen, queremos que el div oculto que se muestra, y lo opuesto, cuando el div es inicialmente abierta, que se oculta.

1
2
3
4
summary.click ( función () {
  $ ( Este ) .siblings ( 'div' ) .toggle ();
  $ ( 'Detalles' ) .toggleClass ( "abierta" );
});

Para asegurarse de que estas funciones sólo se ejecutarán en los navegadores no compatibles, nos envolvemos el interior de esta sentencia condicional.

1
2
3
si ($ ( 'html' ) .hasClass ( 'no-details' )) {
  // El código va aquí
}

Y a continuación es el código que tenemos:

1
2
3
4
5
6
7
8
9
10
11
12
13
si ($ ( 'html' ) .hasClass ( 'no-details' )) {
        
var summary = $ ( 'detalles de síntesis » );
summary.siblings () wrapAll (. '<div class = "slide"> </ div>' );
$ ( 'Detalles: no (.open resumen)' ) .siblings ( 'div' ) .hide ();
summary.click ( función () {
  $ ( Este ) .siblings ( 'div' ) .toggle ();
          $ ( 'Detalles' ) .toggleClass ( "abierta" );
    });
}

Ahora vamos a probar en el navegador; el efecto de palanca debería haber trabajado ahora en todos los navegadores.

Consejos: También puede cambiar el .toggle () con .slideToggle () para crear un efecto deslizante. Además, si desea que el detalle que se abre inicialmente se puede añadir una clase abierta en el elemento de datos.


 Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts