advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

j_junyent on 12/01/07


Tagged

css 30


Versions (?)


Who likes this?

5 people have marked this snippet as a favorite

iTony
alvaroisorna
SpinZ
copyleft
scyfox


Técnicas CSS 3.0

Published in: CSS 

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

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.


Plain TextExpand 
  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. }

Report this snippet 

You need to login to post a comment.