Tema: Un efecto muy llamativo, ¿Cómo hacerlo?
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 17/06/2011, 11:21
ambigus
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 15 años, 7 meses
Puntos: 1
Respuesta: Un efecto muy llamativo, ¿Cómo hacerlo?
Hola Pinty,

Agradesco mucho tu ayuda. Te envio el código CSS de los DIVs. y también el código CSS global.

CSS de los DIVs:

Este DIV:

Código: 
<div id="redondeado1">
<div id="windows"><img id="imagen1" width="244" height="138" alt="imagen" src="video_1.jpg" onmouseover="cambiarImagen1();" onmouseout="cambiarImagen2();"/>
Tiene este CSS:

Código CSS: 
Ver original
  1. #redondeado1{
  2. -khtml-border-radius: 10px;
  3. -ms-border-radius: 10px;
  4. -o-border-radius: 10px;
  5. -moz-border-radius: 10px;
  6. -webkit-border-radius: 10px;
  7. border-radius: 10px;
  8. background-color:#FFF;
  9. margin-left:50px;
  10. margin-right:30px;
  11. padding-right: 0px;
  12. height:295px;
  13. width:260px;
  14. padding-left: 15px;
  15. padding-top: 10px;
  16. } 
  17.  
  18. #windows {
  19.  
  20. float:left;
  21. height:150px;
  22. width:244px;
  23. padding-left: 0px;
  24. padding-right: 5px;
  25. padding-top: 0px;
  26. padding-bottom: 0px;
  27. margin-left:0px;
  28. background:url(video_1.1.jpg) no-repeat;
  29. }


CSS Global:

Código CSS: 
Ver original
  1. <style type="text/css">
  2.  
  3. #fondo {
  4.  
  5. height:425px;
  6. width:893px;
  7. background:url(http://extremegamex1.gofreeserve.com/aprendiendocss/images/background_post.png) no-repeat;
  8. margin-top: 5px;
  9. margin: 0 auto;
  10.  
  11. }
  12.  
  13.  
  14.  
  15.  
  16. #windows {
  17.  
  18. float:left;
  19. height:150px;
  20. width:244px;
  21. padding-left: 0px;
  22. padding-right: 5px;
  23. padding-top: 0px;
  24. padding-bottom: 0px;
  25. margin-left:0px;
  26. background:url(video_1.1.jpg) no-repeat;
  27. }
  28.  
  29. #ram {
  30.  
  31. float:left;
  32. height:55px;
  33. width:55px;
  34. padding-left: 0px;
  35. padding-right: 5px;
  36. padding-top: 10px;
  37. padding-bottom: 0px;
  38.  
  39. }
  40.  
  41. #cpu {
  42.  
  43. float:left;
  44. height:55px;
  45. width:55px;
  46. padding-left: 0px;
  47. padding-right: 5px;
  48. padding-top: 8px;
  49. padding-bottom: 0px;
  50.  
  51. }
  52.  
  53. #gpu {
  54.  
  55.  
  56. height:60px;
  57. width:250px;
  58. padding-left: 60px;
  59. padding-right: 5px;
  60. padding-top: 3px;
  61. padding-bottom: 0px;
  62. background:url(gpu_icon.png) no-repeat;
  63.  
  64. }
  65.  
  66. #hd {
  67.  
  68.  
  69. height:40px;
  70. width:250px;
  71. padding-left: 60px;
  72. padding-right: 5px;
  73. padding-top: 12px;
  74. padding-bottom: 0px;
  75. background:url(hard_disk_icon.png) no-repeat;
  76.  
  77. }
  78.  
  79. #menu ul{
  80. list-style-type: none;
  81. }
  82.  
  83. #menu li{
  84. width:150px;
  85. height:38px;
  86. font:14px Verdana;
  87. background:url(http://extremegamex1.gofreeserve.com/aprendiendocss/images/boton_menu_1.png) no-repeat center;
  88. text-align:center;
  89. color: #FFF;
  90. line-height:38px;
  91. display: inline-block;
  92. margin: 0 4px;
  93. }
  94.  
  95. #redondeado1{
  96. -khtml-border-radius: 10px;
  97. -ms-border-radius: 10px;
  98. -o-border-radius: 10px;
  99. -moz-border-radius: 10px;
  100. -webkit-border-radius: 10px;
  101. border-radius: 10px;
  102. background-color:#FFF;
  103. margin-left:50px;
  104. margin-right:30px;
  105. padding-right: 0px;
  106. height:295px;
  107. width:260px;
  108. padding-left: 15px;
  109. padding-top: 10px;
  110. } 
  111.  
  112. #redondeado2{
  113. -khtml-border-radius: 10px;
  114. -ms-border-radius: 10px;
  115. -o-border-radius: 10px;
  116. -moz-border-radius: 10px;
  117. -webkit-border-radius: 10px;
  118. border-radius: 10px;
  119. background-color:#FFF;
  120. margin-left:50px;
  121. margin-right:30px;
  122. padding-right: 0px;
  123. height:295px;
  124. width:260px;
  125. padding-left: 15px;
  126. padding-top: 10px;
  127. } 
  128.  
  129. #titulo1{
  130. background:url(http://extremegamex1.gofreeserve.com/aprendiendocss/images/descripcion_bar.png) no-repeat;
  131. margin-left:90px;
  132. margin-right:30px;
  133. padding-right: 5px;
  134. margin-top:0px;
  135. height:30px;
  136. width:180px;
  137. padding-left: 10px;
  138. padding-top: 7px;
  139. font:15px Verdana;
  140. color: white;
  141. text-align:center;
  142.  
  143. } 
  144.  
  145. #titulo2{
  146. background:url(http://extremegamex1.gofreeserve.com/aprendiendocss/images/descripcion_bar.png) no-repeat;
  147. margin-left:90px;
  148. margin-right:30px;
  149. padding-right: 5px;
  150. margin-top:0px;
  151. height:30px;
  152. width:180px;
  153. padding-left: 10px;
  154. padding-top: 7px;
  155. font:15px Verdana;
  156. color: white;
  157. text-align:center;
  158.  
  159. } 
  160.  
  161.  
  162. #requisitos_minimos{
  163.  
  164. float:left;
  165. margin-left:15px;
  166. margin-right:15px;
  167. padding-right: 5px;
  168. margin-top:0px;
  169. height:300px;
  170. width:300px;
  171. padding-left: 0px;
  172. padding-top: 0px;
  173.  
  174. } 
  175.  
  176. #requisitos_recomendados{
  177.  
  178. float:left;
  179. margin-left:15px;
  180. margin-right:0px;
  181. padding-right: 5px;
  182. margin-top:0px;
  183. height:300px;
  184. width:350px;
  185. padding-left: 0px;
  186. padding-top: 0px;
  187.  
  188. } 
  189.  
  190. .simple {text-decoration: none; color:#FFF}
  191.  
  192. </style>

Quisiera detallar, que estoy tratando de no utilizar tablas, porque me digieron que era "Arcaico".

Gracias de antemano,
Espero una pronta respuesta. :)