| Extreme grunge | |
![]() | Contiene 12 íconos de 256x256, en formato PNG. descargar |
![]() | |
| Pink ribbon | |
![]() | Contiene 24 128x128, 256x256 y 512x51, en formato PNG. descargar |
![]() | |
El atributo placeholder |
<input type="text" value="" />
input.demos[type=text] {
background: #FFF;
border: 2px solid Chocolate;
border-radius: 4px;
color: #888;
font-size: 20px;
height: 32px;
margin: 10px 0;
padding: 0 10px;
text-align: center;
width: 300px;
}<input type="text" value="el texto por defecto" />
<input type="text" value="el texto por defecto" onfocus="if (this.value=='el texto por defecto') this.value='';" onblur="if (this.value=='') this.value='el texto por defecto';" />
<input type="text" placeholder="el texto por defecto" value="" />
input.demos:-moz-placeholder {
background: #DDD;
color: Chocolate;
font-size: 16px;
font-style: italic;
font-weight: bold;
letter-spacing: 3px;
}
inputdemos::-webkit-input-placeholder {
background: #DDD;
color: Chocolate;
font-size: 16px;
font-style: italic;
font-weight: bold;
letter-spacing: 3px;
}
input.demos:-ms-input-placeholder {
background: #DDD;
color: Chocolate;
font-size: 16px;
font-style: italic;
font-weight: bold;
letter-spacing: 3px;
}
Un script para manejar listas |
<script src='URL_list.min.js' type='text/javascript'></script>
<div id="miprimerejemplo">
<span class="sort" rel="nombre"> NOMBRE </span>
<span class="sort" rel="apellido"> APELLIDO </span>
<ul class="list">
<li>
<span class="nombre"> texto 1 </span>
<span class="apellido"> texto 2 </span>
</li>
<li>
<span class="nombre"> texto 3 </span>
<span class="apellido"> texto 4 </span>
</li>
.......
</ul>
</div><script>
var opciones = {valueNames: [ "nombre","apellido" ]};
var featureList = new List("miprimerejemplo", opciones);
</script><div id="otralista">
<span>buscar</span> <input class="search" />
<ul class="list">
<li><a class="orden" href="URL_1"> título 1</a></li>
<li><a class="orden" href="URL_2"> título 2</a></li>
<li><a class="orden" href="URL_3"> título 3</a></li>
......
</ul>
</div>
<script>
var opciones = {valueNames: [ "orden" ]};
var featureList = new List("otralista", opciones);
</script>
Jugando con :after y :before |

before es lo que está antes , after es lo que está después ... los pseudo-elementos ::after y ::before resultan ser muy sencillos de manejar y tener infinitas posibilidades ya que nos permiten agregar contenido utilizando el CSS.
jFlip: Una vuelta de hoja |
<ul id="jflipDEMO"> <li><img src="URL_IMAGEN_1" /></li> <li><img src="URL_IMAGEN_2" /></li> <li><img src="URL_IMAGEN_3" /></li> <!-- seguimos poniendo cuantas imágenes se nos ocurra --> </ul>
<script>
$("#jflipDEMO").jFlip(300,300,{background:"#903941",cornersTop:true,scale:"fit"});
</script>$("#jflipDEMO").jFlip(350,350,{background:"#903941",cornersTop:false,scale:"fill"});
La etiqueta CANVAS (funciones básicas) |
<canvas id="nombre" width="valor" height="valor"></canvas>
<canvas id="nombre" width="valor" height="valor"> ... aquí hay algo ... </canvas>
<!--[if IE]><script src="URL_excanvas.js"></script><![endif]-->var miCANVAS = document.getElementById("nombre");
if (miCANVAS.getContext) {
var canvas = miCANVAS.getContext("2d");
// aquí lo manipularemos
} else {
// advertencia : el navegador no soporta canvas
}var miCANVAS = document.getElementById("nombre");
if (miCANVAS.getContext) {
var canvas = miCANVAS.getContext("2d");
canvas.fillStyle = "#FFF";
canvas.fillRect (0,0,300,200);
} else {
// advertencia : el navegador no soporta canvas
}
<script type="text/javascript">
function iniCANVAS(cual){
var miCANVAS = document.getElementById(cual);
if (miCANVAS.getContext) {
var canvas=miCANVAS.getContext("2d");
canvas.fillStyle="#FFF";
canvas.fillRect (0,0,300,200);
}
}
function drawSQUARES(cual,x1,y1,w,h,c) {
var miCANVAS = document.getElementById(cual);
if (miCANVAS.getContext) {
var canvas=miCANVAS.getContext("2d");
canvas.fillStyle=c;
canvas.fillRect(x1,y1,w,h);
}
}
function drawRECS(cual,x1,y1,w,h,c) {
var miCANVAS = document.getElementById(cual);
if (miCANVAS.getContext) {
var canvas=miCANVAS.getContext("2d");
canvas.fillStyle=c;
canvas.strokeRect(x1,y1,w,h);
}
}
</script>
<canvas id="demo" width="300" height="200"> <img src="URL_imagenAlterna" /> </canvas>
<script>iniCANVAS('demo')</script>
<button type="button" onclick="drawSQUARES('demo',10,20,50,50,'#F00');"> rectangulo 1 </button>
<button type="button" onclick="drawSQUARES('demo',30,100,70,50,'#00F');"> rectangulo 2 </button>
<button type="button" onclick="drawRECS('demo',50,10,50,50,'#000');"> rectangulo 3 </button>
<button type="button" onclick="drawRECS('demo',160,110,70,50,'#000');"> rectangulo 4 </button>
Las tablas que no son tablas siguen siendo tablas |
| Columna 1 | Columna 2 | Columna 3 |
|---|---|---|
| Fila 1 Celda 1 | Fila 1 Celda 2 | Fila 1 Celda 3 |
| Fila 2 Celda 1 | Fila 2 Celda 2 | Fila 2 Celda 3 |
| Fila 3 Celda 1 | Fila 3 Celda 2 | Fila 3 Celda 3 |
<table>
<caption>esta es una tabla que es tabla</caption>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
<tr>
<td>Fila 1 Celda 1</td>
<td>Fila 1 Celda 2</td>
<td>Fila 1 Celda 3</td>
</tr>
.......
</table><style>
#tabla {display: table;}
#tabla .caption {display: table-caption}
#tabla .fila {display: table-row;}
#tabla .celda {display: table-cell;}
#tabla .filatitulo {display: table-row;}
#tabla .filatitulo .celda {display: table-cell;}
</style>
<div id="tabla">
<div class="caption">una tabla que no es tabla</div>
<div class="filatitulo">
<span class="celda">Columna 1</span>
<span class="celda">Columna 2</span>
<span class="celda">Columna 3</span>
</div>
<div class="fila">
<span class="celda">Fila 1 Celda 1</span>
<span class="celda">Fila 1 Celda 2</span>
<span class="celda">Fila 1 Celda 3</span>
</div>
.......
</div>Buenos Aires
Argentina
Nacido en el tercer mundo. Un santo varón. Buenos Aires. Los elefantes. Las golondrinas de Plaza de Mayo. Me chupo el dedo.
El tiempo es veloz. ¿No ves que ya no somos chiquitos? Despedida de la infancia. Todo es efímero. Juguetes perdidos. Dime quién me lo robó. Aprendizaje.
Soy un hippie. Rutas argentinas. Sobredosis de TV. Raros peinados nuevos. Más de cien mentiras. Delirium tremens.
Ciudad de pobres corazones. El karma de vivir al sur. Mundo de quimeras. Oh Dios, ¿Qué puedo hacer?
Cuando era más joven. Los mayores del mundo. Botas locas. Rejas electrificadas. Cerca de la revolución. Contra todos los males de este mundo. La casa desaparecida. Tumbas de la gloria. Vencedores vencidos. Carguen, apunten, fuego. Estás frito angelito. A lo mejor aún te acuerdas.
Ah, te vi entre las luces. Muchacha. Amor se llama el juego. Juego de seducción. Mi genio amor. Prométeme que nunca me dirás adiós. Pequeñas delicias de la vida conyugal. Toda la vida tiene música hoy. Es hora de levantare, querido (dormiste bien?).
Resumiendo.
Mi sueño de hoy. La sed verdadera. La búsqueda de la estrella. Todos juntos. ¡Ah! Basta de pensar.
Esto es to-to-todo amigos.
| CONTRAER ARCHIVOS |
|
