Tema: Editar CSS de un Coverflow
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 14/12/2013, 21:44
Avatar de eCharles
eCharles
 
Fecha de Ingreso: febrero-2009
Ubicación: Monterrey
Mensajes: 8
Antigüedad: 15 años, 10 meses
Puntos: 0
Respuesta: Editar CSS de un Coverflow
Ya se que tengo que hacerle un class, por eso dije que me gustaría llamarle "navegacion-productos" o solo "productos" da igual, pero....
No se cómo hacerlo, segun leo en el libro que me enviaste el ejemplo es muy básico, no se cómo aplicarlo a tooodo el css

¿así, y ya? Pues ¡claro que no!

???
Código CSS: 
Ver original
  1. .productos
  2. {
  3.     height: 160px;
  4.     margin: 60px auto;
  5.     perspective: 500px;
  6.     -webkit-perspective: 500px;
  7.     -moz-perspective: 500px;
  8.     -ms-perspective: 500px;
  9.     -o-perspective: 500px;
  10.     width: 525px;
  11. }
  12.  
  13. Ó
  14.  
  15. .productos
  16. ul
  17. {
  18.     height: 160px;
  19.     margin: 60px auto;
  20.     perspective: 500px;
  21.     -webkit-perspective: 500px;
  22.     -moz-perspective: 500px;
  23.     -ms-perspective: 500px;
  24.     -o-perspective: 500px;
  25.     width: 525px;
  26. }
  27.  
  28. .productos
  29. ul li {
  30.     background-color: #222;
  31.     display: inline-block;
  32.     margin-right: -25px;
  33.     box-sizing: border-box;
  34.     -moz-box-sizing: border-box;
  35.     -webkit-box-sizing: border-box;
  36.     -o-box-sizing: border-box;
  37.     height: 165px;
  38.     list-style: none;
  39.     text-align: center;
  40.     transform: rotateY(45deg);
  41.     -webkit-transform: rotateY(45deg);
  42.     -moz-transform: rotateY(45deg);
  43.     -o-transform: rotateY(45deg);
  44.     transition: all ease .5s;
  45.     -webkit-transition: all ease .5s;
  46.     -moz-transition: all ease .5s;
  47.     -o-transition: all ease .5s;
  48.     padding: 10px;
  49.     position: relative;
  50.     width: 112px;
  51.     z-index: 50;
  52. }


????????????????????????????


Código CSS: 
Ver original
  1. .productos
  2. ul
  3. {
  4.     height: 160px;
  5.     margin: 60px auto;
  6.     perspective: 500px;
  7.     -webkit-perspective: 500px;
  8.     -moz-perspective: 500px;
  9.     -ms-perspective: 500px;
  10.     -o-perspective: 500px;
  11.     width: 525px;
  12. }
  13.  
  14. ul li {
  15.     background-color: #222;
  16.     display: inline-block;
  17.     margin-right: -25px;
  18.     box-sizing: border-box;
  19.     -moz-box-sizing: border-box;
  20.     -webkit-box-sizing: border-box;
  21.     -o-box-sizing: border-box;
  22.     height: 165px;
  23.     list-style: none;
  24.     text-align: center;
  25.     transform: rotateY(45deg);
  26.     -webkit-transform: rotateY(45deg);
  27.     -moz-transform: rotateY(45deg);
  28.     -o-transform: rotateY(45deg);
  29.     transition: all ease .5s;
  30.     -webkit-transition: all ease .5s;
  31.     -moz-transition: all ease .5s;
  32.     -o-transition: all ease .5s;
  33.     padding: 10px;
  34.     position: relative;
  35.     width: 112px;
  36.     z-index: 50;
  37. }
  38.  
  39. li p {
  40.     color:#ddd;
  41.     font-size: .9em;
  42.     margin: 4px 0 13px;
  43. }
  44.  
  45. ul li a.boton {
  46.     background-color: #222222;
  47.     border-radius: 2px 2px 2px 2px;
  48.     bottom: 5px;
  49.     color: #FFFFFF;
  50.     font-size: 1em;
  51.     padding: 0.5em;
  52.     right: 5px;
  53.     text-align: center;
  54.     text-decoration: none;
  55.     transition: background-color 1s ease 0s;
  56.     -webkit-transition: background-color 1s ease 0s;
  57.     -moz-transition: background-color 1s ease 0s;
  58.     -o-transition: background-color 1s ease 0s;
  59. }
  60. ul li a.boton:hover {
  61.    color: #222222;
  62. }
  63.  
  64. ul li img {
  65.     height: auto !important;
  66.     width: 93px !important;
  67. }
  68.  
  69. ul li:nth-child(3) {
  70.     background-color: #222222;
  71.     transform: rotateY(0deg) scale(1.22);
  72.     -webkit-transform: rotateY(0deg) scale(1.22);
  73.     -moz-transform: rotateY(0deg) scale(1.22);
  74.     -o-transform: rotateY(0deg) scale(1.22);
  75.     z-index: 55;
  76. }
  77.  ul li:nth-child(3) a.boton {
  78.     background-color: #0099CC;
  79. }
  80.  ul li:nth-child(3) ~ li {
  81.     transform: rotateY(-45deg);
  82.     -webkit-transform: rotateY(-45deg);
  83.     -ms-transform: rotateY(-45deg);
  84.     -o-transform: rotateY(-45deg);
  85.     -moz-transform: rotateY(-45deg);
  86. }
  87.  ul li:last-child,  ul li:first-child {
  88.     z-index: 45;
  89. }
  90.  ul:hover li:not(:hover) {
  91.     background-color: #111111;
  92.     transform: rotateY(45deg);
  93.     -webkit-transform: rotateY(45deg);
  94.     -o-transform: rotateY(45deg);
  95.     -moz-transform: rotateY(45deg);
  96.     -ms-transform: rotateY(45deg);
  97. }
  98.  ul:hover li a.boton {
  99.     background-color: #222222;
  100. }
  101.  ul li:hover,  ul li:first-child:hover,  ul li:nth-child(3) ~ li:hover {
  102.      background-color: #222;
  103.      transform: rotateY(0) scale(1.22);
  104.      -webkit-transform: rotateY(0) scale(1.22);
  105.      -moz-transform: rotateY(0) scale(1.22);
  106.      -ms-transform: rotateY(0) scale(1.22);
  107.      -o-transform: rotateY(0) scale(1.22);
  108.      z-index: 60;
  109. }
  110.  ul:hover li:hover a.boton {
  111.     background-color: #0099CC;
  112. }
  113.  ul:hover li:hover ~ li {
  114.     transform: rotateY(-45deg);
  115.     -webkit-transform: rotateY(-45deg);
  116.     -ms-transform: rotateY(-45deg);
  117.     -o-transform: rotateY(-45deg);
  118.     -moz-transform: rotateY(-45deg);
  119. }
Última edición por pzin; 15/12/2013 a las 02:47 Razón: formato código