Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas

Cabecera con estilo veraniego

¡Ay que calor hace en agosto! Tomando el sol un ratito tumbado en la playa, se me ocurrio este codigo para decorar el blog. Se trata de un sol animado para que luzca en nuestra cabecera al que le podemos poner un texto y una nube que tambien se mueve de izquierda a derecha sin parar, todo ello realizado con CSS.

ver demo

Si te gusta y quieres ponerlo en tu blog o web para darle un toque veraniego, copia el siguiente codigo y pegalo en tu plantilla antes de la etiqueta </body> y guarda los cambios. Para modificar el texto, hazlo donde esta en indicado en rojo, para el color de este, modifica lo que esta en azul y para el tamaño de la letra, donde esta en color verde.

ver codigo

<div id="sol"><span style="font-size:25px;color:#FF0000;font-family:impact;z-index:3;position:relative;top:60px;left:5%;font-weight:bold;text-shadow: 0px 4px 4px rgba(150, 150, 150, 1);">VERANO 2014</span><div></div><div></div><div></div><div></div></div><div id="nube"></div>
<style>
#sol {
width: 150px;
height: 150px;
position: absolute;z-index:2;
top: 25px;
left: 40%;
}
#sol *, #sol *:before, #sol *:after {
position: absolute;
}
#sol div {
top: 50%;
left: 50%;
}
#sol div:before, #sol div:after {
content: "";
top: 0;
left: 0;
height: inherit;
width: inherit;
background: inherit;
}
#sol div:before {
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
#sol div:after {
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
#sol div:nth-child(even) {
-webkit-animation: rotateR 12s infinite linear;
-moz-animation: rotateR 12s infinite linear;
-ms-animation: rotateR 12s infinite linear;
animation: rotateR 12s infinite linear;
}
#sol div:nth-child(odd) {
-webkit-animation: rotateL 12s infinite linear;
-moz-animation: rotateL 12s infinite linear;
-ms-animation: rotateL 12s infinite linear;
animation: rotateL 12s infinite linear;
}
#sol div:nth-child(1) {
animation-duration: 49s;
background: rgba(255, 217, 31, 0.2);
width: 144px;
height: 144px;
margin-top: -72px;
margin-left: -72px;
margin-right: 0;
margin-bottom: 0;
}
#sol div:nth-child(2) {
animation-duration: 53s;
background: rgba(255, 217, 31, 0.3);
width: 138px;
height: 138px;
margin-top: -69px;
margin-left: -69px;
margin-right: 0;
margin-bottom: 0;
}
#sol div:nth-child(3) {
animation-duration: 57s;
background: rgba(255, 217, 31, 0.5);
width: 132px;
height: 132px;
margin-top: -66px;
margin-left: -66px;
margin-right: 0;
margin-bottom: 0;
}
#sol div:nth-child(4) {
animation-duration: 61s;
background: rgba(255, 255, 171, 0.5);
width: 126px;
height: 126px;
margin-top: -63px;
margin-left: -63px;
margin-right: 0;
margin-bottom: 0;
background-image: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 171, 0.5) 0%, rgba(255, 217, 31, 0.5) 100%);
background-image: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 171, 0.5) 0%, rgba(255, 217, 31, 0.5) 100%);
background-image: radial-gradient(center, ellipse cover, rgba(255, 255, 171, 0.5) 0%, rgba(255, 217, 31, 0.5) 100%);
}
#nube {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZCP316I7vvFzrLwg8Uy2IR4xp9xAUpIl8eQfUrtvnE8RV0ftw2dYMAG4nBcPrBOkLqxuVbbinIU52ifnyNSy5I7Qtxnkg6uZx8Eif4RbtSI_cZKZxQizkrDoW1GVo04vzW3QlsTd-cSw/s1600/nube.png);
width:175px;height:104px;opacity:0.7;z-index:2;
position: absolute;
top: 100px;right: 40%;
-webkit-animation: right 50s linear -3s infinite;
-moz-animation: right 50s linear -3s infinite;
-ms-animation: right 50s linear -3s infinite;
animation: right 50s linear -3s infinite;
}
@-webkit-keyframes right {
from {
    right: 20%;
}

50% {
    right: 70%;
}

to {
    right: 20%;
}
}
@-moz-keyframes right {
from {
    right: 20%;
}

50% {
    right: 70%;
}

to {
    right: 20%;
}
}
@-ms-keyframes right {
from {
    right: 20%;
}

50% {
    right: 70%;
}

to {
    right: 20%;
}
}
@keyframes right {
from {
    right: 20%;
}

50% {
    right: 70%;
}

to {
    right: 20%;
}
}
@-webkit-keyframes shakeOne {
50% {
    -moz-transform: rotate(68deg);
    -ms-transform: rotate(68deg);
    -webkit-transform: rotate(68deg);
    transform: rotate(68deg);
}

100% {
    -moz-transform: rotate(62deg);
    -ms-transform: rotate(62deg);
    -webkit-transform: rotate(62deg);
    transform: rotate(62deg);
}
}
@-moz-keyframes shakeOne {
50% {
    -moz-transform: rotate(68deg);
    -ms-transform: rotate(68deg);
    -webkit-transform: rotate(68deg);
    transform: rotate(68deg);
}

100% {
    -moz-transform: rotate(62deg);
    -ms-transform: rotate(62deg);
    -webkit-transform: rotate(62deg);
    transform: rotate(62deg);
}
}
@-ms-keyframes shakeOne {
50% {
    -moz-transform: rotate(68deg);
    -ms-transform: rotate(68deg);
    -webkit-transform: rotate(68deg);
    transform: rotate(68deg);
}

100% {
    -moz-transform: rotate(62deg);
    -ms-transform: rotate(62deg);
    -webkit-transform: rotate(62deg);
    transform: rotate(62deg);
}
}
@keyframes shakeOne {
50% {
    -moz-transform: rotate(68deg);
    -ms-transform: rotate(68deg);
    -webkit-transform: rotate(68deg);
    transform: rotate(68deg);
}

100% {
    -moz-transform: rotate(62deg);
    -ms-transform: rotate(62deg);
    -webkit-transform: rotate(62deg);
    transform: rotate(62deg);
}
}
@-webkit-keyframes shakeTwo {
50% {
    -moz-transform: rotate(-17deg);
    -ms-transform: rotate(-17deg);
    -webkit-transform: rotate(-17deg);
    transform: rotate(-17deg);
}

100% {
    -moz-transform: rotate(-23deg);
    -ms-transform: rotate(-23deg);
    -webkit-transform: rotate(-23deg);
    transform: rotate(-23deg);
}
}
@-moz-keyframes shakeTwo {
50% {
    -moz-transform: rotate(-17deg);
    -ms-transform: rotate(-17deg);
    -webkit-transform: rotate(-17deg);
    transform: rotate(-17deg);
}

100% {
    -moz-transform: rotate(-23deg);
    -ms-transform: rotate(-23deg);
    -webkit-transform: rotate(-23deg);
    transform: rotate(-23deg);
}
}
@-ms-keyframes shakeTwo {
50% {
    -moz-transform: rotate(-17deg);
    -ms-transform: rotate(-17deg);
    -webkit-transform: rotate(-17deg);
    transform: rotate(-17deg);
}

100% {
    -moz-transform: rotate(-23deg);
    -ms-transform: rotate(-23deg);
    -webkit-transform: rotate(-23deg);
    transform: rotate(-23deg);
}
}
@keyframes shakeTwo {
50% {
    -moz-transform: rotate(-17deg);
    -ms-transform: rotate(-17deg);
    -webkit-transform: rotate(-17deg);
    transform: rotate(-17deg);
}

100% {
    -moz-transform: rotate(-23deg);
    -ms-transform: rotate(-23deg);
    -webkit-transform: rotate(-23deg);
    transform: rotate(-23deg);
}
}
@-webkit-keyframes rotateL {
from {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

to {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
}
@-moz-keyframes rotateL {
from {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

to {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
}
@-ms-keyframes rotateL {
from {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

to {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
}
@keyframes rotateL {
from {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

to {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
}
@-webkit-keyframes rotateR {
from {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

to {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}
@-moz-keyframes rotateR {
from {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

to {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}
@-ms-keyframes rotateR {
from {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

to {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}
@keyframes rotateR {
from {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

to {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
}

</style>

leer articulo ➨

Bordes animados en las imagenes

comentar

Vamos a ver como utilizando un codigo cortito, aprovechando las posibilidades de animacion que nos da el CSS, le daremos un toque mas cool a nuestras imagenes.

Este truquillo nos permitira hacer que los bordes de nuestras instantaneas 'cobren vida', sin utilizar para ello ninguna otra imagen adicional.

Aqui podeis ver 2 ejemplos con el efecto en marcha, una imagen con los bordes redondeados y la otra no.

Para poner una o varias imagenes con los bordes animados en tu blog o web, primero copia y pega el siguiente codigo. Añade la url de la instantanea donde esta señalado en verde. Segun el tamaño en px que tenga la imagen quieras añadir, sera el mismo que tienes que escribir modificando donde esta indicado en color rojo (con informacion en azul). Tambien puedes variar el tamaño de los bordes y el radio de estos.

ver codigo

leer articulo ➨

Fondo de noche estrellada para el blog

2 comentaron

En realidad se trata de un codigo muy sencillo, utilizando las posibilidades que nos da el CSS (en este caso el CSS3), las aprovecharemos para que nos de un fondo original sin recargar demasiado nuestra pagina.

Indicado para los blogs o webs con el background principal oscuro, podemos mostrar a modo simulatorio unas estrellitas que centellean y parpadean sin parar como si el fondo de nuestro sitio se pareciera a un universo relajante.

Para este tipo de asuntos, se suelen utilizar imagenes o texturas en formato gif, lo cual puede retardar un poco la carga de dicha pagina. Por eso y como ya he comentado anteriormente, he usado 2 imagenes estaticas y el CSS para darles las animaciones y transiciones pertinentes con un efecto suave, a la par que elegante y muy muy 'ligero' a nuestro querido body.

Puedes ver una demo de como queda clicando aqui. Si te ha gustado y quieres ponertelo en tu pagina, copia el codigo de abajo y pegalo entre las etiquetas <body> de tu plantilla.

ver codigo fondo de noche estrellada

leer articulo ➨

Formulario de busqueda original para el blog

2 comentaron

Con un sencillo diseño, original y gracioso, os presento este formulario de busqueda realizado integramente utilizando CSS. Una manera diferente de presentar esta utilidad imprescindible para todo buen blog que se precie. Se puede utilizar en Blogger y en practicamente todas las plataformas blogueras. Si os gusta y quereis ponerlo en vuestro blog, elegid un de los dos, copiad el codigo correspondiente y pegadlo donde querais mostrarlo. Sustituid la parte que esta en color rojo por la direccion URL de vuestro blog. Si vuestro blog tiene el fondo claro, aconsejo elegir el primer modelo, de tenerlo oscuro, el segundo.

buscador ->

ver codigo

buscador ->

ver codigo

leer articulo ➨

Escudo del Capitan America con animacion

comentar

Ahora que esta de moda el Capitan America por sus recientes peliculas, os presento este diseño del escudo del mitico heroe de las barras y estrellas. Como podeis ver, es identico al del comic, esta animado como si se 'autodibujara' y realizado usando SVG y CSS3.

ver el codigo utilizado

leer articulo ➨

Calendarios con estilo para tu blog

comentar

Ahora mostrar la fecha en tu blog puede, ademas de ser practico, ser un elemento mas de decoracion del sitio. Para tal motivo, me he estrujado un poquito las neuronas y me ha salido este widget tan 'cool' que muestra el numero y el nombre del dia a la perfeccion. Con un diseño elegante, con forma de icono y fondos combinando degradados y 'glossy', he utilizado Javascript para lo tecnico y CSS3 para lo visual. Esta disponible en 3 tonos: azul, negro y rojo, elige el que mas te guste y copia su codigo correspondiente para ponertelo en tu blog o web.

ver codigo

ver codigo

ver codigo

leer articulo ➨

Reloj digital CSS3 con efectos

comentar

¿Buscas un reloj diferente y original para ponerlo en tu blog o web? Pues nada, deja de buscar porque REDEANDO te trae este magnifico reloj de pulsera digital, realizado sin utilizar imagen alguna, todo a base de CSS y con un toque de Javascript (jQuery) para los efectos. Si, porque a parte de dar la hora y decorar tu pagina, los botoncitos de este reloj funcionan: si haces click en el izquierdo, apagas y enciendes la pantalla; clicando en el superior derecho, modifica la tipografia de los digitos; si haces click en el pequeño central derecho, cambia el color de fondo de tu blog o web (en este ejemplo lo he adaptado para que cambie el del fondo del post) y el la caja o esfera. Y por ultimo, el boton inferior derecho activa la la luz de la pantalla.

El resultado lo tienes aqui mismo, ¿que te parece? Si te ha encandilado y lo quieres poner en tu sitio, copia el codigo que veras bajo el reloj y pegalo donde quieras como un widget mas.

ver codigo del reloj

<body onload="startTime()"><div id="relojdigital"><div class="t_correa"></div><div class="b_correa"></div><div class="l_caja"></div><div class="m_caja"></div><div class="r_caja"></div><div class="l_boton"></div><div class="r_boton1"></div><div class="r_boton2"></div><div class="r_boton3"></div><div class="pantalla"><div class="segundero"></div></div></div>

<link href='http://fonts.googleapis.com/css?family=Russo+One|Exo+2:100|Codystar|Emilys+Candy|Jolly+Lodger|Nova+Square' rel='stylesheet' type='text/css'>
<style>
#relojdigital {
position: relative;
margin: 0px auto;
width: 172px;
height: 288px;
}
.t_correa {
position: absolute;
top: 1px;
left: 34px;
width: 105px;
height: 47px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-color: #000000;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF000000', endColorstr='#FF111111');
background-image: -moz-linear-gradient(top, #000000 0%, #000000 11%, #474747 67%, #2c2c2c 82%, #000000 83%, #111111 100%);
background-image: -o-linear-gradient(top, #000000 0%, #000000 11%, #474747 67%, #2c2c2c 82%, #000000 83%, #111111 100%);
background-image: -webkit-linear-gradient(top, #000000 0%, #000000 11%, #474747 67%, #2c2c2c 82%, #000000 83%, #111111 100%);
background-image: linear-gradient(to bottom, #000000 0%, #000000 11%, #474747 67%, #2c2c2c 82%, #000000 83%, #111111 100%);
}
.b_correa {
position: absolute;
bottom: 1px;
left: 34px;
width: 105px;
height: 47px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
background-color: #111111;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF111111', endColorstr='#FF000000');
background-image: -moz-linear-gradient(top, #111111 0%, #000000 17%, #2c2c2c 18%, #474747 33%, #000000 89%, #000000 100%);
background-image: -o-linear-gradient(top, #111111 0%, #000000 17%, #2c2c2c 18%, #474747 33%, #000000 89%, #000000 100%);
background-image: -webkit-linear-gradient(top, #111111 0%, #000000 17%, #2c2c2c 18%, #474747 33%, #000000 89%, #000000 100%);
background-image: linear-gradient(to bottom, #111111 0%, #000000 17%, #2c2c2c 18%, #474747 33%, #000000 89%, #000000 100%);
}
.l_caja {
background: #4573A0;
position: absolute;
top: 23px;
left: 7px;
width: 27px;
height: 239px;
border-top-left-radius: 20%;
border-bottom-left-radius: 20%;
}
.r_caja {
background: #4573A0;
position: absolute;
top: 23px;
right: 6px;
width: 27px;
height: 239px;
border-top-right-radius: 20%;
border-bottom-right-radius: 20%;
}

.m_caja {
background: #4573A0;
position: absolute;
top: 48px;
left: 32px;
width: 108px;
height: 192px;
}
.l_caja,
.r_caja,
.m_caja {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.l_boton {
background: black;
position: absolute;
top: 80px;
left: 2px;
width: 5px;
height: 50px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.l_boton:hover {
cursor: pointer;
background: grey;
}
.r_boton1 {
background: black;
position: absolute;
top: 60px;
right: 1px;
width: 5px;
height: 55px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.r_boton1:hover {
cursor: pointer;
background: grey;
}
.r_boton2 {
background: black;
position: absolute;
top: 127px;
right: 1px;
width: 5px;
height: 34px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.r_boton2:hover {
cursor: pointer;
background: grey;
}
.r_boton3 {
background: black;
position: absolute;
top: 172px;
right: 1px;
width: 5px;
height: 55px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.r_boton3:hover {
cursor: pointer;
background: grey;
}
.pantalla {
position: absolute;
top: 82px;
left: 32px;
width: 105px;
height: 80px;
border-radius: 2px;
border: solid 2px black;
font-family: 'Russo One', sans-serif;
font-size: 36px;
padding-top: 40px;
text-align: center;
overflow: hidden;
background: #333;
color: #cdcdcd;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-box-shadow: 0px 0px 5px 0px #333;
box-shadow: 0px 0px 5px 0px #333;
}

.light {
background: whitesmoke;
color: #333;
-webkit-box-shadow: 0px 0px 26px 0px #ffffff;
box-shadow: 0px 0px 26px 0px #ffffff;
}
.segundero:before {
content: ":";
-webkit-animation-name: blink;
-moz-animation-name: blink;
-o-animation-name: blink;
animation-name: blink;
-webktit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}

@-webkit-keyframes blink {
50% {
    opacity: 0;
}
}
@-moz-keyframes blink {
50% {
    opacity: 0;
}
}
@-o-keyframes blink {
50% {
    opacity: 0;
}
}
@keyframes blink {
50% {
    opacity: 0;
}
}
.off {
background: black;
color: black;
-webkit-box-shadow: 0px 0px 0px 0px #ffffff;
/* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: 0px 0px 0px 0px #ffffff;
/* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.typeFace1 {
font-family: 'Russo One', sans-serif;
}

.typeFace2 {
font-family: 'Jolly Lodger', cursive;
}

.typeFace3 {
font-family: 'Nova Square', cursive;
}

.typeFace4 {
font-family: 'Emilys Candy', cursive;
}

.typeFace5 {
font-family: 'Exo 2', sans-serif;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();

        m = checkTime(m);
   s = checkTime(s);
   $(".pantalla").html(h + "<span class='segundero'></div>" + m);
   t = setTimeout(function(){
       startTime()
   }, 1000);
}

function checkTime(i) {
   if(i < 10) {
       i = "0" + i;
   }
   return i;
}

function myNumber(maxNumber) {

   var random_number = Math.random();
   var random_integer = random_number * maxNumber;
   var my_integer = Math.floor(random_integer);

   return my_integer;
}

$('.l_boton').on('click', function(event) {
event.preventDefault();
$('.pantalla').toggleClass( "off" );
});
$('.l_boton').on('dblclick', function(event) {
event.preventDefault();
$('body').removeClass( "off" );
$('body').toggleClass( "off" );
});
$('.r_boton1').on('click', function(event) {
event.preventDefault();
$('.pantalla').toggleClass( "small" );
});

$('.r_boton2').on('click', function(event) {
event.preventDefault();
$('body').removeClass( "off" );
$('.l_caja, .r_caja, .m_caja, body').css({
       background: 'rgb(' + myNumber(255) +',' + myNumber(255) +',' + myNumber(255) +')'
   });
});

$('.r_boton3').on('click', function(event) {
event.preventDefault();
$('.pantalla').toggleClass( "light" );
});

var newTypeFace = 1;
$(".r_boton1").on("click",function(){
$(".pantalla").removeClass("typeFace"+newTypeFace);
if(newTypeFace == 5)
    newTypeFace = 1;
else
    newTypeFace++;

$(".pantalla").addClass("typeFace"+newTypeFace);

});
</script>

leer articulo ➨

Hover a blanco y negro & viceversa

comentar

Utilizando los filtros del CSS3 podemos obtener este efecto, en el que al pasar el cursor por cualquier imagen, esta cambia de color a blanco y negro o tambien a la inversa. Para que veais un ejemplo, os he puesto estos 4 maravillosos iconos sociales de diseño propio con su codigo correspondiente por si os gustan y quereis añadirlos a vuestro blog. Solamente teneis que copiarlo y pegarlo alli donde querais mostrarlo, sustituyendo lo que esta en color azul por las direcciones URLs de vuestras cuentas en las redes sociales y la de vuestro feed RSS. Esta tecnica la podeis utilizar con cualquier imagen, cambiando la direccion (en gris) por la que estimeis oportuno. Si quereis, tambien podeis descargaros los iconos y los codigos.

descargar

ver codigo

<div align="center"><div class="blancoynegro">
<a href="TU DIRECCION DE TWITTER" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3UV5VXc7mqz2oaIMi_QIJ9ExPSl25ja0iPQb9mnYXNBdQsTjLDrrq2wxEjSEw8D97MlWNj_-SjIXyAeGZdQtVVze6zzsqkUVz_oBkdCXwH_sfQXpFZeSpOQnNCzDovEHzWztdn9pdpMc/s1600/twitter.png" /></a>

<a href="TU DIRECCION DE GOOGLE+" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiznOze3FVoL7BDOb4lK43opjtVrHL6Pxed5sveluSpj1RMMizvbKew7XVaBfc-p8_45pRIXUjhAvPu0YrRWP8EGRuNS69KGi0knXS8SpcUOLZNl0v8NTmCVzA093lrIYo7qzYtyvvp5OY/s1600/googleplus.png" /></a>

<a href="TU DIRECCION DE FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIKZnvp3OpGuHNlyHmVpYTLbS6Oc8IZf6qrXqoAVJ_-JPdVuiLC-PpOP1kKO3U2qHfxmed6vXzWjOPdClVehDH5sd9gEMt4nuW74-vLE_fuZ-uxZVibKxfVprQJzsCb2sNoCsnhJGrU1o/s1600/facebook.png" /></a>

<a href="TU DIRECCION DE FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBjx8eHXg1l1l-FMRSz6b92oVWTPIm_rG-3ytbu-nreEO6n3QWakP12Kc3vacDsRD1_tOUT-o0btDW5c7Jf4TWY-52CBHKqbcoTjXBnDAjRHIHfItAj2C3tYQofjQl1clTwWegCLom4c4/s1600/feedrss.png" /></a></div></div>

<style>
.blancoynegro img {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.blancoynegro img:hover {
filter: url('#grayscale');
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: Gray();

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
<div style="width:0;height:0;"><svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"><filter id="grayscale"><fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></filter></svg></div>

ver codigo

<div align="center"><div class="blancoynegro">
<a href="TU DIRECCION DE TWITTER" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3UV5VXc7mqz2oaIMi_QIJ9ExPSl25ja0iPQb9mnYXNBdQsTjLDrrq2wxEjSEw8D97MlWNj_-SjIXyAeGZdQtVVze6zzsqkUVz_oBkdCXwH_sfQXpFZeSpOQnNCzDovEHzWztdn9pdpMc/s1600/twitter.png" /></a>

<a href="TU DIRECCION DE GOOGLE+" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiznOze3FVoL7BDOb4lK43opjtVrHL6Pxed5sveluSpj1RMMizvbKew7XVaBfc-p8_45pRIXUjhAvPu0YrRWP8EGRuNS69KGi0knXS8SpcUOLZNl0v8NTmCVzA093lrIYo7qzYtyvvp5OY/s1600/googleplus.png" /></a>

<a href="TU DIRECCION DE FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIKZnvp3OpGuHNlyHmVpYTLbS6Oc8IZf6qrXqoAVJ_-JPdVuiLC-PpOP1kKO3U2qHfxmed6vXzWjOPdClVehDH5sd9gEMt4nuW74-vLE_fuZ-uxZVibKxfVprQJzsCb2sNoCsnhJGrU1o/s1600/facebook.png" /></a>

<a href="TU DIRECCION DE FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBjx8eHXg1l1l-FMRSz6b92oVWTPIm_rG-3ytbu-nreEO6n3QWakP12Kc3vacDsRD1_tOUT-o0btDW5c7Jf4TWY-52CBHKqbcoTjXBnDAjRHIHfItAj2C3tYQofjQl1clTwWegCLom4c4/s1600/feedrss.png" /></a></div></div>

<style>
.blancoynegro img {
filter: url('#grayscale');
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: Gray();

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.blancoynegro img:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
<div style="width:0;height:0;"><svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"><filter id="grayscale"><fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></filter></svg></div>

leer articulo ➨