Cuando las cosas cambian

Con mucho pesar he inhabilitado los comentarios del blog porque el tiempo disponible actualmente me obliga a ello, no obstante los antiguos comentarios se pueden visualizar por si fueran de utilidad para alguien.

He tomado esta decisión para no hacer esperar esas respuestas que últimamente tardaban días y no, eso no estaba bien ni yo me sentía bien al ser así.  Os pido disculpas por ello así como por esos e-mails que no obtuvieron respuesta. Si usted necesita un blog de apoyo le recomiendo que visite cómo hacer un blog para un buen tutorial sobre los fundamentos.

Me gustaría seguir actualizando aunque sea de tarde en tarde porque es algo que me llama y porque no renuncio a tener este mi archivo particular donde voy almacenando mis paranoias y pequeñas cosas que me hacen feliz.

No se trata de un adiós sino de algo pasajero. Algo que a todos nos ocurre alguna vez,  cambios de horarios que nos desbaratan totalmente las costumbres, pero todo bien.

Gracias por entender y estar siempre ahí.

¡¡Nos seguimos viendo !!

DESCARGA

En Snook nos explican la forma de utilizar un contenedor y que al pasar el ratón nos muestre un contenido extra. El ejemplo del autor puede verse aqu�.
Y añadiendo una imagen tal como sugiere el resultado sería el que vemos a continuación: 

Here's what you have.

Here's more of a description of what we have going on here.

Para hacerlo utilizamos CSS. Nos situamos antes de ]]></b:skin> y añadimos lo siguiente:

.infobox {
    position:relative;
    border:1px solid #000; 
    background-color:#CCC;
    width:73px;
    padding:5px;
    }
.infobox img {
 position:relative;
 z-index:2;
    }
.infobox .more {
 display:none;
    }
.infobox:hover .more {
 display:block;
    position:absolute;
    z-index:1;
    left:-1px;
    top:-1px;
    width:73px;
    padding:78px 5px 5px;
    border:1px solid #900;
    background-color:#FFEFEF;
    }

Guardamos los cambios y en un gadget de HTML añadimos los siguiente:

<div class="infobox">
   <img src="Url-de-la-imagen">
   <div>Here's what you have.</div>
 <div class="more">Texto oculto</div>
</div> 

Retocando un poco el CSS podemos hacer lo mismo y que resulte algo más vistoso.

Bienvenidos a este blog!

Autodidacta por vocación y apasionada del diseño y todo lo relacionado con Blogger.
Colaboradora en reinventaweb.com

De igual forma nos situaríamos antes de ]]></b:skin> y añadimos los estilos:

<style type="text/css">
    .infobox {
    background-color: #FFFFFF;
    padding: 0;
    position: relative;
    width: 100px;
}
.infobox h2 {
    color: #000000;
    font-size: 11px;
    letter-spacing: 1px;
    margin: 10px 0 0 20px !important;
    padding: 0 0 0 10px !important;
    text-align: left;
    text-shadow: 1px 1px 0 #CCCCCC;
    text-transform: none;
}
.infobox img {
    border: 3px solid #FFFFFF;
    border-radius: 100px 100px 100px 100px;
    box-shadow: 1px 1px 1px #333333;
    float: left;
    margin: 10px 25px 5px 10px;
    opacity: 0.9;
    position: relative;
    width: 95px;
    z-index: 2;
}
.infobox .more {
    display: none;
}
.infobox:hover .more {
    background-color: #BF7195;
    border: 3px double #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    color: #FFFFFF;
    display: block;
    left: 0;
    padding: 15px 10px 10px 120px;
    position: absolute;
    top: -10px;
    width: 200px;
    z-index: 1;
    height: 135px;
}
.infobox:hover a {
  text-shadow: none;
    color: #000000;
}
</style>

<div class="more">
<span style="color: white; font-family: Arial, Verdana,Tahoma,; font-size: 12px; text-shadow: 1px 1px 1px #000000;">Contenido oculto<br> Texto en negrita </span><a target="_blank" href="Url-del-enlace">Texto enlace</a></div>
</div>

Los cambios a realizar está detallados en el HTML, en "Contenido oculto" lo sustituimos por el contenido que deseamos mostrar. "Texto en negrita" es el texto final y si no lo deseamos simplemente eliminamos la línea de texto.

Y por último donde "Url-del-enlace" y "Texto-enlace" lo sustituimos también por el nuestro o simplemente eliminamos esa linea pero respetando los dos cierres finales de la etiqueta </div>

Si exagerásemos nuestras alegrías, como hacemos con nuestras penas, nuestros problemas perderían importancia.

Anatole France

Hace unos años cuando se hablaba de transiciones uno se imaginaba que en un futuro podríamos crear efectos fantásticos utilizando solamente CSS y así ha sido.

 Vagabundia definía muy bien lo que es una transición diciendo "Una transición es aquello que ocurre entre un momento y otro" recomiendo a quien esté interesado visitar su blog para comprender y aprender a utilizar las transiciones.

El abanico de efectos es muy amplio, hace unos meses aquí hablamos sobre "Transición entre colores con animación" o "Transición con CSS3 en una imagen"

Este otro efecto de hoy lo he visto en Codrops es el que más me ha gustado de los que ofrece en esta demo

Para conseguir este efecto nos situamos en plantilla en edición de HTML y justo antes de ]]></b:skin> añadimos el CSS. 

.ch-item {
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: default;
    height: 100%;
    position: relative;
    width: 100%;
}
.ch-info-wrap {
    background: transparent url(/URL/index.html) repeat scroll 0 0 ;
    border-radius: 50% 50% 50% 50%;
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 3px rgba(115, 114, 23, 0.8) inset;
    height: 180px;
    left: 20px;
    perspective: 800px;
    position: absolute;
    top: 20px;
    transition: all 0.4s ease-in-out 0s;
    width: 180px;
}
.ch-info {
    border-radius: 50% 50% 50% 50%;
    height: 180px;
    position: absolute;
    transform-style: preserve-3d;
    transition: all 0.4s ease-in-out 0s;
    width: 180px;
}
.ch-info > div {
    backface-visibility: hidden;
    background-position: center center;
    border-radius: 50% 50% 50% 50%;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
}
.ch-info .ch-info-back {
    background: none repeat scroll 0 0 #000000;
    transform: rotate3d(0, 1, 0, 180deg);
}
.ch-img-1 {
    background-image: url("url-imagen-220x220");
}
.ch-info h3 {
    color: #FFFFFF;
    font-family: 'Open Sans',Arial,sans-serif;
    font-size: 14px;
    height: 50px;
    letter-spacing: 2px;
    margin: 0 15px;
    padding: 40px 0 0;
    text-shadow: 0 0 1px #FFFFFF, 0 1px 2px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
}
.ch-info p {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 12px;
    font-style: italic;
    margin: 0 30px;
    padding: 10px 5px;
}
.ch-info p a {
    color: rgba(255, 255, 255, 0.7);
    display: block;
    font-family: 'Open Sans',Arial,sans-serif;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1px;
    padding-top: 4px;
    text-transform: uppercase;
}
.ch-info p a:hover {
    color: rgba(255, 242, 34, 0.8);
}
.ch-item:hover .ch-info-wrap {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 3px rgba(115, 114, 23, 0.8) inset;
}
.ch-item:hover .ch-info {
    transform: rotate3d(0, 1, 0, -180deg);
}
.ch-grid {
    display: block;
    list-style: none outside none;
    margin: 20px 0 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
.ch-grid:after, .ch-item:before {
    content: "";
    display: table;
}
.ch-grid:after {
    clear: both;
}
.ch-grid li {
    display: inline-block;
    height: 220px;
    margin: 20px;
    width: 220px;
}

Donde dice url-imagen-220x220 es el lugar para pegar nuestra imagen.

.ch-img-1 { 
 background-image: url("url-imagen-220x220"); 
} 

 Guardamos los cambios y el HTML lo añadimos donde deseamos mostrar el efecto.

<ul class='ch-grid'>
   <li>
    <div class='ch-item ch-img-1'>               
        <div class='ch-info-wrap'>
            <div class='ch-info'>
                <div class='ch-info-front ch-img-1'></div>
                <div class='ch-info-back'>
                    <h3>AQUÍ-TÍTULO</h3>
                    <p>TEXTO O SUBTÍTULO<a href='AQUÍ-URL-ENLACE'>AQUÍ-TEXTO-ENLACE</a></p>
                </div>   
            </div>
        </div>
    </div>
</li>
</ul>

En el HTML es el lugar donde añadiremos el título, subtitulo y enlace.

El amigo ha de ser como el dinero, que antes de necesitarlo, se sabe el valor que tiene.

Guido van Rossum

REFERENCIA Y DESCARGA

Los generadores nos ahorran mucho tiempo porque vemos en vista previa el resultado en lugar de hacer una y mil pruebas.
Con border-image-generator conseguimos que cualquier imagen sea el borde de nuestras imágenes para el blog. Lo ideal, sería que la imagen para el borde sea tipo textura o con motivos no demasiado grandes.

Si marcamos la casilla "Fill Center" conseguimos que la imagen ocupe también el fondo, esto puede ser útil cuando añadimos imágenes png. (fondo transparente)

Para que ese borde se muestre en nuestras imágenes del blog buscamos en la plantilla algo así:

 .post img, table.tr-caption-container { 
  padding:4px; 
  border:1px solid $bordercolor; 
}

Eliminamos lo marcado en rojo y ahí añadimos los estilos que nos proporciona el generador.

No guardes los cambios hasta comprobar en vista previa que todo está correcto.

Son gratuitas, y aunque este tipo de fuente no suele usarse habitualmente nos viene muy bien tenerlas en nuestro PC para crear nuestros propios rótulos y decorar el blog o diseñar tarjetas de invitación. 

Si quieres ver más en Fonts2U tienes un buen surtido.

Y hablando de editores y de retoques, los usuarios del famoso editor de imágenes Picnik ya tienen un sustituto, se llama Ribbet también es gratuito y ofrece las mismas funcionalidades incluso la misma interfaz que el añorado Picnik. 

En el rato que estuve probando lo he encontrado bastante más rápido y con la particularidad que al registrarse podemos acceder a los servicios Premium, no sé si es algo provisional pero ahí está mientras pueda aprovecharse.

Para los que buscan una forma sencilla de añadir efectos a las fotografías Picfull se lo pone fácil. Es una aplicación con gran variedad de efectos y lo que es mejor muy rápida ya que en tres sencillos pasos obtenemos el resultado. 

Una vez descargada la imagen a nuestro PC también podemos compartirla, enviar por e-mail o incluso imprimirla. 

Enlace Picfull

Referencia y descarga:

Los motivos de paisley o cachemira los asociamos inmediatamente a pañuelos o corbatas, también podemos utilizarlos dando un toque original como fondo del blog o cualquier elemento decorativo y eso han debido pensar con acierto en Dezignus

Size: 1.8 mb
Format: ABR (created in PS7) + PNGs (with transparent background)
License: For personal / non profit use only