Técnicas CSS 3.0


/ Published in: CSS
Save to your folder(s)

Si miramos al horizonte empieza a deslumbrar el futuro del CSS, con la salida de CSS3 la vida de los diseñadores web va a mejorar considerablemente y no es para menos, por que con las mejoras que se están acercando ¿quien no se aprovechará de ellas?

Echemosle un vistazo a las que parecen serán las más interesantes.


Copy this code and paste it in your HTML
  1. /* Columnas */
  2. DIV {
  3. width: 400px;
  4. column-count: 4;
  5. column-width: 100px;
  6. column-gap: 10px
  7. column-rule: none;
  8. }
  9.  
  10. /* Multi-background */
  11. .multi {
  12. background: url('http://www.joostdevalk.nl/images/body-top.gif')
  13. top left no-repeat,
  14. url('http://www.joostdevalk.nl/images/banner_fresco.jpg')
  15. top 11px no-repeat,
  16. url('http://www.joostdevalk.nl/images/body-bottom.gif')
  17. bottom left no-repeat,
  18. url('http://www.joostdevalk.nl/images/body-middle.gif')
  19. left repeat-y;
  20. }
  21.  
  22. /*Esquinas redondeadas*/
  23.  
  24. .rounded {
  25. background-color: #ccc;
  26. border-radius: 5px;
  27. border: 1px solid #000;
  28. padding: 10px;
  29. }
  30.  
  31. /* Tablas zebra */
  32.  
  33. tr:nth-child(2n+1) /* represents every odd row of a HTML table */
  34. tr:nth-child(odd) /* same */
  35. tr:nth-child(2n) /* represents every even row of a HTML table */
  36. tr:nth-child(even) /* same */
  37.  
  38. /* Alternate paragraph colours in CSS */
  39. p:nth-child(4n+1) { color: navy; }
  40. p:nth-child(4n+2) { color: green; }
  41. p:nth-child(4n+3) { color: maroon; }
  42. p:nth-child(4n+4) { color: purple; }
  43.  
  44. /* Opacidad */
  45.  
  46. .opac02 { background: rgb(255, 0, 0) ; opacity: 0.2;}
  47. .opac04 { background: rgb(255, 0, 0) ; opacity: 0.4;}
  48. .opac06 { background: rgb(255, 0, 0) ; opacity: 0.6;}
  49. .opac08 { background: rgb(255, 0, 0) ; opacity: 0.8;}
  50. .opac10 { background: rgb(255, 0, 0) ; opacity: 1;}
  51.  
  52. /* Resize */
  53.  
  54. iframe,object[type^="text/"],
  55. object[type$="+xml"],object[type="application/xml"]
  56. {
  57. overflow:auto;
  58. resize:both;
  59. }
  60.  
  61. /* Media paramétrizados */
  62.  
  63. @media all and (min-width: 640px) {
  64. div.example#min-width {
  65. background-color: #0f0;
  66. }
  67. }
  68. @media screen and (max-width: 1100px) {
  69. div.example#max-width {
  70. background-color: #0f0;
  71. }
  72. }

URL: http://www.anieto2k.com/2007/08/22/tecnicas-css3-que-estoy-deseando-que-lleguen-a-mis-manos/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.