CSS Técnicas CSS 3.0

Posted 2021-05-23

/* Columnas */
DIV {
	width: 400px;
	column-count: 4;
	column-width: 100px;
	column-gap: 10px
	column-rule: none;
}

/* Multi-background */
.multi { 
	background: url('http://www.joostdevalk.nl/images/body-top.gif')
	top left no-repeat,
	url('http://www.joostdevalk.nl/images/banner_fresco.jpg')
	top 11px no-repeat,
	url('http://www.joostdevalk.nl/images/body-bottom.gif')
	bottom left no-repeat,
	url('http://www.joostdevalk.nl/images/body-middle.gif')
	left repeat-y;
}

/*Esquinas redondeadas*/

.rounded {	
	background-color: #ccc;
    border-radius: 5px;
    border: 1px solid #000;
    padding: 10px;
}

/* Tablas zebra */

tr:nth-child(2n+1) /* represents every odd row of a HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n)   /* represents every even row of a HTML table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; } 

/* Opacidad */

.opac02 { background: rgb(255, 0, 0) ; opacity: 0.2;}
.opac04 { background: rgb(255, 0, 0) ; opacity: 0.4;}
.opac06 { background: rgb(255, 0, 0) ; opacity: 0.6;}
.opac08 { background: rgb(255, 0, 0) ; opacity: 0.8;}
.opac10 { background: rgb(255, 0, 0) ; opacity: 1;}

/* Resize */

iframe,object[type^="text/"],
object[type$="+xml"],object[type="application/xml"]
{
  overflow:auto;
  resize:both;
}

/* Media paramétrizados  */

@media all and (min-width: 640px) {
	div.example#min-width {
		background-color: #0f0;
	}
}
@media screen and (max-width: 1100px) {
	div.example#max-width {
		background-color: #0f0;
	}
}