Gem@ BLOG

Cuando las cosas cambian

2013-01-14T19:27:00.000+01:00

Con mucho pesar he inhabilitado los comentarios del blog porque el tiempo disponible actualmente me obliga a ello.

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.

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. Y activaré los comentarios llegado el momento cuando no tenga que hacer esperar a nadie.

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 !!

Feliz Navidad 2012

2012-12-22T20:28:00.000+01:00

Wallpapers Navidad 2012

2012-12-21T19:30:00.000+01:00

DESCARGA

Mostrar contenido al pasar el ratón

2012-12-04T20:01:00.000+01:00

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 www.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>

CITA 20-11-2012

2012-11-20T14:11:00.000+01:00

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

Círculo con efecto hover y transiciones

2012-11-12T20:08:00.001+01:00

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) 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.

CITA 5-11-2012

2012-11-05T19:02:00.000+01:00

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

Wallpapers Halloween 2012

2012-10-31T13:53:00.000+01:00

REFERENCIA Y DESCARGAWallpapers a full

Generador de borde con imágenes

2012-10-25T20:24:00.001+02:00

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.

Fuentes Halloween

2012-10-17T19:54:00.002+02:00

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.

Descarga – Vampiress

Descarga – HalloweenKiddy

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

Ribbet el sustituto de Picnik

2012-10-11T20:10:00.000+02:00

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.

Picfull efectos para fotografías

2012-10-05T20:33:00.001+02:00

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

Riesling fuente gratuita

2012-09-13T20:22:00.003+02:00

Referencia y descarga: Fonts2u

Adelgazar rápidamente

2012-09-10T18:59:00.009+02:00

¿Quieres adelgazar fácilmente? Ahora puedes adelgazar de forma rápida y saludable con el método conocido como el "Incinerador de Grasa" que proponen en AdelgazarRápidamente.com

Con este método se pierde peso comiendo hasta quedar saciado llegando a perder hasta 15 kilos en 7 semanas. Así lo asegura el dietista Vicente Pérez que lleva trabajando con este método desde hace 5 años.

El método consta de un programa de nutrición y dieta creado por nuestro dietista y entrenador personal.

Para poner un ejemplo de la relación Programa-Dieta-Ejercicios, si un día tenemos un despiste y comemos algo que no está incluido en la comida de ese día; el programa nos hará una pregunta como esta ¿consumiste algo no incluido en la dieta diaria?. Si la respuesta es que si, el programa modificará la alimentación y los ejercicios a hacer; para de esta manera hacerte perder esa comida consumida.

Si deseas saber más sobre el método en AdelgazaRápidamente.com nos proporcionan más información y fotografías de personas que ya han seguido el programa.

Post patrocinado por gentileza de AdelgazarRápidamente.com

Fondos paisley

2012-09-02T20:20:00.005+02:00

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

Transición con CSS3

2012-08-26T21:00:00.020+02:00

Los efectos en imágenes siempre resultan atrayentes, este en concreto muestra una transición suave utilizando CSS3.

Para hacerlo necesitamos dos imágenes de la misma medida y que esa medida esté indicada en los estilos, es decir, que todas las imágenes a mostrar con este efecto tendrán la misma medida.

Los estilos los añadimos en plantilla edición de HTML justo antes de ]]></b:skin>

Si la imagen la añadimos en un gadget de HTML también podemos añadir los estilos en su interior sin olvidar envolverlos con las etiquetas <style> y </style>

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 550px; /* anchura de la imagen */
height: 434px; /* altura de la imagen */
}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease; /* enable transition */
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,550px,434px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's initially out of view */
z-index: 1;
}

a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */
clip: rect(0,0,434px,0); /* clip values should be rect(0,0,image_height,0) */
opacity: 0;
}

a.nowandthen.alt{
width: 300px; /* set width of image container */
height: 354px; /* set height of image container */
}

a.nowandthen.alt img{
clip: rect(0,300px,354px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen.alt:hover img:nth-of-type(1){
clip: rect(0,0,354px,0); /* clip values should be rect(0,0,image_height,0) */
}

Las imágenes las añadimos ahí donde deseamos mostrarlas, ya sea un post o un gadget.

<a class="nowandthen">
 <img src="Url-imagen-beforejt.jpg" alt="">
 <img src="Url-imagen-afteruc.jpg" alt="">
</a>

REFERENCIADynamicdrive

Elegantes iconos para redes sociales

2012-08-13T16:20:00.003+02:00

Elegante juego de 12 iconos para indicados para las redes sociales más conocidas.
El tamaño de cada icono es ideal para cualquier proyecto 64px por 64px y el formato en PNG.

REFERENCIA Y DESCARGA:creativeNERDS

Transición entre colores con animación

2012-08-06T13:02:00.000+02:00

¡HOLA!
¿qué tal?

En webintenta nos muestran la posibilidad de crear algunas animaciones sin Javascript o Flash.

El ejemplo que vemos es el resultado de una transición entre colores y una animación rotando una capa y escalándola.

.circulo { display:table-cell; border-radius: 50px;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 height:100px;
 width:100px;
 text-align:center;
 vertical-align:middle; }

.circulo span{
color:#000;
 font-family:Arial, Helvetica, sans-serif;
 font-size:21px;
}

/* Para navegadores webkit */
@-webkit-keyframes rotar
{
5%   {background: red;}
25%  {background: yellow;}
70%  {background: blue;}
100% {background: green;}
0% {-webkit-transform:scale(1) rotate(0deg);}
50% {-webkit-transform:scale(1.5) rotate(180deg);}
100% {-webkit-transform:scale(1) rotate(360deg);}
}

/* Para firefox */
@-moz-keyframes rotar
{
5%   {background: red;}
25%  {background: yellow;}
70%  {background: blue;}
100% {background: green;}
 0% {-moz-transform:scale(1) rotate(0deg);}
 50% {-moz-transform:scale(1.5) rotate(180deg);}
 100% {-moz-transform:scale(1) rotate(360deg);}
}
.circulo {
-webkit-animation:cambiar_color 8s linear 1;
 -moz-animation:cambiar_color 8s linear 1;
 -webkit-animation:rotar 4s infinite;
 -moz-animation:rotar 4s infinite;
}


<div class="circulo">
¡HOLA!<br /> ¿qué tal?</div>

Marca de agua para fotografías

2012-07-15T20:54:00.004+02:00

Profesionales de la fotografía y no tan profesionales utilizan marcas de agua en sus trabajos.

Los que se inician, o simplemente los que gustan de ir a lo práctico y dejar constancia clara de su autoría suelen utilizar herramientas online como Water Marquee un sitio para añadir marcas de agua en texto o imágenes.

Es gratuito y podemos subir varias imágenes a la vez así como retocar la marca en el vista previa.

Mosaic Leaf fuente gratuita

2012-06-15T19:45:00.004+02:00

DESCARGA:Typography

Todo al rojo

2012-06-09T21:35:00.010+02:00

REFERENCIA:reinventaWEB

Wallpapers veraniegos

2012-05-22T20:18:00.011+02:00

Aquí, en España ya tenemos a la vuelta de la esquina el verano. Para alegrarte la vista y dar vidilla a esos días que faltan estos fondos de pantalla alegres y fresquitos son ideales.

Editor online HTML Instant.

2012-05-21T18:24:00.004+02:00

Seguro que alguna vez pensaste que algo extraño estaba pasando porque al escribir una entrada en el editor y luego darle salida todo se había deformado.

No tengo una explicación que no sea del tipo "son cosas de Blogger" porque aunque Blogger sea maravilloso tiene sus cosillas.

Cuando escribimos en el editor y hacemos pruebas cambiando de Edición de HTML a Redactar no tendremos problemas, pero es muy posible que si lo hacemos al contrario aparezcan etiquetas <br> como si fuera un campo de amapolas.

Lo ideal es no cambiar, o por lo menos comprobar en vista previa.
Y para ir sobre seguro podemos utilizar un editor online como este de HTML Instant.

Medley_Script descarga gratuita

2012-05-16T13:50:00.004+02:00

Descarga – Medley_Script

Iconos Robotic Social Media

2012-05-01T20:32:00.006+02:00

Tamaño: 128x128px.
Formatos: .PNG – .ICO – .PSD – .GIF

Referencia y DESCARGA Nebel Weblog