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

Acordeón de Imágenes con CSS

lunes, 2 de julio de 2012


Una moda muy común ahora en día es la utilización de sliders de imágenes en los sites, lo que sin duda le da un toque muy elegante y vistoso. Pero la incorporación de un slider demanda la utilización de complicado código Java.


Pues una alternativa seria usar imágenes en miniatura o fragmentos que al colocar el puntero encima nos muestre la imagen en tamaño completo, Pero esto también no implicaría la utilización de código Java? la respuesta a esta pregunta es NO!
Ya que podemos conseguir este efecto con solo un poco de código CSS. Aqui esta como podemos hacerlo:

Paso 1


Para conseguir el efecto utilizaremos una tabla, entonces lo primero que debemos hacer es definir las propiedades de esta:
.acordeon {
   border-collapse:collapse;
   padding:0px;
   margin:0px auto;
   width:690px;
   height:20px;
   box-shadow: 0 0 10px #333;
}

Paso 2


Una vez tengamos esto, lo que haremos sera definir la etiqueta td de la tabla, que serán las casillas que contendrán las imágenes. Para esto definimos el siguiente codigo:
.acordeon td {
   padding:0;
   width:136px;
   height:117px;
   border:2px solid #fff;
   -moz-transition: 0.7s;
   -ms-transition: 0.7s;
   -o-transition: 0.7s;
   -webkit-transition: 0.7s;
   transition: 0.7s;
}

Paso 3


Ahora, con esto tenemos las propiedades básicas de la celda, pero tenemos que definir algo diferente para cada celda, entonces hacemos esto:
.acordeon td.p1 {
   background:url(RUTA IMAGEN 1) no-repeat center center;}
.acordeon td.p2 {
   background:url(RUTA IMAGEN 2) no-repeat center center;}
.acordeon td.p3 {
   background:url(RUTA IMAGEN 3) no-repeat center center;}
.acordeon td.p4 {
   background:url(RUTA IMAGEN 4) no-repeat center center;}
.acordeon td.p5 {
   background:url(RUTA IMAGEN 5) no-repeat center center;}

....

Paso 4


Esta propiedad la podemos definir tantas veces como querramos o necesitemos.
Ahora solo falta establecer las propiedades del :hover, añadimos este codigo:
.acordeon td {
   width:50px;
   height:50px;
}

.acordeon tr:hover td {
   height:320px;
}

.acordeon td:hover {
   width:480px;
   height:320px;
}
Y... esto seria todo el código CSS que tendríamos que escribir, ahora solo falta la implementación. Para hacer esto realizamos los siguientes pasos:
  1. Crear una nueva tabla
  2. Asignarle a la tabla la clase acordeon
  3. Asignarle a cada celda (etiqueta td) de la tabla una de las propiedades creadas en el tercer paso
Y eso seria todo, aqui una pequeña previsualización:
Solo tienen que ir jugando con los tamaños, la cantidad de celdas, colores , etc.

Campo de Búsqueda ajustable en la Barra de Navegación


Un campo de búsqueda siempre es útil ya que permite al lector encontrar el articulo que busca sin la tediosa necesidad de tener que hurgar en el historial, si es que el sitio dispone de el, o interminables listas de títulos. Colocar uno en nuestro site sin duda sera muy agradecido por los lectores.


Pero cuando pensamos en colocar uno nos genera la incógnita de que aspecto debe tener, ¿Cómo lo queremos?, ¿Donde lo queremos? e interrogantes de ese tipo, pues aquí un sencillo ejemplo que podría sernos útil al momento de diseñar e implementar nuestro campo de búsqueda.

Lo primero que haremos sera definir ciertas propiedades de código CSS, la primera que haremos sera la que define la apariencia de la barra de navegación:
#menu {
   width: 1000px;
   height: 50px;
   margin:10px auto;
   background:#d1d1d1 url(RUTA DEGRADADO DE FONDO) repeat-x;
   padding:0;
   border-radius: 10px;
   box-shadow: 0px 2px 2px #333 inset, 0px -2px 2px #ccc inset;
}
Ahora para lograr que las celdas que contienes los enlaces se ajusten al activar el campo de búsqueda, usaremos una tabla, asi que ahora definimos la apariencia de estas celdas, osea las columnas de la tabla.
#menu .celda {
   background: url(RUTA DEL SEPARADOR) center right no-repeat;
   text-align:center;
}
Ahora definimos unas propiedades de :hover, que no es mas que la apariencia que toma cuando se coloca el cursor encima, y también la apariencia del enlace:
#menu .celda a {
   display:block;
   color:#000000;
   padding:16px 0;
   text-decoration:none;
   letter-spacing:1px;
   text-transform:uppercase;
   font-weight:bold;
}

#menu .celda a:hover { color:#fff }

#menu .celda:hover {
   background:url(IMAGEN AL COLOCAR EL CURSO ENCIMA) center bottom no-repeat, url(RUTA DEL SEPARADOR) center right no-repeat;}
Este seria todo el código necesario para la apariencia de la barra de navegación, ahora lo que en realidad nos compete, el campo de búsqueda, para este definimos las siguientes propiedades:
#input {
   color:#333333;
   padding:5px;
   background:#e2e2e2 url(IMAGEN DE FONDO) center right no-repeat;
   width:160px;
   border-radius:5px;
   border:solid 1px #999999;
   float:right;
   margin: 0px 15px;
   -moz-transition: all 0.5s ease-out;
   -webkit-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;
}

#input:hover {
   background:#fff url(images/search.png) center right no-repeat;}

#input:focus {
   background:#FFFFFF url(images/search.png) center right no-repeat;
   width:220px;
   border-color: #666666;
   outline:none;}
La propiedad transition que he definido el la etiqueta #input hará que el cambio no sea drástico sino que un poco suavizada.
OK, este ya seria todo el código CSS necesario, ahora procedamos al código HTML, este seria algo como esto:
<table width="1000" border="0" cellpadding="0" cellspacing="0" id="menu">
  <tr>
     <td width="16%" class="celda"><a href="#">home</a></td>
     <td width="16%" class="celda"><a href="#">about</a></td>
     <td width="16%" class="celda"><a href="#">gallery</a></td>
     <td width="16%" class="celda"><a href="#">contact</a></td>
     <td width="16%" class="celda"><a href="#">support</a></td>
     <td width="20%"><form action="#" method="post">
       <input type="text" id="input"  onfocus="if (this.value == 'Search my site...') {this.value = '';}" onblur="if (this.value == '') {this.value ='Search my site...';}" value="Search my site..." />
  </form></td>
  </tr>
</table>
Este yo lo he escrito para generar una barra de navegación con un ancho de 1000px, centrada y 5 enlaces y el campo de búsqueda, pueden ir experimentando cambiando la cantidad de enlaces variando el ancho, la posición y lo que quieran.

Aquí pueden ver una visualización del resultado final.
Enlace : Barra de navegación con campo de búsqueda ajustable

Texto biselado con CSS


Ciertas veces no nos sentimos contentos con colocar nuestros títulos (Encabezados) con una fuente distinta, fondo y tamaño, sino que queremos un poco mas, pues si eres de esos inconformes aquí un tip que podría serte de gran utilidad.


Para lograr nuestro acometido nos valdremos de la propiedad text-shadow, bueno el codigo que tenemos que agregar es el siguiente:
.texto-biselado {
text-shadow: 0 -1px 0 #333, 0 1px 0 #EAEAEA;
font-family: Consolas, sans-serif;
font-size: 50px;
font-weight: bold;
}
Los valores que se asignan en la propiedad de sombra de texto (text-shadow) son:
1er valor: Desplazamiento horizontal
2do valor: Desplazamiento Vertical
3er valor: Desenfoque
4to valor: Color
Y como podrán observar he colocado dos especificaciones en el atributo, por decirlo de cierto modo, bueno estos dos 'atributos' especifican, el primero es la sombra del bisel, mientras que el segundo es la iluminación del mismo. El resultado seria algo como esto:
Texto Biselado
Ahora podemos invertir los valores y obtenemos este aspecto:
Texto Biselado
También podemos agregar otro valor en el código y darle al bisel un aspecto suavizado, el código quedaría de la siguiente forma:
.texto-biselado {
text-shadow: 0 1px 1px #333, 0 -1px 1px #EAEAEA;
}
La apariencia con este codigo seria:
Texto Biselado
Eso seria todo, ahora solo queda experimentar con los valores y colores para lograr distintos efectos.

3D Magic, Accion para Photoshop


3D magic es una fabulosa accion para Photoshop que sin duda te dejara con la boca abierta, ya que no es esa típica acción para fotografías que cambien el color, la saturación, el tono o algo asi.


Esta maravillosa "herramienta" nos permite aplicar un efecto 3D con un muy buen acabado, ademas se puede trabajar con formas, texto y capas corrientes.
Aqui un videito para entender el funcionamiento de la accion y su instalacion:



Descarga: 3D MAGIC

Esquinas redondeadas con CSS

Las esquinas redondeadas son un pequeño detalle que sin duda le dan un toque muy llamativo a un sitio.
Anteriormente para conseguir esto era necesario la utilización de imágenes o código Java o ese tipo de cosas, ahora esto no es necesario, ya que con solo escribir un par de lineas de código CSS3 es suficiente.


Para conseguir el efecto tenemos que hacer uso de la propiedad border-radius.
Claro que para esto es necesario la utilización de unos prefijos especiales, estos son:
-webkit , para Chrome y Safari
-moz , para Mozilla
-o , para Opera y
-ms , para Explorer

Entonces el código nos quedaría de la siguiente manera:
.esquinas-redondeadas {
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -o-border-radius: 10px;
   -ms-border-radius: 10px;
   border-radius: 10px;
}
También ay que decir que al escribir un solo valor le estamos diciendo al navegador que a todas las esquinas les de el mismo valor, entonces seria lo mismo escribir:
.esquinas-redondeadas {
   border-radius-topleft: 10px;
   border-radius-topright: 10px;
   border-radius-bottomleft: 10px;
   border-radius-bottomright: 10px;
}
Pero si queremos que cada esquina tenga un valor diferente podemos escribirlo de la siguiente forma:
.esquinas-redondeadas {
   border-radius: 10px 20px 30px 40px;
}
Que seria lo equivalente a:
.esquinas-redondeadas {
   border-radius-topleft: 10px;
   border-radius-topright: 20px;
   border-radius-bottomright: 30px;
   border-radius-bottomleft: 40px;
}
El resultado seria algo como esto:
DIV con esquinas redondeadas irregulares.
Y bueno eso seria todo, espero les sirva. Y nos leemos luego!
Sin embargo les dejo un enlace a una aplicación online que genera todo el código CSS necesario para generar cajas redondeadas:

Enlace: Aplicación

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