Gem@ BLOG

Algunos sitios...

Posts

January 14, 01:29 PM

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

December 22, 02:28 PM

Feliz Navidad 2012

December 21, 01:30 PM

Wallpapers Navidad 2012

DESCARGA

December 04, 02:05 PM

Mostrar contenido al pasar el ratón

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>

November 20, 08:12 AM

CITA 20-11-2012

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

November 12, 02:08 PM

Círculo con efecto hover y transiciones

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.

November 05, 01:02 PM

CITA 5-11-2012

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

December 19, 12:29 PM

Wallpapers Halloween 2012

REFERENCIA Y DESCARGAWallpapers a full

October 25, 02:26 PM

Generador de borde con imágenes

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.

October 17, 01:54 PM

Fuentes Halloween

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.

October 11, 02:10 PM

Ribbet el sustituto de Picnik

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.

October 05, 02:33 PM

Picfull efectos para fotografías

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

September 13, 02:26 PM

Riesling fuente gratuita

Referencia y descarga: Fonts2u

September 11, 06:14 AM

Adelgazar rápidamente

¿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

September 02, 03:03 PM

Fondos paisley

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

August 26, 07:47 PM

Transición con CSS3

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

August 13, 10:28 AM

Elegantes iconos para redes sociales

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

August 06, 07:02 AM

Transición entre colores con animación

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

July 15, 03:16 PM

Marca de agua para fotografías

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.

June 15, 01:51 PM

Mosaic Leaf fuente gratuita

DESCARGA:Typography

June 14, 01:57 PM

Todo al rojo

REFERENCIA:reinventaWEB

May 23, 01:53 PM

Wallpapers veraniegos

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.

May 21, 12:57 PM

Editor online HTML Instant.

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.

May 16, 08:13 AM

Medley_Script descarga gratuita

Descarga – Medley_Script

May 01, 02:41 PM

Iconos Robotic Social Media

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

Referencia y DESCARGA Nebel Weblog

Gem@ BLOG