BlogDesign

Barra de carga con animaciones CSS

2020-12-28T14:21:00.001-03:00

Vengo a contarles cómo hice una barra de carga (o loader) con animaciones CSS.

La iniciativa surgió hace unas semanas en Twitter a partir del challenge de @AndreusCafe:

Ustedes saben que me encanta CSS, y por sobre todo las cosas creativas.

Así que, este desafío consiste en hacer un pequeño loader en CSS.

No hay definiciones ni requerimientos técnicos. Simplemente un pequeño componente gráfico de carga en CSS; uds eligen el estilo. pic.twitter.com/rqsivfSp3d
— Andrés (@AndreusCafe) November 27, 2020

Me surgió la idea de hacer un spinner y barra de progreso a la vez, ya que no me decidía por cuál opción ir.

El desafío fue escribir los keyframes para que la animación sea cíclica y lo más fluida posible. Tomé lápiz y papel para esquematizar las líneas de tiempo y pude tener una visión de lo que quería lograr y lo que debería plasmar en mi código.

Por un lado, tenemos la animación rotate que hace girar la barra. Primero espera, luego gira 180º, vuelve a esperar y vuelve a girar 180º. En este punto completó una vuelta completa y la animación vuelve a repetirse.

La animación load se encarga de controlar el ancho del pseudoelemento que está dentro de la barra. Primero el width crece de 0 a 100% y hace una pausa mientras se produce el giro. Después vuelve a ancho 0.

Ambas animaciones duran 6 segundos, la timing function es linear y la iteration count es infinite. En este CodePen está todo el código y el resultado final.

See the Pen Loader Desafío by Lucas Maidana (@LucasMaidana) on CodePen.

Simplificá los estilos de tus botones y todos sus estados con filtros CSS

2020-09-27T17:43:00.003-03:00

¡Hola! Les traigo un tip muy útil para cuando tienen que escribir los estilos de botones o links, y deben tener en cuenta los distintos estados de los mismos.

Este es un ejemplo de dos tipos de botones y sus estados.

El proceso lógico es empezar por los estilos del botón en su estado inicial y después desarrollar los estados mediante las pseudoclases correspondientes.

Lo recomendable es que si estás replicando una interfaz de un wireframe o estás utilizando un UI kit, respetes todos los colores y estilos acordados. En cambio, si estás programando tu propia UI y sólamente querés que tus botones queden funcionales, te voy a mostrar cómo podés alivianarte mucho el trabajo. Obviamente también suponemos que no vas a usar una librería UI.

Lo que lleva mucho tiempo al momento de estilizar los botones es buscar los colores correctos para los distintos estados, y se complica más aún si no tenés conocimientos sobre colores en UI. Y todavía más complicado si queremos tener botones con degradado porque tenemos que armar mínimo tres degradados que queden bien.

Acá es cuando aparecen los filtros CSS 👐

La idea es escribir sólo los estilos del estado por defecto, y obtener la apariencia de los demás estados mediante la propiedad filter, olvidándonos de todas las variaciones de los colores.

En el siguiente ejemplo uso la función brightness(). Entonces hago el botón más clarito para el hover y lo hago más oscuro para active y focus.

Pero también podés usar otras funciones como opacity(), grayscale() y saturate(). Es cuestión de probar lo que mejor se ajuste al aspecto que querés conseguir.

Podemos ver que incluso podemos aplicar lo mismo para enlaces.

See the Pen CSS filters for styling buttons by Lucas Maidana (@LucasMaidana) on CodePen.

En resumen:

button:hover {
    filter: brightness(1.15);
}
button:active, button:focus {
    filter: brightness(0.95);
}

Podés encontrar más ejemplos en los links que dejo al final.

Muchas gracias por leerme. Ojalá te sirva este tip para tus próximos proyectos. 💪

Fuentes:

Agregar un botón de Cafecito a tu blog de Blogger

2020-08-14T15:32:00.008-03:00

Cafecito es una plataforma de crowdfunding que busca unir a creadores de contenido, ONGs o proyectos con gente que quiera aportar a lo que hacen.

Si tenés un blog en Blogger y te gustaría dar la posibilidad a tus lectores de apoyar tu contenido con pequeños aportes monetarios, entonces esta nueva plataforma argentina te va a ayudar mucho.

Crearte una cuenta en Cafecito es muy sencillo y es importante que vincules tu Mercado Pago para recibir por ahí los pagos. En unos segundos ya podés compartir el link de tu perfil con tus lectores.

También podés incluir un botón como éste en tus publicaciones o incluso insertarlo dentro de un gadget HTML/JavaScript.

Buscá el código HTML para insertar tu botón en Perfil 👉 Editar perfil 👉 Botones

Además, tenés varios colores para elegir el que mejor se adapte a la paleta de colores de tu blog.

Ahora, podemos modificar nuestra plantilla para incluir este botón en el pie de todas las publicaciones, justo antes de los comentarios. Así, las personas que lean tu post hasta el final van a tener la posibilidad de colaborar con vos.

En nuestro panel de Blogger, vamos a Temas 👉 Tres puntos al lado de Mi tema 👉 Editar HTML.

Con ayuda de Ctrl+F, buscamos la siguiente línea:

<b:include data='post' name='postBody'/>

Y justo después pegamos lo siguiente:

<div id='cafecito'>
    <h2 class='title'>
        ¿Te gusta el contenido de mi blog? Ayudame a seguir manteniéndolo
    </h2>
    <a href='https://cafecito.app/lucasmaidana' rel='noopener' target='_blank'><img alt='Invitame un café en cafecito.app' src='https://cdn.cafecito.app/imgs/buttons/button_1.png' srcset='https://cdn.cafecito.app/imgs/buttons/button_1.png 1x, https://cdn.cafecito.app/imgs/buttons/button_1_2x.png 2x, https://cdn.cafecito.app/imgs/buttons/button_1_3.75x.png 3.75x'/></a>
    <br/>
    <span style='font-style:italic;font-size:0.8em'>
        Por el momento, sólo podés invitar cafecitos si sos de Argentina.
    </span>
</div>

Te tiene que quedar así:

¡Guardá 💾 los cambios y listo! No te olvides de poner el link del perfil correcto y personalizar los textos a tu gusto.

Por último, podemos aplicar estilos si es necesario.

Justo antes de ]]></b:skin> agregá el siguiente CSS:

#cafecito {
    /* Estilos para el contenedor */
    padding: 1em 2em;
    margin:2em 0;
    text-align: center;
}
#cafecito h2 {
    /* Estilos para el título */
}

Ojalá te sirva este tutorial y empieces a recibir muchos cafecitos. ☕💗

Cualquier duda, dejala en los comentarios o buscame en Twitter. 🙋‍♂️

Simulando una colisión con CSS

2015-12-05T15:10:00.000-03:00

Volví a Blogger después de tanto tiempo. Una pena haber dejado abandonado blogdesign y retomar muy pocas veces el hábito de indagar acerca de las novedades en el CSS y el diseño web.
Ahora ya casi iniciando los años universitarios, me gustaría volver a escribir acerca de ésto que un tiempo me apasionó y aún me sigue sorprendiendo y fue clave en la elección de mi carrera.
Hace unos días ingresé a mi cuenta de Codepen tras intentos e intentos de acertar con mi usuario y contraseña. Quedé sorprendido de las ingenuidades que publicaba hace años, y mi interés sobre cómo pude lograr todo eso a través de la programación volvió a despertar.
El último pen de mi propiedad se titula "Simulating collision with CSS". A continuación insertado.
See the Pen Simulating collision with CSS by Lucas Maidana (@LucasMaidana) on CodePen. Lo que quise demostrar era cómo simular el evento de colisión (que seguido vemos en vídeo juegos) sólo utilizando CSS y sin recurrir a otros lenguajes más oportunos que seguramente lo facilitarían todo. Últimamente los desafíos y experimentos con CSS se basan en esto, romper los límites y dejar a los otros lenguajes boquiabiertos.
Entonces, encontramos un camioncito que podemos manejar con las dos flechas de arriba. Al dirigirlo hacia el camión de la derecha, ambos cambian de color y aparece una señal indicando que entraron en contacto.
Invitados son a reciclar mi pen para utilizarlo como inspiración. Ahora continuaré con el análisis del código que empleé. A medida que redacto este post lo voy descubriendo con paciencia porque realmente no me acuerdo nada.
El HTML no es nada de otro mundo. Usé etiquetas comunes para insertar a los protagonistas.
En cuanto al CSS, las animaciones de la ruta y las nubes son simples agregados. Nótese también la utilización de la fuente Font Awesome para trabajar con íconos en lugar de imágenes o vectores.
Ambos camioncitos, nombrados con las clases ambu y cami están posicionados con absolute y poseen diferentes márgenes.

.ambu, .cami {

  position:absolute;

  bottom:0.2rem;

  font-size:3em;

  transform:rotatey(180deg); /* Los camioncitos miran hacia la derecha */

}

.cami {

  right:10%;

  color:#ddd;

}

.ambu {

  color:white;

  right:60%;

  transition:99999s;

}

El detalle transition:99999s; se relaciona con el truco para manejar el movimiento a través del joystick. Dicho aprendiaje lo extraje de alguna de esas famosas páginas. Agrego a mis tareas buscar un enlace y dejarlo a disposición.

En el código continuamos con este tema del movimiento a control del usuario.

.der:hover ~ .ambu {

  right:calc(10% + 3rem);

  transition:2s right linear, .1s 2s color linear;

  color:red;

}

.izq:hover ~ .ambu {

  right:80%;

  transition:2s right linear;

  transform:rotatey(0deg);

}

.der:hover ~ .cami {

  transition: .1s 2s color linear;

  color:red;

}

Traduciendo, al apoyar el mouse sobre la flecha derecha, la ambulancia disminuye su margen, lo que hace que se aproxime al otro camión. Al apoyar sobre la flecha izquierda, la ambulancia regresa a su posición inicial y mira hacia la izquierda.
En los estilos donde se involucra el pasar el cursor sobre la flecha derecha, observamos un retraso de 2 segundos para que los camioncitos cambien a color rojo. Esto se debe a que es el el tiempo en que se tarda la ambulancia en arribar hasta el encuentro con el segundo camión. Aquí es donde encontramos la explicación a la forma en que se produce la simulación de colisión con CSS.
A continuación se procede a insertar la explosión como un pseudoelemento de cami:

.cami:after {

content: '*';

color: #FFF;

position: absolute;

top: .1em;

left: .9em;

text-shadow: .1em .1em #FFFE37, .1em -.1em #FFFE37, -.1em -.1em #FFFE37, -.1em .1em #FFFE37;

  opacity:0;

}

.der:hover ~ .cami:after {

  opacity:1;

  transition:.1s 2s opacity;

}

Encontramos el mismo retraso, para que la explosión sólo aparezca cuando indicamos que la ambulancia llegó a destino.
Eso es todo, lo demás son sólo animaciones de las nubes y la ruta que estaría bueno que revises y una regla para tamaño de ventana pequeños.
Ojalá mi explicación haya sido clara y este aporte sea de utilidad para quien sea.

Personalizando el Formulario de Contacto de Blogger

2013-05-26T17:15:00.004-03:00

Hace no mucho tiempo Blogger lanzó un nuevo gadget: el formulario de contacto. Podemos optar por utilizarlo como gadget o en una página estática. Ya que es fácil acceder al código de este gadget lo podemos personalizar a gusto modificando el HTML y añadiendo CSS.

HTML

El formulario consta de dos entradas de texto, una para el nombre y otra para el correo electrónico, un textarea para ingresar el mensaje y un input de tipo submit para enviarlo todo.

Para darle un toque más profesional, vamos a suprimir los textos "Nombre" "Correo electrónico" "Mensaje" por un placeholder en el interior de cada cuadro de texto. Para que entiendas aquí te muestro la diferecia.

Formulario original

Para lograr esto, debemos modificar el HTML del gadget. Primero nos dirigimos a la parte de la plantilla donde se encuentra el widget, lo expandimos, expandimos el includable y encontraremos algo como esto:

<b:widget id='ContactForm1' locked='false' title='Formulario de contacto' type='ContactForm'>
            <b:includable id='main'>
              <b:if cond='data:title != &quot;&quot;'>
                <h2 class='title'>
                  <data:title/>
                </h2>
              </b:if>
              <div class='contact-form-widget'>
                <div class='form'>
                  <form name='contact-form'>
                    <p/>
                    <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' placeholder='Nombre' type='text' value=''/>
                    <p/>
                    <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' placeholder='Correo electrónico' required='required' type='text' value=''/>
                    <p/>
                    <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' placeholder='Mensaje'/>
                    <p/>
                    <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' style='margin:0 auto;' type='button'/>
                    <p/>
                    <div class='contact-mensaje-error' style='text-align: center; max-width: 222px'>
                      <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
                      <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
                    </div>
                  </form>
                </div>
              </div>
              <b:include name='quickedit'/>
            </b:includable>
          </b:widget>

Debemos reemplazar todo lo que esta adentro de <div class='contact-form-widget'> por lo siguiente:

<div class='contact-form-widget'>
                <div class='form'>
                  <form name='contact-form'>
                    <p/>
                    <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' placeholder='Nombre' type='text' value=''/>
                    <p/>
                    <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' placeholder='Correo electrónico' required='required' type='text' value=''/>
                    <p/>
                    <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' placeholder='Mensaje'/>
                    <p/>
                    <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' style='margin:0 auto;' type='button'/>
                    <p/>
                    <div class='contact-mensaje-error' style='text-align: center; max-width: 222px'>
                      <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
                      <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
                    </div>
                  </form>
                </div>
              </div>

También puedes modificar los textos "Nombre" "Correo electrónico" "Mensaje" y "Enviar" a tu gusto.

CSS

Puedes personalizar el formulario como gustes. Aquí te muestro un ejemplo.

/* Personalizamos los input y el textarea */
input.contact-form-name, input.contact-form-email, textarea.contact-form-email-message {
        border: 0;
        border-bottom: 1px solid #AAA;
        padding: .5em .7em;
        position: relative;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAEElEQVQIW2NctWrVf0ZSCADneh3tBiWsnwAAAABJRU5ErkJggg==) no-repeat bottom left, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAEElEQVQIW2NctWrVf0ZSCADneh3tBiWsnwAAAABJRU5ErkJggg==) no-repeat bottom right;
        margin-bottom:20px;width:100%;
        max-width:100%;
      }
      input.contact-form-name:focus, input.contact-form-email:focus, textarea.contact-form-email-message:focus {
/* Al presionarlos para escribir, cambia el color del borde */
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAEElEQVQIW2NkCN3wn5EUAgDohBQzieT+ngAAAABJRU5ErkJggg==) no-repeat bottom left, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAEElEQVQIW2NkCN3wn5EUAgDohBQzieT+ngAAAABJRU5ErkJggg==) no-repeat bottom right;
        border-bottom-color:#0055b0;
        outline:0;
      }
      .contact-form-email-message {
        max-height: 36px;
        transition: max-height 1s;
      }
      .contact-form-email-message:focus {
/* El textarea se extiende en lo alto al estar en focus, y cambia de color de fondo */
        max-height: 150px;
        height:150px;
        background-color: #efefef;
      }
/* El texto del placeholder se desvanece */
      .contact-form-widget [placeholder]:focus::-webkit-input-placeholder {
        transition: opacity 0.5s 0.5s ease;
        opacity:0;
      }

Dejamos créditos:

Hang on Placeholders en CSS-Tricks, aquí vimos cómo hacer que el texto del placeholder desaparezca cuando el input o textarea está en focus. Sólo compatible con navegadores webkit.

SlideToogle con CSS

2013-05-26T12:25:00.002-03:00

Esto lo vi en Google Play, la tienda virtual de Google para aplicaciones Andriod. La descripción de la aplicación se puede mostrar u ocultar con un botón en la esquina inferior derecha. Esto es muy útil para mostrar resúmenes que pueden ser extendidos a gusto del lector.

En Google Play usan javascript pero se logra el mismo resultado utilizando sólo CSS. Lo que hacemos es camuflar un input de tipo checkbox en forma de botón utilizando la etiqueta label. Cuando el input esta activado, el contenido se exapande. Como no es posible utilizar transiciones con la propiedad height, utilizamos max-height.

See the Pen SlideToogle con CSS :checked by Lucas Maidana (@LucasMaidana) on CodePen.

Fuentes

Slidetoogle sólo con CSS en el blog de Emilio Cobos, de aquí sacamos cómo realizar la transición utilizando la propiedad max-height.
Efecto de texto con CSS en el blog de Emilio Cobos. Aquí explica cómo lograr el efecto de continuidad del texto.

Botón circular 3D realista con CSS

2013-02-08T17:49:00.002-03:00

El secreto está en la propiedad box-shadow. Luego border-radius para darle forma y ya lo obtenemos.

See the Pen Botón tridimensional realista. by Lucas Maidana (@LucasMaidana) on CodePen.

El HTML típico de un botón.

<a class='boton' href='URL-DEL-BOTON'></a>

Y el CSS.

.boton {
  background: url(http://www.ashleyjt.net/windows/images/Android.png) /* Url de la imagen */ no-repeat center center, #62BC0F /* Color del botón */;
background-size: 60%; /* Tamaño de la imagen */
  height: 200px;  /* Alto del botón */
  width: 200px;  /* Ancho del botón */
  display: table;
  border-radius: 100%;
  cursor: pointer;
    box-shadow:
/* Sombras externa */
inset 0 10px 15px rgba(255,255,255,.35), inset 0 -10px 15px rgba(0,0,0,.05), inset 10px 0 15px rgba(0,0,0,.05), inset -10px 0 15px rgba(0,0,0,.05),
/* Sombra interna */
0 5px 20px rgba(0,0,0,.1);
}
/* Al presionar */
.boton:active {
  box-shadow: inset 0 5px 30px rgba(0,0,0,.2); /* Sombra interior */
  background-size: 55%; /* Cambiamos el tamaño de la imagen */
}

La idea es utilizarlo como ícono, pero añadir texto también es una opción.

Y esto fue un POST EXPRESS.

Comentarios al estilo de Windows 8

2012-12-24T15:08:00.000-03:00

La llegada de Windows 8 realmente nos sorprendió a todos. A mí en especial me atrajo mucho el diseño de esta nueva plataforma. Nos enseña una nueva manera de utilizar los colores en recuadros, sin necesidad de tantos degradados, imágenes y texto muy llamativo.
Y como llevar este diseño al CSS no es tan complicado, me tomé tiempo para personalizar los comentarios de Blogger a la manera del nuevo Windows. Lo logré basándome en capturas de Windows 8 y el código fuente que podemos encontrar inspeccionando el messenger de Outlook.

La mensajería en Windows 8.

El messenger de Outlook.

Puedes ver en este blog de pruebas cómo quedarán los comentarios.
Lo que hice fue lo siguiente:

Agrandar los avatares y colocar un borde izquierdo.
Aplicar el fondo a los bloques de los comentarios, y una pequeña pestaña para que parezca un globo de diálogo.
En las respuestas impares, cambiamos la posición de los avatares hacia la derecha para dar la idea de un diálogo entre quien realizó la pregunta y quien la respondió. Además, tal cual lo dice Windows, aclaramos el fondo y oscurecemos el texto.
Cambiar los enlaces de "Responder" y "Suprimir" por iconos.
Creo que es todo.

Demo

Para comenzar debemos borrar todos los estilos predeterminados para los comentarios de las plantillas de Blogger. Si utilizas una platilla original de Blogger debes buscar la acotación

/* Comments
----------------------------------------------- */

entre los estilos y borrar todo el contenido hasta la siguiente acotación.

Ahora podemos comenzar a personalizar. Prefiero hacerlo a pasos para que entiendas lo que vamos haciendo.

Primero aplicamos una muy útil propiedad llamada box-sizing a todo (sí, todo), utilizando el selector universal.

.comments, .comments * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
}
/* Lo siguiente adapta el ancho de los comentarios, cámbialo si lo necesitas */
.comments .comments-content .comment {
float: left;
width: 100%;
}

Continuemos con los avatares.

.comments .avatar-image-container {
/* El alto y el ancho */
min-height: 50px;
width: 50px;

border: 0;

/* El borde izquierdo, puedes cambiar el color */
box-shadow: -3px 0 0 #6ec419;

margin:0!important
}

.comments .avatar-image-container img {
/* Repetimos el ancho y alto */
max-width: 50px;
height: 50px;

border:0!important;
}

Ahora la mordida del comentario individual.

.comments .comment-block {
/* El margen del comentario impar */
margin-left: 70px;
position: relative;
}

.comments .comment-replies .comment .comment-block:before, .comments .comment .comment-block .comment-header:before {
border-width: 6px;
position: absolute;
border-style: solid;
height: 0;
width: 0;
top: 15px;
content: "";
}

.comments .comment-replies .comment:nth-child(even) .comment-block:before, .comments .comment .comment-block .comment-header:before {
left: -12px;

/* Color de la mordida de los comentarios impares */
border-color: #71AA00 #71AA00 transparent transparent;
}


.comments .comment-replies .comment:nth-child(odd) .comment-block:before {
right: -12px;

/* Color de la mordida de los comentarios pares */
border-color: #9BE900 transparent transparent #9BE900;
}

Personalicemos la cabecera de los comentarios y el contenido.

.comment-header, .comment-content {

/* Fondo del comentario individual impar */
background: #71AA00;

/* Color del texto del comentario individual impar */
color: white;

margin: 0!important;
}

.comment-header {
padding: 8px 15px;
}

.comment-header .user a {

/* Color del enlace al perfil del usuario del comentario individual impar */
color: rgba(255,255,255,.9)!important;

/* Tamaño del enlace al perfil del usuario del comentario individual impar */
font-size: 13px;
}

.comment-content {
padding: 0px 15px 30px
}

Coloquemos la fecha y hora del comentario debajo del contenido.

.comments .comments-content .datetime {
margin-left: 6px;
position: absolute;
bottom: 8px;
left: 10px;
}

.comments .comments-content .datetime a {
/* Color de la fecha */
color: rgba(255,255,255,.6);
}

Algunos estilos para las respuestas.

.comments .comment-replies {
margin: 0!important;
width: 80%;
float: right;
}

.comments .comment-thread.inline-thread {
margin: 0!important;
padding: 0!important;
}

.comments .comment-replies .comment .comment-block {
width:70%;
}

.comments .comment-replies .comment:nth-child(odd) .comment-block {
margin-left: 70px!important;
}


.comments .comment-replies .comment .comment-block .comment-header:before {
display:none!important
}

.comments .comment-replies .comment:nth-child(odd) .avatar-image-container {
float:right!important;
}

.comments .comment-replies .comment:nth-child(odd) .comment-header .user a {
/* Color del enlace al perfil del usuario en las respuestas impares */
color:rgba(0,0,0,.9)!important
}

.comments .comment-replies .comment:nth-child(odd) .datetime a {
/* Color de la fecha del comentario en las respuestas impares */
color: rgba(0,0,0,.6)!important;
}

.comments .comment-replies .comment:nth-child(odd) .comment-header, .comments .comment-replies .comment:nth-child(odd) .comment-content {
/* Color del fondo de las respuestas impares */
background: #9BE900!important;

/* Color del texto en las respuestas impares */
color: #000!important;
}

Cambiemos los enlaces de "Responder y suprimir" por iconos, que aparecerán al pasar el cursor por el comentario.

.comment-actions {
display: block;
position: absolute;
right: 6px;
top: 6px;
opacity:0;
-ms-opacity:0;
transition: .4s;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
}

.comments .comment-block:hover .comment-actions {
opacity:.9;
-ms-opacity:.9;
}

.comments .comment .comment-actions a {
padding-right: 5px;
padding-top: 5px;
display: inline-block;
width: 25px;
height: 25px;
text-indent: -999px;
background: url(http://1.bp.blogspot.com/-hyaIc5d-QZU/UNMl4CQk33I/AAAAAAAABi4/heRp7d-ejhQ/s50/botones+comentarios+w8.png);
}

.comments .comment .comment-actions .blog-admin a {
background-position:-75px 0;
margin-left:3px;
}


.comments .comment-replies .comment:nth-child(odd) .comment-actions .blog-admin a {
background-position:-75px -75px!important;
}


.comments .thread-toggle {
margin-top: 5px;
}

Con eso terminé yo, pero seguramente algún boton, enlace o palabrita quedará aburrida sin estilos, por lo que deberás tomarte la molestia de agregar el CSS que creas necesario para dejarlo a la par con los comentarios.

Como habrás notado, el proceso no es tan difícil, y desde ahora tú podrás personalizar los comentarios a tu gusto y también que combine con la temática de tu blog.

Efecto de desvanecimiento al cargar el blog

2012-11-27T21:02:00.001-03:00

Buenas :)
En este tutorial veremos cómo aplicar un efecto fade al cargar el blog. Desde otro punto de vista también podemos decir que creamos una ventana de carga que oculta el contenido del blog hasta que éste se cargue por completo. El truco es muy sencillo sólo creamos un contenedor que oculte todo el blog, y con Javascript (mejor dicho: jQuery) le ordenamos que desaparezca, luego de finalizar la carga, y que aparezca, al ingresar a un enlace.

La idea y gran parte del código lo obtuve de esta entrada de Ciudad Blogger, pero tuve que modificar algunas cosas para que no sea el body quien se oculte, sino que la ventana de carga se pose sobre el mismo para ocultarlo.

Antes de empezar, debes tener instalado en tu plantilla jQuery, pegando la siguiente línea antes de </head>

En caso de ya tenerlo, no pegues nada ;)

Ahora continuemos con el HTML (antes de </body>) y el CSS (antes de }]]></b:skin>).

HTML

<div id='Cargando'/>

CSS

#Cargando {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 100% !important;
overflow: hidden;
z-index: 99999;
background: url(http://3.bp.blogspot.com/-WUTROUz9VWg/ULEWxvCiVqI/AAAAAAAABgU/ZX9UXjIihzE/s30/cargando-spinner.gif) no-repeat center center, #FFCEAC;
}

html {
background-color: #FFCEAC;
}

En el código CSS he marcado con naranja la URL de la imagen de carga, que puedes crear con Preloaders.net, y con azul el color del desvanecimiento.

Sigamos con la parte más importante, el jQuery. Agrega esto después del framework (el código para instalar jQuery):

<script type='text/javascript'>
//<![CDATA[

$(function() {
$("a[href^='http://miblogde']").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#Cargando").fadeIn(500, redirectPage);
});

function redirectPage() {
window.location = linkLocation;
}
});

window.onload = function() {
$('#Cargando').fadeOut(500);
}

//]]>
</script>

Muy importante, debes cambiar lo que está en rojo por al menos el primer fragmento de la URL de tu blog, o si prefieres el link completo. Esto permitirá que sólo se aplique el desvanecimiento en los links internos, y podremos utilizar el Lightbox de Blogger para ampliar las imágenes, algo que causaba conflictos con el script de Ciudad Blogger.

Los valores en color verde son la velocidad del desvanecimiento, el primero, al abandonar la página actual, y el segundo, el desvanecimiento luego de la carga.

Con el siguiente enlace puedes acceder a un demo del truco. Es todo, gracias :D

Demo

Plantilla SimpleWhite

2012-11-19T17:25:00.002-03:00

Y con ustedes, ¡la primer plantilla de BlogDesign!
Ya me había llegado el momento y decidí iniciar mi carrera como 'diseñador de plantillas' :)
Se trata de una plantilla para Blogger que puedes descargar y utilizarla en tu blog.

El aspecto es relamente sencillo. Sin muchos colores, sin fuentes raras y simple organización. Una plantilla que no le vendrá muy mal a los blogs que no deseen llamar mucho la atención. Aquí más características:

Buscador a un lado del título del blog.
Contenedores con fondo blanco, un pequeño borde, y bordes redondos.
Algunas (no muchas) funciones son configurables desde el Diseñador de plantillas.
Las entradas se muestran de manera completa en la página principal.
Plantilla simplista sin mucho código, lo que hace fácil la edición.

Aquí te muestro una vista previa de cómo quedan los comentarios:

Y aquí los enlaces al demo y descarga:

Demo Descarga

Para instalar la plantilla investiga en este post de Oloblogger.

Si tienes dudas sobre cualquier cosa de la plantilla, házmelo saber con un comentario. Saludos!

Iconos CSS. RSS

2012-11-11T16:57:00.001-03:00

Hace unos días vimos cómo generar utilizando solamente CSS, el icono del sobre, representativo del correo o e-mail.
Ahora veamos cómo hacerlo con el ícono RSS.

Con el siguiente código podrás conseguir el icono, y podrás utilizarlo como botón o para decorar solamente. Lo malo de generar el icono es que no es fácil cambiar de tamaño, si necesitas hacerlo habrá muchos valores con los cuales tener que cambiar.

HTML

<div class="icono-rss"></div>

CSS

.icono-rss {
width: 40px;  /* Ancho del icono */
height: 40px;  /* Alto del icono */
box-sizing: border-box;
background: #FD7527;  /* Fondo del icono */
border: 1px solid #FF5D00;  /* Borde del icono */
border-radius: 5px;  /* Bordes redondos */
position: relative;
box-shadow: inset 0 15px 10px -8px #FF9356, 0 2px 3px -1px rgba(0,0,0,.2);  /* Sombras */
}
.icono-rss:before, .icono-rss:after {
display: block;
content: "";
position: absolute;
bottom: 5px;
left: 5px;
}
.icono-rss:before {  /* El círculo blanco */
width: 8px;  /* Alto */
height: 8px;  /* Ancho */
background: white;  /* Color */
border-radius: 100%;
}
.icono-rss:after {  /* Los dos arcos blancos */
width: 12px;  /* Ancho, debe ser mayor al ancho de circulo */
height: 12px;  /* Alto, debe ser mayor a alto del circulo */
border-style: double;
border-width: 16px 16px 0 0;  /* Ancho de los arcos */
border-color: white;  /* Color de los arcos */
border-radius: 0 25px 0 0;  /*  */
}

Para no quedarme con todo el crédito, el icono lo encontré en Oloblogger. Al principio, cuando ví en la barra lateral los botones sociales, creí que se trataban de imágenes, pero en un post de Oloman declaró que eran puro CSS. Para no quedarme con la duda, inspeccioné un poco los estilos de su plantilla y encontré la ingeniosa manera de crear el icono RSS.

Para usar el icono como botón a tu feed, encierra el código HTML entre las etiquetas:

<a href='URL-DE-FEED'>Código</a>

Nos vemos la próxima. :)

Iconos CSS. E-mail

2012-11-09T16:54:00.000-03:00

Como sabemos, el icono representativo del e-mail es el sobre de correo. Aunque muchas veces el arroba @ nos indica lo mismo. Hoy veremos cómo, utilizando solamente estilos CSS, crear un simple icono de sobre.

HTML

CSS

.icono-email {
background: white; /* Fondo del icnono */
box-sizing: border-box;
width: 40px; /* Alto del icono */
height: 30px; /* Ancho del icono */
border: 1px solid #777; /* Borde del icono */
border-radius: 2px;
box-shadow: 1px 1px 3px rgba(0,0,0,.095); /* Sombra */
position: relative;
}
.icono-email:before, .icono-email:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
}
.icono-email:before {
border: 19px solid transparent;
border-top: 20px solid #777; /* Color igual a color de borde */
}
.icono-email:after {
border: 18px solid transparent;
border-top: 19px solid white; /* Color igual a color de fondo */
left:1px;
}

Como habrás notado, aprovechamos las pseudoclases :before y :after para no tener que usar tanto HTML y no tener inconvenientes con los position. Recuerda que si quieres cambiar el color de fondo o borde, tienes que cambiarlo en dos partes del código diferente, que encontrarás viendo las acotaciones.
Aquí ves el resultado.

Más colores...

Ahora que tenemos el icono podemos, fácilmente, usarlo en un botón de suscripción.

HTML

CSS

.e-mail {
background: #80C6FF; /* Fondo del botón */
box-sizing: border-box;
width: 160px; /* Ancho del botón */
height: 50px; /* Alto del botón */
border-radius:4px;
border:1px solid #7DC4FF; /* Borde del botón */
margin: 5px auto;
position: relative;
box-shadow: 0 0 #50B0FF; /* Cambia el color de la sombra, debe ser más oscura que el fondo */
-webkit-transition: .2s;
-moz-transition: .2s;
-o-transition: .2s;
transition: .2s;
}
.e-mail:hover {
box-shadow: 0 5px #50B0FF; /* Cambia el color de la sombra, debe ser más oscura que el fondo */
top:-5px;
}
.e-mail:active {
top:0;
box-shadow: 0 0 #50B0FF; /* Cambia el color de la sombra, debe ser más oscura que el fondo */
}
.e-mail span {
line-height: 50px;
float: right;
display: inline-block;
width: 100px;
text-align: center;
color: #333; /* Color del texto */
text-shadow: 0 1px 2px rgba(255,255,255,.4); /* Sombra del texto */
font-size: 25px;
}
.e-mail .icono { /* Utiliza las mismas acotaciones que en el ejemplo del icono */
background: white;
box-sizing: border-box;
width: 40px;
height: 30px;
float: left;
margin: 9px 0 0 9px;
border: 1px solid #777;
position: relative;
border-radius: 2px;
box-shadow: 1px 1px 3px rgba(0,0,0,.095)
}
.e-mail .icono:before, .e-mail .icono:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
}
.e-mail .icono:before {
border: 19px solid transparent;
border-top: 20px solid #777;
}
.e-mail .icono:after {
border: 18px solid transparent;
border-top: 19px solid white;
left: 1px;
}

E-mail

Terminamos con este post. Nos vemos!

Tabs, menú de contenidos con pestañas. Versión CSS

2012-11-02T17:27:00.009-03:00

Seguro conocerás este sistema de pestañas, que nos permite mostrar de manera alternativa distintos contenidos en un mismo espacio.
Hay distintas versiones como con jQuery, o utilizando CSS, más específicamente la pseudoclase :target.

Aquí veremos como obtener un resultado similar, pero utilizando la pseudoclase :checked.

Comencemos con la estructura.

<div id="contenedor">
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
    <label for="tab-1" class="tab-label-1">Pestaña1</label>
    
    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2">Pestaña2</label>
    
    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
    <label for="tab-3" class="tab-label-3">Pestaña3</label>
    
    <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
    <label for="tab-4" class="tab-label-4">Pestaña4</label>
                            
    <div class="content">
        <div class="content-1">
            Contenido1
        </div>
        <div class="content-2">
            Contenido2
        </div>
        <div class="content-3">
            Contenido3
        </div>
        <div class="content-4">
            Contenido4
        </div>
    </div>
</div>

Ahora el CSS que será el mecanismo de este sistema. Es largo, así que te tendrás que tomar tiempo por si quieres personalizarlo a tu gusto.

#contenedor {
    margin: 40px auto;
    width: 750px;  /* Ancho del contenedor */
box-sizing: border-box;
-moz-box-sizing: border-box;
}

#contenedor input {
height: 32px;
visibility: hidden;
}

#contenedor label {
float: left;
cursor: pointer;
font-size: 15px;  /* Tamaño del texto de las pestañas */
line-height: 40px;
height: 40px;
padding: 0 20px;
display: block;
color: #888;  /* Color del texto de las pestañas */
text-align: center;
border-radius: 5px 5px 0 0;
background: #eee;  /* Fondo de las pestañas */
margin-right: 5px;
}

#contenedor input:hover + label {
background: #ddd;  /* Fondo de las pestañas al pasar el cursor por encima */
color: #666;  /* Color del texto de las pestañas al pasar el cursor por encima */
}

#contenedor input:checked + label {
background: #FFDA91;  /* Fondo de las pestañas al presionar */
color: #444; /* Color de las pestañas al presionar */
z-index: 6;
line-height: 45px;
height: 45px;
position: relative;
top: -5px;
-webkit-transition: .1s;
-moz-transition: .1s;
-o-transition: .1s;
-ms-transition: .1s;
}

.content {
background: #FFDA91;  /* Fondo del contenido */
position: relative;
width: 100%;
height: 350px;  /* Alto del contenido */
padding: 30px;
z-index: 5;
border-radius: 0 5px 5px 5px;
}

.content div {
position: absolute;
z-index: -100;
opacity: 0;
transition: all linear 0.1s;
}

#contenedor input.tab-selector-1:checked ~ .content .content-1,
#contenedor input.tab-selector-2:checked ~ .content .content-2,
#contenedor input.tab-selector-3:checked ~ .content .content-3,
#contenedor input.tab-selector-4:checked ~ .content .content-4 {
    z-index: 100;
    opacity: 1;
    -webkit-transition: all ease-out 0.2s 0.1s;
-moz-transition: all ease-out 0.2s 0.1s;
-o-transition: all ease-out 0.2s 0.1s;
-ms-transition: all ease-out 0.2s 0.1s;
}

Aquí tienes un ejemplo de cómo quedaría el menú.

Primer pestañaAquí hay másCreo que es todo

La primer pestaña ya se encuentra activada, por lo cual esto es lo primero que verán los lectores.

Además de texto, inserta lo quieras. Como imágenes.

...y cualquier otra cosa. Eso es todo, espero que te sea útil. Por cierto, esto es una adaptación de un tutorial de Codrops.

Nube de etiquetas 3D

2012-10-24T18:11:00.000-03:00

Ayer, 23 de octubre de 2012, Oloman publica en su blog un post sobre un antiguo servicio que permitía presentar las etiquetas del blog como una nube, pero en tres dimensiones. Comenta sobre cómo solucionar los errores que ya hace tiempo pueden verse, cómo utilizarla de manera automática, o con enlaces personalizables y cómo personalizar a tu gusto esta nube de etiquetas.
A continuación te dejo el link para que puedas aprovechar esta herramienta :D
NUBE DE ETIQUETAS 3D: BLOGUMUS SIGUE FUNCIONANDO | Oloblogger

Lookeando las imágenes con CSS

2012-10-02T16:32:00.001-03:00

Hace tiempo encontré grandiosos efectos que se pueden lograr sólo con CSS, como un efecto vintage, en Ciudad Blogger y un filtro de escala de grises, en Oloblogger. Con estos métodos como base, se pueden lograr infinitas opciones para decorar las imágenes.

Imagen de The Art of Matt Kaufenberg.

Para lograr la textura utilizamos los CSS Patterns con los cuales utilizamos un liviano trozo de base64, obtenemos grandes resultados.

Acá te muestro el CSS de los ejemplos, y luego el HTML. Recuerda que puedes experimentar cambiando los colores, probando con las texturas y agregando lo que quieras para lograr todo lo que creas posible, esto sólo es una base para que obtengas tus propios resultados.

Ejemplo 1

.clase-a-eleccion {
width: 320px; /* Ancho de la imagen */
height: 265px; /* Alto de la imagen */
position: relative;
float:left;
}
.clase-a-eleccion img {
padding:0;
margin:0;
width:100%;
height:100%;
}
.clase-a-eleccion:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(20, 255, 0, 0.5); /* Color de la imagen */
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkYGAwBuKzQIwNGDNCRbEpAovBFIDUISuCs5EVwBSBaLiVJCnAawVeR+L1JgBFmQxvraGi2QAAAABJRU5ErkJggg==); /* Pattern Textura */
box-shadow: inset 0 0 50px rgba(0,0,0,.6); /* Sombra interna */
-webkit-transition: 1s;
-o-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
}
.clase-a-eleccion:hover:before {
opacity:0;
}

Ejemplo 2

.clase-a-eleccion {
/* Filtro de escala de grises */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
position: relative;
width: 320px; /* Ancho de la imagen */
height: 265px; /* Alto de la imagen */
float:left;
}
.clase-a-eleccion img {
padding:0;
margin:0;
width:100%;
height:100%;
}
.clase-a-eleccion:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(20, 255, 0, 0.5); /* Color de la imagen */
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAM0lEQVQYV2NkYGAwBuKzQIwVMEJFcSqCKQCpw6oIWQFWRegKMBRhU4CiCJcCuCJ8CsCKAAKvBzyV2TSbAAAAAElFTkSuQmCC); /* Pattern Textura */
box-shadow:inset 0 0 50px rgba(0,0,0,.6); /* Sombra interna */
-webkit-transition: 1s;
-o-transition: 1s;

-moz-transition: 1s;
-ms-transition: 1s;

}
.clase-a-eleccion:hover:before {
opacity:0;
}
.clase-a-eleccion:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
}

HTML

Recuerda que puedes cambiar la clase de la imagen en color azul en el HTML al igual que en el CSS.

Por cierto, si no entiendes bien el generador de Patters antes mencionado, aquí tienes una entrada en Compartidísimo para comprenderlo, pero de todas formas no es tan difícil.

¡Me gustaría empezar a ver sitios con imágenes retocadas completamente con CSS los próximos días! :D Saludos.

Efecto Páginas detrás con box-shadow

2012-09-21T14:49:00.001-03:00

Habrás visto en algunos sitios algo parecido a esto que te voy a mostrar. Puedes aplicar este efecto a cualquier cosa y en realidad le dejará un buen toque de originalidad. Se trata de simular sombras que están detrás del elemento, que parecen ser páginas.

Esto lo podés aplicar tanto en imágenes

como en contenedores, como el cuerpo de entradas de tu plantilla.

Lo principal para aplicar el efecto es aplicar una clase al elemento, como las imágenes o contenedores, o buscar el ID del contenedor de tu plantilla que quieras aplicar el efecto, como Blog1, que es el contenedor principal de las entradas.

.imagen-sombra {
box-shadow: 0 10px 0 -5px #E4E4E4,
                     0 20px 0 -10px #D5D5D5;
margin-bottom:15px;
padding:0;
}

Debes reemplazar .imagen-sombra con un # seguido del ID del contenedor.

Y en el HTML utilizamos (para una imagen)

<img class='imagen-sombra' src='url-imagen'/>

Y ya lo obtenemos, pero si la imagen es más oscura, quisiéramos que las sombras también lo sean, entonces cambiamos los colores, que deberán ir de más oscuro a más claro.

.imagen-sombra {
box-shadow: 0 10px 0 -5px #D5D5D5, /* Primera sombra */
                     0 20px 0 -10px #E4E4E4; /* Segunda sombra */
margin-bottom:15px;
padding:0;
}

Y si quisieras agregar más sombras, basta con agregar otra línea modificando tres cosas, el número indicado en azul indicará la posición de la sombra, por lo que deberás aumentarlo luego de cada línea. El número indicado en rojo, indica el tamaño de la sombra, deberás ir disminuyendo este valor, ya que como está en negativo la sombra cada vez disminuye de tamaño. Y por supuesto deberás cambiar el color, de modo que la escala aumente o disminuya.

.imagen-sombra {
box-shadow: 0 10px 0 -5px #D5D5D5, /* Primera sombra */
                     0 20px 0 -10px #E4E4E4, /* Segunda sombra */
                     0 30px 0 -15px #F6F6F6; /* Tercera sombra */
margin-bottom:20px;
padding:0;
}

Por último puedes también experimentar con los colores, ¿quién dice que las sombras son sólo negras?

Imágenes encontradas en El espejo lúdico, captura de pantalla obtenida a través de la plantilla de Ayuda Bloggers.

Fondo con efecto Parallax para tu blog

2012-09-05T16:02:00.001-03:00

Navegando por la web encontré este genial generador de fondos con efecto Parallax. Para comprender el aspecto de este efecto, mira este blog de pruebas. Es muy sencillo de aplicarlo en tu sitio, y para que no te sea tan dificil generar el código, acá te muestro el tutorial para utilizar este generador.

Ingresa a Web Features - Parallax Background Builder y elige la primera opción que permite crear un fondo general, es decir que se aplica al fondo principal.
Para evitar conflictos con la imagen de fondo de tu blog, si es que la tienes, elige el color transparente para la capa del fondo.
Para agregar más capas, utiliza el botón en la esquina:

Se abrirá una ventana donde deberás insertar el URL de la imagen, o también puedes elegir una de la galería que te ofrece el generador.
En la barra derecha, puedes elegir el modo de la imagen, puede ser pattern, para que la imagen se repita, o image, la imagen no se repite y puedes posicionarla hacia la izquierda o hacia el bottom.
En la barra de la izquierda, encontrarás las opciones para aplicar el efecto de movimiento a las capas.
Tienes las opciones Mouse Move, la capa se mueve con el desplazamiento del cursor, y Mouse Scroll, al mover la ruedita del mouse, la capa se desplaza.
Al marcar la opción se abren las opciones que definirán la dirección o la orientación del movimiento y la velocidad con que se producirá.

Sólo debes experimentar y verás todos los efectos que puedes obtener.
Para obtener el código para aplicar el efecto en tu blog, presiona "Get Embed Code" y pega el código en tu plantilla antes de </head>.

Seguramente esta herramienta te servirá y le dará un toque muy llamativo y animado a tu blog.

Menú con transparencia e imagen de fondo

2012-08-27T17:08:00.000-03:00

Hoy les traigo unos muy llamativos menúes para usarlos en tu blog. Lo especial que tienen es que utilizan opacidad para el fondo lo que le otorga una apariencia más profesional. Para poder apreciar la opacidad de los botones, es imprescindible una imagen de fondo, o un textura o un patrón. Por lo que deberás empezar a buscar una buena imagen que además combine con la imagen de fondo de tu blog o los colores que utilizas.

Puedes ver las demostraciones de cada ejemplo en este blog de pruebas.

Debes pegar el código en un gadget HTML/Javascript, y luego ubicarlo debajo de la cabecera, no sé cómo se verán estos menúes en la sidebar ya que los diseñé de manera que sean horizontales.

Ejemplo 1

<div id="contenedor-menu">
<div id="menu2">
<ul>
<li><a href="#">seccion1</a></li>
<li><a href="#">seccion2</a></li>
<li><a href="#">seccion3</a></li>
<li><a href="#">seccion4</a></li>
<li><a href="#">seccion5</a></li>
</ul>
</div>
</div>
<style>
#contenedor-menu {
background:url(http://2.bp.blogspot.com/-WfbmrcVlt1s/UDvIazXs-CI/AAAAAAAABPg/ulnMwz-0ZVw/s1600/fondo+ladrillos.jpg) bottom;
background-size:cover;
width:100%;
border-radius:3px;
margin:10px auto;
box-shadow:0 5px 15px rgba(0,0,0,.2);
height:80px; /* Alto del contenedor */
overflow:hidden;
}
#menu {
height:40px; /* Alto del menú */
float:right;
padding:25px 20px 0 0;
font-size:18px;
}
#menu ul {
float:right;
}
#menu ul li {
display:inline-block;
margin:0 10px 0 0;
padding:4px 6px;
background:rgba(255,255,255,.2); /* Fondo del enlace */
cursor:pointer;
border-radius:4px;
-webkit-transition:.2s;
-moz-transition:.2s;
-o-transition:.2s;
-ms-transition:.2s;
}
#menu ul li:hover {
background:rgba(255, 170, 0, 0.3); /* Fondo al pasar el cursor por encima */
-webkit-transform:scale(1.1);
}
#menu ul li a {
display:inline-block;
color:white; /* Color del enlace */
}
</style>

Ejemplo 2

<div id="contenedor-menu">
<div id="menu2">
<ul>
<li><a href="#">seccion1</a></li>
<li><a href="#">seccion2</a></li>
<li><a href="#">seccion3</a></li>
<li><a href="#">seccion4</a></li>
<li><a href="#">seccion5</a></li>
</ul>
</div>
</div>
<style>
#contenedor-menu {
background:url(http://1.bp.blogspot.com/-arSD_CecF0U/UDpV_NdaxJI/AAAAAAAABOQ/PT5PxNcPbw0/s1000/fondo-mar-piedras.jpg) bottom;
background-size:cover;
width:100%;
margin:10px auto;
box-shadow:0 5px 15px rgba(0,0,0,.2);
height:80px; /* Alto del contenedor */
overflow:hidden;
position:relative;
}
#menu {
position:absolute;
display:block;
bottom:0;
right:15px;
}
#menu ul {
float:right;
}
#menu ul li {
display:inline-block;
margin:0 10px 0 0;
padding:5px 10px;
background:rgba(0,0,0,.2); /* Fondo del enlace */
cursor:pointer;
border-radius:8px 8px 0 0;
cursor:pointer;
border-radius:4px;
-webkit-transition:.2s;
-moz-transition:.2s;
-o-transition:.2s;
-ms-transition:.2s;
}
#menu ul li:hover {
background:rgba(0, 173, 255, 0.41); /* Fondo al pasar el cursor por encima */
}
#menu ul li a {
display:inline-block;
color:white; /* Color del enlace */
}
</style>

Ejemplo 3

<div id="contenedor-menu">
<div id="menu2">
<ul>
<li><a href="#">seccion1</a></li>
<li><a href="#">seccion2</a></li>
<li><a href="#">seccion3</a></li>
<li><a href="#">seccion4</a></li>
<li><a href="#">seccion5</a></li>
</ul>
</div>
</div>
<style>
#contenedor-menu {
background:url(http://3.bp.blogspot.com/-KRveoMNvDs0/UDpZSB0rzOI/AAAAAAAABOk/Bcmren6Xfm0/s1600/fondo-colorres.jpg) bottom;
background-size:cover;
width:100%;
border-radius:3px;
margin:10px auto;
box-shadow:0 5px 15px rgba(0,0,0,.2);
height:70px; /* Alto del contenedor */
overflow:hidden;
}
#menu {
margin:0 0 0 10px;
}
#menu ul {
text-align:center;
}
#menu ul li {
display:inline-block;
height:70px;
margin:0 10px 0 0;
padding:10px 20px;
background:rgba(255, 247, 0, .5); /* Fondo del enlace */
color:rgba(0,0,0,.8);
cursor:pointer;
-webkit-transition:.2s;
-moz-transition:.2s;
-o-transition:.2s;
-ms-transition:.2s;
}
#menu ul li:hover {
background:rgba(0, 173, 255, 0.41); /* Fondo al pasar el cursor por encima */
}
#menu ul li a {
display:inline-block;
color:rgba(0,0,0,.8); /* Color del enlace */
}
#menu15 ul li:hover a {
color:white; /* Color del enlace al pasar el cursor por encima */
}
</style>

Debes reemplazar los nombres de las secciones y en los # coloca la URL correspondiente. Para agregar otra sección, coloca otra línea así antes de </ul>.

<li><a href="#">seccion</a></li>

También resalté las URL de las imágenes en rojo que puedes cambiar por la imagen que prefieras.
Si quieres cambiar los colores pero no sabes cómo obtenerlos en formato rgba, aquí encontré un práctico convertidor de códigos de colores. Sólo coloca en el cuadro el código hexadecimal del color que puedes encontrar aquí en el cuadrito blanco, presiona "Convert" y abajo aparecerá el código en rgba:

Para aplicar opacidad al color, reemplaza el último 1 por un valor decimal para variar la transparencia. Por ejemplo, transformé el color #FFAA00...

rgba(255,170,0,1)

lo cambio por

rgba(255,170,0,0.5)

Eso seguramente es todo. Adios :)

Ventana flotante con botón cerrar

2012-08-25T15:01:00.002-03:00

Esto será algo muy útil cuando debas dejar algún mensaje o aviso para tus lectores. Se trata de una ventanita, con apariencia similar a las de Windows, que es flotante y tiene la opción de cerrar con un efecto fade utilizando un botón.

Insertarla es muy simple, sólo pega este código en un gadget HTML/Javascript y puedes cambiar algunos valores para personalizar la ventana a tu gusto.

<div id='ventana-flotante'>

   <a class='cerrar' href='javascript:void(0);' onclick='document.getElementById(&apos;ventana-flotante&apos;).className = &apos;oculto&apos;'>x</a>

   <div id='contenedor'>

       <div class='contenido'>
Aquí va el mensaje.

       </div>

   </div>

</div>

<style>
#ventana-flotante {
width: 360px;  /* Ancho de la ventana */
height: 90px;  /* Alto de la ventana */
background: #ceffad;  /* Color de fondo */
position: fixed;
top: 200px;
left: 50%;
margin-left: -180px;
border: 1px solid #adffad;  /* Borde de la ventana */
box-shadow: 0 5px 25px rgba(0,0,0,.1);  /* Sombra */
z-index:999;
}
#ventana-flotante #contenedor {
padding: 25px 10px 10px 10px;
}
#ventana-flotante .cerrar {
float: right;
border-bottom: 1px solid #bbb;
border-left: 1px solid #bbb;
color: #999;
background: white;
line-height: 17px;
text-decoration: none;
padding: 0px 14px;
font-family: Arial;
border-radius: 0 0 0 5px;
box-shadow: -1px 1px white;
font-size: 18px;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
}
#ventana-flotante .cerrar:hover {
background: #ff6868;
color: white;
text-decoration: none;
text-shadow: -1px -1px red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
#ventana-flotante #contenedor .contenido {
padding: 15px;
box-shadow: inset 1px 1px white;
background: #deffc4;  /* Fondo del mensaje */
border: 1px solid #9eff9e;  /* Borde del mensaje */
font-size: 20px;  /* Tamaño del texto del mensaje */
color: #555;  /* Color del texto del mensaje */
text-shadow: 1px 1px white;
margin: 0 auto;
border-radius: 4px;
}
.oculto {-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;-ms-transition:1s;opacity:0;-ms-opacity:0;-moz-opacity:0;visibility:hidden;}
</style>

Con eso ya tendrás todo funcionando, pero hay ciertas cosas a tener en cuenta:
Si cambiaste el ancho de la ventana es posible que esta no se centre en el medio de la página por lo que debes reemplazar el valor de color azul que debe ser exactamente la mitad del valor que pusiste en el ancho de la ventana. En el ejemplo, la ventana tiene 360 pixeles de largo, por lo que puse 180px en el valor resaltado.
Para mover la ventana hacia arriba o hacia abajo cambia el valor en color rojo que es 200 por un valor más alto para que la ventana se posicione más abajo, o un valor más pequeño para llevar la ventana hacia arriba.

Recuerda que en el mensaje puedes incluir además de texto, imágenes, una animación o video, o lo que se te ocurra, ya que es un simple contenedor. Y por cierto, puedes ver una demostración de este truco en este blog de pruebas.

ACTUALIZACIÓN
En Internet Explorer al presionar el botón para cerrar la vantanita, esta no se cierra, por los que deberemos condicionar las cosas para que desaparezca, pero de todos modos no lo hará con efecto fade. Añade esto luego del código anterior:

<!--[if IE]>
<style>
.oculto {display:none}
</style>
<![endif]-->

Efecto biselado con CSS

2012-08-21T18:05:00.004-03:00

Utilizando CSS, podemos crear un efecto de biselado para utilizar en botones, mensajes, contenedores o lo que se les ocurra.

Veremos 2 formas de aplicar este efecto, una utilizando bordes y otra implementando la propiedad box-shadow.

Con los bordes, encontraremos una forma más tradicional que nos permite que los bordes inferior y lateral derecho sean más oscuros simulando relieve.

HTML

<div class="biselado">Texto</div>

Hola, soy un cuadro con outset.

.biselado {
	background: #2323ff;  /* Fondo, debe ser más claro que el borde */
	border: 5px outset #4444ff;  /* Grosor del Borde */  /* Color del Borde */
	color: white;  /* Color del texto */
	text-align: center;  /* Alineación del texto */
	text-shadow: -1px -1px rgba(0,0,0,.2);
}

O podemos lograr el efecto contrario, reemplazando la palabra outset que se encuentra antes del color del borde por inset.

Hola, soy un cuadro con inset.

Veamos ahora una manera más efectva de simular el biselado que se logra utilizando sombras (box-shadow).

Soy un cuadro con biselado.

.biselado {
	border: 1px solid #00cc00; /* Color del borde, debe ser más oscuro que fondo */
	background: #00f400; /* Fondo */
	border-radius: 6px;  /* Bordes redondos */
	box-shadow: inset 3px 3px 3px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.1), 2px 2px 10px rgba(0,0,0,.1);
	text-shadow: 1px 1px 1px rgba(255,255,255,.9);  /* Sombra del texto */
	text-align: center;  /* Alineación del texto */
}

Soy un cuadro con biselado.

.biselado {
	border: 1px solid #00cc00; /* Color del borde, debe ser más claro que fondo */
	background:#00d800; /* Fondo */
	color: #fff;  /* Color del texto */
	border-radius: 6px;  /* Bordes redondos */
	box-shadow:inset 2px 2px 4px rgba(120, 120, 120, .4), inset -3px -3px 3px rgba(255,255,255,.4);
	text-shadow: 1px 1px rgba(0,0,0,.3);  /* Sombra del texto */
	text-align: center;  /* Alineación del texto */
}

Este efecto no vendría nada mal para los botones...

Púlsame

.boton1 {
	box-shadow: inset 3px 3px 3px rgba(255,255,255,.7), inset -2px -2px 3px rgba(0,0,0,.1), 2px 2px 10px rgba(0,0,0,.1);
	width: 90px;  /* Ancho del botón */
	border: 1px solid #9b9bff; /* Borde */
	background: #7777ff;  /* Fondo */
	text-align: center;  /* Alineación del texto */
	text-shadow: -1px -1px rgba(0,0,0,.2);  /* Sombra del texto */
	border-radius: 5px;  /* Bordes redondos */
	color: white;  /* Color del texto */
}
.boton1:active /* Al presionarse el botón */ {
	text-shadow: 1px 1px rgba(0,0,0,.3);  /* Sombra del texto */
	background:#3d3dff;  /* Fondo más oscuro que el original */
	box-shadow:inset 4px 4px 4px rgba(0,0,0,.3), inset -3px -3px 3px rgba(255,255,255,.2);
}

Así como usamos el biselado para mensajes y botones, podés seguir experimentando para encontrarle más usos a este efecto. Saludos

Botón "Suscribirse en Youtube"

2012-08-17T15:29:00.000-03:00

Como debes saber, existen muchos botones de redes sociales que sirven por ejemplo para seguir (en Twitter), agregar a los círculos de amigos (Google +) o para indicar que te gusta cierta página o una persona (Facebook). Navegando por la web encontré un práctico botón para poder suscribirse a los canales de YouTube.
Este es un botón que te permite suscribirte al canal de Google Argentina sin necesidad de salir del blog.

Insertarlo es muy simple, puedes pegar esto en un gadget HTML/Javascript para colocarlo en la sidebar:

Si quieres mostrar el nombre del canal e información sobre el mismo como lo muestro aquí:

Utiliza el siguiente código

Ésas ya serían las dos formas de ofrecerles a tus lectores que se suscriban a tu canal, o a cualquier otro canal que te interese.

Texto con borde

2012-06-25T17:33:00.000-03:00

¿TEXTO CON BORDE? ¿Posible hacerlo sólo con CSS?
SI ES POSIBLE
NOTA: Esta propiedad no es compatible con todos los navegadores. Se recomienda Chrome o Firefox.

Para lograrlo, debemos aplicar la propiedad text-shadow para lograr muchas sombras del mismo color simulando un sólo borde.

A <div class="texto1">Texto</div> le aplicaremos:

.texto1 {
color:white; /* Color del texto */
text-shadow: 1px 1px 0 blue,
-1px -1px blue,
1px -1px blue,
-1px 1px blue,
0 1px blue,
1px 0 blue,
-1px 0 blue,
0 -1px blue;
}

Puedes cambiar blue por el color que desees.

Aquí mas ejemplos.

borde

.texto2 {
color:#AAFFB1;
background:#AAFFB1;
padding:20px 80px;
text-shadow: 1px 1px 0 #2F7235, -1px -1px #2F7235, 1px -1px #2F7235, -1px 1px #2F7235, 0 1px #2F7235, 1px 0 #2F7235, -1px 0 #2F7235, 0 -1px #2F7235;
}

texto

.texto3 {
color:black;
background:#aaa;
padding:20px 80px;
text-shadow: 1px 1px 0 white, -1px -1px white, 1px -1px white, -1px 1px white, 0 1px white, 1px 0 white, -1px 0 white, 0 -1px white, -25px 0 #bbb, 25px 0 #b8b8b8;
}

BLOG

cinco

Galería de Imágenes Simple, con Javascript y CSS

2012-05-16T15:33:00.004-03:00

¡Hola! Ya extrañaba escribir en mi blog. Vuelvo con esta genial galería de imágenes que es muy fácil de insertar y es súper simple.

Sólo es necesario insertar el HTML, y decorarlo un poco con CSS, veamos:

<div id="galeria">
 <div id="galeria_imagen">
 <img id="imgGaleria" src="URL-IMAGEN-POR-DEFECTO" /></div>
 <div id="galeria_miniaturas">
 <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src="URL-IMAGEN-1" />
 <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src="URL-IMAGEN-2" />
 <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src="URL-IMAGEN-3" />
 <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src="URL-IMAGEN-4" />
 <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src="URL-IMAGEN-5" />
 </div>
 </div>

Recuerda que para agregar más miniaturas, y al mismo tiempo, otra imagen, sólo pega lo siguiente antes del penúltimo </div>

<img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src" src="URL-IMAGEN />

Continuemos con el CSS

#galeria, #galeria * {box-sizing:border-box}
#galeria {
border: 1px solid #EAEAEA;  /* Borde de la galería */
padding: 10px;
padding-bottom: 0;
background: white;  /* Fondo de la galería */
width: 410px;  /* Ancho de la galería */
}
#galeria_miniaturas {
display: table;
margin: 0 auto;
}
#imgGaleria {
border: 1px solid #F2F2F2;  /* Borde de la imagen */
padding: 3px;
width: x; /* Ancho de la imagen */
height: x; /* Alto de la imagen */
}
.miniatura {
width:  60px;  /* Ancho de las miniaturas */
height:  60px;  /* Alto de las miniaturas */
float: left;
cursor: pointer;
padding: 5px;
margin: 10px 5px;
}
.miniatura:hover {
opacity:.8;   /* Opacidad */
}
.miniatura:active {
opacity:1;
}

Eso sería todo lo necesario para poner en marcha esta galería. ¡Hasta la próxima idea!

Transformaciones CSS - rotate

2012-05-05T12:06:00.000-03:00

Ya vimos anteriormente las transformaciones:

scale y
translate

Ahora volvamos a trabajar con la propiedad -transform: rotate.
Acá tenemos algunos ejemplos en los que tenemos una misma imagen, pero se les aplican diferentes valores de transformación.

rotate(5deg)

rotate(-5deg)

rotate(180deg)

rotate(90deg)

rotate(-90deg)

Veamos el código que utilizamos para aplicar rotación en las imágenes.

.ejemplo1 {
-webkit-transform:scale(1) rotate(xdeg);
-moz-transform:scale(1) rotate(xdeg);
-o-transform:scale(1) rotate(xdeg);
-ms-transform:scale(1) rotate(xdeg);
}

Sólo hay que reemplazar la X por el valor que quieras. Hay que tener en cuenta que

Si el valor es positivo, el elemento rotará hacia la derecha.
Si es negativo, girará hacia la izquierda.

Veamos un último ejemplo aplicando la transformación con :hover

ahora viceversa

Veamos el CSS

Ejemplo 6

.ejemplo6 {
width:300px;
background:white;
padding:6px;
border:1px solid #e9e9e9; /* Borde */
-webkit-box-shadow:0 0 8px #e9e9e9; /* Sombra */
-moz-box-shadow:0 0 8px #e9e9e9;
-o-box-shadow:0 0 8px #e9e9e9;
-ms-box-shadow:0 0 8px #e9e9e9;
-webkit-transition:.6s; /* Transición */
-moz-transition:.6s;
-o-transition:.6s;
-ms-transition:.6s;
}
.ejemplo6:hover {
-webkit-transform: rotate(-30deg); /* Rotación */
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-webkit-transition:1s; /* Transición */
-moz-transition:1s;
-o-transition:1s;
-ms-transition:1s;}
}

Ejemplo 7

.ejemplo7 {
width:300px;
background:white;
padding:6px;
border:1px solid #e9e9e9; /* Borde */
-webkit-box-shadow:0 0 8px #e9e9e9; /* Sombra */
-moz-box-shadow:0 0 8px #e9e9e9;
-o-box-shadow:0 0 8px #e9e9e9;
-ms-box-shadow:0 0 8px #e9e9e9;
-webkit-transform: rotate(-30deg); /* Rotación */
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-webkit-transition:.6s; /* Transición */
-moz-transition:.6s;
-o-transition:.6s;
-ms-transition:.6s;
}
.ejemplo6:hover {
-webkit-transform: rotate(0deg); /* Rotación */
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transition:1s; /* Transición */
-moz-transition:1s;
-o-transition:1s;
-ms-transition:1s;}
}

Eso es todo. En el siguiente tutorial sobre transformaciones CSS veremos cómo combinar todas las transformaciones que vimos, para lograr sorprendentes efectos en las imágenes y contenedores. Hasta la próxima.

Acceder a Blogger desde el escritorio de Windows, con Chrome

2012-05-01T17:11:00.000-03:00

Aprovechando la aplicación de Blogger para Chrome, crearemos un acceso directo para poder acceder rápidamente a través del escritorio del sistema operativo Microsoft Windows. Y también veremos cómo anclar un acceso directo al menú Inicio y la barra de tareas.

Primero, debemos tener instalado Google Chrome, y lo podemos descargar gratuitamente a través del enlace que les dejé.
Ahora deberemos instalar la aplicación de Blogger a nuestro navegador ingresando a este enlace.
Al ingresar aparecerá una pantalla similar a ésta. Pincha + añadir a chrome.

Luego de unos segundos se nos abrirá la ventana donde se encuentran todas tus aplicaciones, donde estará la de Blogger.

Encuentra el icono de Blogger y dale clic con el botón derecho del mouse.

Selecciona Crear accesos directos del menú. Aparecerá una ventanita así:

Queda a tu criterio elegir dónde crear los accesos directos: en el Escritorio, el Menú Inicio, o la barra de tareas.
Luego de marcar las casillas, presiona Crear y automáticamente se crearán los íconos para acceder a Blogger.

Ahora ya podrás acceder rápida y cómodamente a Blogger sin necesidad de abrir el navegador y tipear la dirección.

Espero que aproveches este truco y no tengas inconvenientes.