Advanced Search

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.

Expand | Embed | Plain Text

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.