| Loop icons | |
| Contiene 106 íconos de 16x16 en formato PNG. descargar | |
| Windows phone | |
![]() | Contiene 1482 íconos de 48x48 en formato PNG. descargar |
![]() | |
TinyScroller: Simple y personalizable |
<script type='text/javascript'>
//<![CDATA[
var TINY={};
function T$(id){return document.getElementById(id)}
function T$$$(){return document.all?1:0}
TINY.scroller=function(){
return{
init:function(a,c,b,s,d){
a=T$(a); a.c=c; a.s=s; c=T$(c); b=T$(b); s=T$(s); a.n=d||0;
b.style.display='block'; a.style.overflow='hidden';
var h=a.offsetHeight, t=c.offsetHeight;
if(t<h){
b.style.display='none'
}else{
a.m=h-t; a.d=t/h; s.style.height=(h*(h/t))+'px'; s.style.top=b.style.top=0;
s.onmousedown=function(event){TINY.scroller.st(event,a.id); return false};
s.onselectstart=function(){return false}
}
a.l=b.offsetHeight-s.offsetHeight
},
st:function(e,f){
var a=T$(f), s=T$(a.s); a.bcs=TINY.cursor.top(e); a.bct=parseInt(s.style.top);
if(a.mv){this.sp(f)}
a.mv=function(event){TINY.scroller.mv(event,f)};
a.sp=function(){TINY.scroller.sp(f)};
if(T$$$()){
document.attachEvent('onmousemove',a.mv); document.attachEvent('onmouseup',a.sp)
}else{
document.addEventListener('mousemove',a.mv,1); document.addEventListener('mouseup',a.sp,1)
}
if(a.d){s.className+=' '+a.n}
},
mv:function(e,f){
var a=T$(f), m=TINY.cursor.top(e)-a.bcs+a.bct, s=T$(a.s), c=T$(a.c);
if(m>=0&&m<a.l){
s.style.top=m+'px'; c.style.top=(m*-1*a.d)+'px'
}else if(m<0){
s.style.top=0; c.style.top=0
}else if(m>a.l){
s.style.top=a.l+'px'; c.style.top=a.m+'px'
}
},
sp:function(f){
var a=T$(f), s=T$(a.s); if(a.d){s.className=s.className.replace(' '+a.n,'')}
if(T$$$()){
document.detachEvent('onmousemove',a.mv); document.detachEvent('onmouseup',a.sp)
}else{
document.removeEventListener('mousemove',a.mv,1); document.removeEventListener('mouseup',a.sp,1)
}
a.mv=0;
}
}
}();
TINY.cursor=function(){
return{
top:function(e){
return T$$$()?window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop:e.clientY+window.scrollY
}
}
}();
//]]>
</script><div id="ejemplo-scroll" class="scroll">
<div id="ejemplo-scrollcontent" class="scrollcontent">
....... acá pondremos nuestro contenido .......
</div>
<div id="ejemplo-scrollbar" class="scrollbar">
<div id="ejemplo-scroller" class="scroller"></div>
</div>
</div><script type="text/javascript">TINY.scroller.init('ejemplo-scroll','ejemplo-scrollcontent','ejemplo-scrollbar','ejemplo-scroller','buttonclick');</script><style>
/* las reglas genéricas */
.scroll { /* el contenedor */
overflow: auto;
position: relative;
}
.scrollcontent { /* el contenido */
position: absolute;
z-index: 200;
}
.scrollbar { /* la barra de desplazamiento es una imagen */
background:url(URL_scroll-bg.gif);
display: none;
float: right;
position: relative;
width: 15px;
z-index: 100;
}
.scroller { /* el botón de desplazamiento también es una imagen */
background-color: #CCC;
background-image: url(URL_scroll-arrows.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
cursor: pointer;
position: absolute;
top: 0;
width: 15px;
}
.buttonclick { background-color:#BBB; }
/* y defino los anchos, altos y otros detalles de cada uno de elllos */
#ejemplo-scroll { /*
background-color: #000;
margin: 0 auto;
height: 200px; /* el ancho */
width: 300px; /* el alto */
}
#ejemplo-scrollcontent {
width:275px; /* el ancho del contenedor menos el ancho de la barra de desplazamiento */
}
#ejemplo-scrollbar {
height: 200px; /* el mismo alto que el contenedor */
}
</style>#otro-scroll{
background-color: #222;
border: 2px solid #000;
height: 270px;
margin: 0 auto;
outline: 1px solid #666;
width: 600px;
}
#otro-scroll{width: 575px;}
#otro-scroll{height: 270px; }
El atributo required |

Aunque la verificación final de los datos enviados desde un formulario debe ser hecha en el servidor que los procesará, siempre es bueno realizar una validación previa con JavaScript y así reducir los accesos y evitar el envío de datos vacíos o nulos.
Agregar fullscreen a distintos elementos |

Mostrar contenido en pantalla completa no es algo exclusivo de los videos incrustados ya que puede hacerse sobre cualquier otro contenido aunque siempre veremos la advertencia del navegador que nos avisa que esta opción está en uso y que podemos volver atrás utilizando la tecla ESC.
simpleWeather: El tiempo en el blog con jQuery |
$.simpleWeather({
location: 'xxxxxxxxxxx',
unit: 'c',
success: function(weather) { ... },
error: function(error) { ... }
});<script type="text/javascript">
//<![CDATA[
$(function() {
$.simpleWeather({
location: 'xxxxxxxxxxx',
unit: 'c',
success: function(weather) {
html = '<h2>'+weather.city+'</h2>';
html += '<img src="'+weather.image+'"/>';
html += '<p>'+weather.temp+'° '+weather.units.temp+'<span>'+weather.currently+'</span></p>';
$("#weather").html(html);
},
error: function(error) {
$("#weather").html('<p>'+error+'</p>');
}
});
});
//]]>
</script><div id="weather"></div>
<style>
#weather {
background-color: #456;
border: 4px solid #ABC;
overflow: hidden;
padding: 10px 20px 0;
position: relative;
text-align: center;
width: 185px;
}
#weather h2 {
color: #DEF;
font-family: Century Gothic;
font-size: 28px;
font-weight: normal;
letter-spacing: -3px;
margin: 0;
text-align: center;
}
#weather img {
margin-top: 10px;
}
#weather p {
color: #DEF;
font-family: Times New Roman;
font-size: 48px;
left: 80px;
letter-spacing: -6px;
margin: 0;
position: absolute;
top: 140px;
}
#weather p span {
color: #ABC;
display: block;
font-size: 20px;
letter-spacing: 0;
text-transform: lowercase;
}
</style>
Bordes, listas, el primero y el último |
<div id="demobordes">
<ul>
<li>el primer item</li>
<li>el segundo item</li>
<li>el tercer item</li>
<li>el último item</li>
</ul><style>
#demobordes li {
background-color: #000;
border-bottom: 2px dotted #ABC;
border-top: 2px dotted #ABC;
color: #888;
padding: 5px 10px;
}
</style>#demobordes li {
.......
border-bottom: 2px dotted #ABC;
}
#demobordes li:first-child { border-top: 2px dotted #ABC; }#demobordes li {
.......
border-top: 2px dotted #ABC;
}
#demobordes li:last-child { border-bottom: 2px dotted #ABC; }
Una curiosidad: Logos de GMail con CSS3 |
.gmail-logo, .gmail-logo *, .gmail-logo *:before, .gmail-logo *:after{margin:0;padding:0;background:transparent;border:0;outline:0;display:block;font:normal normal 0/0 serif;}
.gmail-logo{margin:0 auto;background:rgb(201, 44, 25);width:600px;height:400px;border-top:4px solid rgb(201, 44, 25);border-bottom:4px solid rgb(201, 44, 25);border-radius:10px;}
.gmail-logo .gmail-box{overflow:hidden;float:left;width:440px;height:400px;margin:0 0 0 80px;background:white;border-radius:5px;}
.gmail-logo .gmail-box:before{position:relative;content:'';z-index:1;background:white;float:left;width:320px;height:320px;border:100px solid rgb(201, 44, 25);margin:-310px 0 0 -40px;border-radius:10px;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);}
.gmail-logo .gmail-box:after{content:'';float:left;width:360px;height:360px;border:2px solid rgb(201, 44, 25);margin:10px 0 0 40px;-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}
.gmail-logo:after{content:'';position:relative;z-index:2;content:'';float:left;margin-top:-404px;width:600px;height:408px;display:block;background:-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.1)));}
.gmail-logo:hover{background:#313131;border-color:#313131;}
.gmail-logo:hover .gmail-box:before{border-color:#313131;}
.gmail-logo:hover .gmail-box:after{border-color:#313131;border-bottom-color:#fff;border-right-color:#fff;}
Sólo son ejemplos que muestran la versatilidad de estas nuevas propiedades y además, en este caso, Irham Kendeni, que es su desarrollador, se ha esmerado en darnos as explicaciones paso a paso lo que permite tratar de entender la idea y de ese modo, poder aplicar esas cosas ara resolver nuestras propias necesidades que, seguramente, serán mucho más modestas.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 |
|
