Hello.

Bienvenido a mi blog, un lugar donde podrás encontrar publicaciones que tal vez puedan serte de ayuda acerca de temas variados del diseño, También recursos entre otras cosas. :)

Efecto Hover en Elementos Circulares

viernes, 13 de julio de 2012

Ya había publicado por ahí unos ejemplos de unos hovers sobre unas imágenes (Llamativos efectos de hover con CSS), ahora he traido nuevamente un ejemplo similar, pero esta vez con un elemento circular.

El Marco


Para implementar esto lo que haremos sera colocar un enlace y a este enlace es al que le asignaremos las características CSS. También dentro de este enlace, dentro de la etiqueta a colocaremos un texto como encabezado que sera la caption que se mostrara al colocar el cursor encima de la imagen.
<a href="#" class="circle">
     <h3>hovered</h3>
</a>

El CSS


Aquí vamos a definir las propiedades CSS, la imagen que se mostrara como enlace la implementaremos como background.
a:link, a:hover, a:visited {
    text-decoration:none;
    color:white;
}
Ahora definimos las propiedades de el enlace como tal.
.circle {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    font-family:'Kelly Slab', Georgia, serif;
    background: #dda994 url(RUTA IMAGEN) no-repeat center center;
    box-shadow:
        inset 0 0 1px 230px rgba(0,0,0,0.6),
        inset 0 0 0 7px #d5ad94;
    transition: box-shadow 400ms ease-in-out;
    display: block;
    outline: none;
    margin:0 auto;
}
Seguido de esto definimos el atributo de hover. Que en este ejemplo solo variara la sombra.
.circle:hover {
    box-shadow:
        inset 0 0 0 0 rgba(0,0,0,0.6),
        inset 0 0 0 20px #c18167,
        0 0 10px rgba(0,0,0,0.3);
}
Y para terminar con el CSS definimos la propiedades del texto.
/* the text inside */
.circle h3{
    color: transparent;
    font-size: 50px;
    margin-top: 280px;
    text-shadow: 0px 0px 100px #fff;
    text-transform: uppercase;
    font-weight:lighter;
    transition: all 400ms ease-in-out;
}

.circle:hover h3{
    text-shadow: 0px 0px 1px #fff;
    background: rgba(0,0,0,0.3);
}
Para finalizar tenemos la visualización en acción.



Hover para elementos circulares

Lonely - Tutorial Manipulación con Photoshop

martes, 10 de julio de 2012

He decidido traer un magnifico tutorial que he encontrado en Psdbox este tutorial es una sencilla pero llamativa y muy estilizada composicion, en la con unos pocos stock se conseguirá un gran resultado.
En este composición la parte importante son las opciones de fusión y efectos de iluminación, es un tutorial un poco avanzado pero hay suficientes detalles para poder seguirlo muy fácilmente.

Stock utilizados:


Introducción

Aunque solo usemos unos pocos stocks el verdadero "desafió" sera crear la iluminación y el ambiente nocturno. Para esto nos valdremos de modos de fusión y capas de ajuste.
So let's start.


Paso 1

Creamos un nuevo documento de 2500 x 2800 px, luego de esto pegamos la imagen del desierto. La renombramos Fondo. Esta va a ser la base para nuestra manipulación, pero no necesitamos el cielo (este lo añadiremos mas tarde). Podríamos fácilmente enmascararlo pero como lo que queremos crear es una escena nocturna, añadimos una Superposición de degradado de negro a transparente en los estilos de capa para cubir el cielo y parte del suelo.
Veras la importancia de este degradado en el siguiente paso.

Paso 2

Ahora abrimos la imagen del cielo y la pegamos en una nueva capa encima de la capa Fondo, la renombrados Cielo. Incrementamos el tamaño de esta imagen ya no la cubre por completo. Creamos una mascara de capa en la capa Cielo y usando un pincel suave, cubrimos la parte inferior.
En las siguientes capturas podemos la diferencia que hace la superposición de degradado del primer paso.

Paso 3

Abrimos la imagen de la chica y la extraemos del fondo usando cualquier técnica, con la que te sientas mas cómodo o mas domines. Personalmente prefiero usar la herramienta pluma para realizar un trazado y luego una mascara, pero como dije puedes usar cualquier técnica solo asegúrate de dejar bordes limpios. En el área del cabello he usado Refine Mask
para lograr extraerlo por completo.

Una vez tengamos la chica extraída del fondo, la pegamos en una nueva capa a la que llamremos Chica.

Paso 4

Ya tenemos la estructura básica para nuestra manipulación. Es tiempo de trabajar en el ambiente, empezaremos haciendo unos ajustes al suelo usando algunas capas de ajuste.

  • Curvas para oscurecer el fondo

  • Filtro de fotografía para hacer el  fondo mas cálido

  • Equilibrio de color para agregar mas "drama" al fondo
  • Mapa de degradado para oscurecer y colorear el fondo

En la imagen de arriba puedes observar como queda nuestra paleta de capas.

Paso 5

Ahora haremos algunos ajustes al cielo. Noten que esta vez haremos los ajustes utilizando mascaras de recortes porque solo queremos que se afecte el cielo pero no la capa fondo

  • Equilibrio de color
  • Niveles para oscurecer el cielo


Paso 6

Nuestro fondo ya esta listo. Es hora de trabajar con la imagen de la chica. Vamos a añadir la sombra, para esto usaremos dos técnicas diferentes.

  1. Sombra proyectada, para esto duplicamos la capa de la chica, la rastrerizamos si acaso la tenias como objeto inteligente, reducimos la luminosidad a 0 con el ajustes de Tono/Saturacion. Usamos entonces la opcion de distorsionar en transformación libre y la colocamos sobre el suelo, la proyectamos a la izquierda porque sabemos que la fuente principal de luz va a estar a la derecha de la chica.
  2. Sombra suave, la sombra proyectada no es suficiente. Por eso añadiremos una segunda capa de sombra, donde con un pincel suave y con opacidad y flujo al 50% pintamos las áreas donde el cuerpo toca el suelo. Luego bajamos la opacidad y el flujo a 25% y pintamos una gran área alrededor de la chica. Ya con esto seria suficiente.

Paso 7

Aqui es donde las cosas se ponen un poco complicadas. Empezaremos a trabajar el la iluminación y sombreado de la chica. En este paso necesitamos oscurecer la parte izquierda de el cuerpo. Crearemos tres tipos de sombras usando la Herramienta Degradado, y los efectos de Superposición de Degradado y Sombra interna.

Primero abrimos los estilos de capa de la capa chica y aaplicamos una superposición de degradado y Sombra interior usando las configuraciones mostradas en la imagen de abajo.

Ahora creamos una nueva capa y activamos la mascara de recorte, seleccionamos la herramienta Degradado y creamos un degradado lineal de negro a transparente.
Dibujamos como muestra la imagen para cubrir la parte izquierda del cuerpo de la chica.
Asi es como debe lucir nuestra imagen ahora.

Paso 8

Ya hemos terminado con las sombras pero ahora tenemos que crear algunos ajustes de color e iluminación. Primero configuremos las capas de ajustes, una vez mas usando mascaras de recorte.


  • Mapa de degradado para mas contraste y algo de emparejamiento de color
  • Niveles para oscurecer el cielo
  • Equilibrio de color para emparejar el color con el ambiente nocturno

ahora luce como si hubiéramos destruido por completo la imagen pero calma, aun tenemos que añadir efectos de iluminación que lo "solucionaran".

Paso 9

Abrimos la imagen de la lampara, la extraemos del fondo y la pegamos en una nueva capa encima de todo lo demas, a esta capa la he nombrado lampara, luego creamos la sombra usando el método de la sombra suave utilizado en el paso 6, y un efecto de sombra interna.

Paso 10

Empecemos a crear el primer efecto de iluminación, nuestra fuente de luz principal es la lampara así que empecemos ahí.
Primero creamos el resplandor de la llama como lo indica la siguiente imagen.

Paso 11

Ahora pintamos algo de luz sobre el suelo con la herramienta pincel y el color #7a5821. En la imagen puse modo de fusión normal para poder observar mejor donde estamos pintando pero debemos usar Sobreexponer Color.


Paso 12

Ahora tenemos que iluminar el cuerpo de la chica. Creamos una nueva capa y pintamos tal cual se muestra en la imagen, luego cambiemos el modo de fusion a Sobreexponer Color.
Para pintar tenemos que imaginarnos como la luz llegaría al cuerpo y como deberían lucir esas áreas. Básicamente tenemos que pintar sobre el lado derecho, recuerda que trabajamos duro para oscurecer el lado izquierdo del cuerpo asi que no pintes mucho sobre esa zona.
Si quieres un efecto de iluminado mas fuerte puedes duplicar esta capa y bajarle un poco la opacidad, si por el contrario piensas que esta muy fuerte solo bajale la opacidad a la capa.

Paso 13

Una vez tengamos los efectos de iluminacion, podemos iniciar con la Sub exposición y la Sobre exposición . Esta es una técnica que requiere de practica, practica que iras adquiriendo con el tiempo.
Pero en que consiste esta técnica? -Primero creamos una nueva capa a la rellenaremos con 50% de gris, luego de hacer esto cambiamos el modo de fusión a superponer, hasta aquí no tiene que haber pasado nada. Una vez hallamos hecho esto con las herramientas Subexponer y Sobreexponer iniciaremos a oscurecer las áreas que queramos que sean mas oscuras y viceversa, aclarar las áreas que queramos que tengan mas luz. Todo esto sobre la capa que esta rellena con gris al 50%. Yo he pintado mi capa y asi es como ha quedado.

Esta capa lo que hará sera darle un toque mas dramático a nuestra composición.

Paso 14

Es tiempo de añadir los ajustes finales. Primero selecciona la primera capa o grupo que tengas en tu paleta y presiona Ctrl+Alt+Shift+E o Shift+Command+Option+E (Mac OS) para crear una nueva capa con una estampa de nuestra composicion tal cual luce ahora. Con la nueva capa creada, vamos a Imagen>Ajustes>Variaciones y seleccionamos Más Cian.
Cambiamos el modo de fusión a Oscurecer y cambiamos la opacidad a 25%

Paso 15

Creamos otra estampa justo como en el paso anterior y convertimos esta capa a objeto inteligente, despues de esto vamos a Filtro>Interpretar>efectos de Iluminación y aplicamos las siguientes configuraciones.

Paso 16

Ahora el toque final, dos ajustes mas para hacerlo lucir perfecto ;)


  • Mapa de Degradado para cambiar el tono
  • Equilibrio de Color para un ultimo toque de color


Y voilà, aquí lo tenemos. Espero que hallan obtenido un buen resultado.
Imagen a tamaño real


Cubo con CSS

domingo, 8 de julio de 2012

Hacer que nuestro site, blog, etc, sea más llamativo siempre nos genera muchas inquietudes de como podemos conseguir esto.
Una de las maneras mas fácil de hacerlo es sin duda con el CSS que nos brinda múltiples opciones y lo mejor es que no aumento en mucho el tiempo de carga de la pagina.
Aquí he traído una sencilla pero llamativa manera de mostrar un contenido corto. Esto es con un cubo en 3D.

El marco


Para esto solo crearemos un contenedor en el que ubicaremos tres etiquetas div en su interior y que seran las responsables de alojar el contenido de cada cara.
<div class="cube">
<div class="topFace">
<div> ... el contenido de la cara superior ... </div>
</div>
<div class="leftFace"> ... el contenido de la cara izquierda ...
</div>
<div class="rightFace"> ... el contenido de la cara derecha ...
</div>
</div>

El CSS


Aquí vamos a definir las propiedades del cubo y de cada una de las caras.
.cube {
    height: 480px;
    left: 150px;
    position: relative;
    top: 150px;
    width: 600px;
}
.rightFace, .leftFace, .topFace div {
    padding: 10px;
    height: 180px;
    width: 180px;
}
.rightFace,.leftFace,.topFace {
    position: absolute;
}
.leftFace {
    transform: skewY(30deg);
    background-color: #9AB;
}
.rightFace {
    transform: skewY(-30deg);
    background-color: #89A;
    left: 200px;
}
.topFace div {
    transform: skewY(-30deg) scaleY(1.16);
    background-color: #ABC;
}
.topFace {
    transform: rotate(60deg);
    left: 100px;
    top: -158px;
}
Para finalizar aquí tenemos la previsualización de este efecto.




... el contenido de la cara superior ...
... el contenido de la cara izquierda ...
... el contenido de la cara derecha ...

Lo único que tenemos que hacer es jugar con los colores, tamaños y rotaciones para adaptarlo a nuestro gusto y necesidades.

Llamativos Efectos de Hover con CSS

miércoles, 4 de julio de 2012

El poder del CSS3 ciertamente es impresionante, para muestra de esto, navegando por ahí, en cierta pagina (Codrops), me encontré con unos tutoriales de unos fantásticos efectos de hover sobre una imagen.
Estos al colocar el cursor sobre la imagen, aparece un titulo una breve descripción y un botón con un link. Aquí he traído la implementación de un par de estos efectos.

Lo primero que haremos sera crear el marco

El Marco


La estructura del marco es muy sencilla. Creamos un contenedor (div) que tendrá la imagen y la información de la descripción.

Dentro de view insertamos un elemento con la clase mask que sera la responsable de que nuestro efecto corra y dentro del cual pondremos un titulo, una descripcion y un link.
<div class="view">
     <img src="RUTA IMAGEN" />
     <div class="mask">
     <h2>TITULO</h2>
     <p>DESCRIPCION</p>
         <a href="#" class="info">Ver Mas</a>
     </div>
</div>


El CSS


Despues de crear nuestro marco, vamos a configurar los estilos.
Primero configuramos las reglas principales y luego añadiremos algunas propiedades especiales para crear dos efectos distintos.
Pero antes hay que decir que todos los tamaños (Anchos y altos) que utilizaremos estarán definidos por las dimensiones de nuestra imagen, yo he trabajado con una imagen de 500 x 200 px.
.view {
    width: 500px;
    height: 200px;
    margin: 10px;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 0 0 5px #666;
    cursor: default;
}
.view .mask, .view .content {
    width: 500px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}

Ahora si, veamos dos ejemplos.

Ejemplo 1


Añadimos la etiqueta especial view-first al elemento con la clase view.
<div class="view view-first">
   <img src="RUTA IMAGEN" />
   <div class="mask">
      <h2>TITULO</h2>
      <p>DESCRIPCION</p>
   <a href="#" class="info">READ MORE</a>
   </div>
</div>
En este efecto solo se aplicara algunas transiciones basicas para crear el efecto de hover.
.view-first img {
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(129,225,233, 0.8);
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
Ahora viene el corazón de nuestro efecto, Cuando pongamos el mouse sobre la imagen. Podemos usar la propoidad delay para emular las animaciones. La transicion delay que se usa en el hover puede se alterada, para hacerlo diferente de la clase normal. En este ejemplo no hay no hay ningun delay en la clase normal, pero si esta en el hover, lo que hara que la animacion inicie un poco tarde.
.view-first:hover img {
    transform: scale(1.1);
}
.view-first:hover .mask {
    opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
   transition-delay: 0.2s;
}


Ejemplo 2


En este segundo ejemplo vamos a añadir la clase especial view-second y usaremos la propiedad translate con el transition-timing-funtion ("control del tiempo"), ease-in-out con la intención de deslizar el contenido hacia la izquierda.
.view-second img {
    transition: all 0.3s ease-in-out;
}
.view-second .mask {
    background-color: rgba(129,225,233,0.8);
    transform: translateX(-500px);
    opacity: 1;
    transition: all 0.4s ease-in-out;
}
.view-second h2{
    background: rgba(255, 255, 255, 0.6);
    color: #000;
    box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-second p{
    opacity: 0;
    color: #333;
    transition: all 0.2s linear;
}
En el efecto la imagen se ira hacia la derecha y la descripción vendrá desde la izquierda.
.view-second:hover .mask {
    transform: translateX(0px);
}
.view- second:hover img {
    transform: translateX(500px);
    transition-delay: 0.1s;
}
.view- second:hover p{
    opacity: 1;
    transition-delay: 0.4s;
}
Aqui esta la previsualización de estos dos ejemplos.


Y eso seria todo. Pueden ver estos y otros 8 ejemplos mas directamente en la pagina del autor. En ingles.
Enlace: Original Hover Effects with CSS3

 
Click sobre Click © 2012 | Designed by Bubble Shooter, in collaboration with Reseller Hosting , Forum Jual Beli and Business Solutions