Diablo III Efecto de Texto en Photoshop

“Harry Potter” Efecto de Texto en Phoshop

“Texto Caramelo” Efecto de Texto en Photoshop

Efecto de Texto Oro en Photoshop

“Purple Glow” Efecto de Texto en Photoshop

Efecto de Texto Hierro en Photoshop

Efecto de Texto Aquarela en Photoshop

Efecto de Texto Frozen en Photoshop

Efecto de Texto Galleta en Photoshop

Crear Texto en Llamas en photoshop

Efecto de Texto Liquido en Photoshop

Efecto de Texto Peluche en Photoshop

Crear Texto Fantasma en Photoshop

Efecto de Texto Humo en Photoshop usando smodge tool

Crear Efecto de Texto Retro en Photoshop

Veremos una forma rápida y sencilla de cambiar los estilos de los checkbox y radio button con css3, usando el pseudo selector :checked, seremos capaces de apuntar a un elemento basándonos en su estado activo o desactivo(checked o unchecked).

Creación de nuestro HTML

Solo se mostrara esta técnica para un elemento checkbox, pero sera el mismo proceso para los radio button, y se podrá apreciar mejor en el demo.

Comenzamos creando nuestro checkbox seguido de un label

 <input type="checkbox">
 <label>Checkbox</label>

Ahora asociamos el elemento label a nuestro checkbox, esto se hace mediante el uso de for=”" y el id del checkbox

<input type="checkbox" id="c1" name="cc">
<label for="c1"><span></span> Checkbox</label>

También se agrego un <span> dentro del label, se vera el porque al momento de aplicar los estilos.

Estilos CSS

Aquí es donde empieza la diversión, lo primero que haremos, que es el motivo de este tutorial, sera ocultar el checkbox

 input[type="checkbox"]{
   display: none;
 }

Una vez realizado esto podemos dar le mas estilos al label, pero mas específicamente al elemento span dentro del label, lo haremos de esta manera con el fin de dar mas control sobre la posición exacta del checkbox.

input[type="checkbox"]{ display: none; }

input[type="checkbox"] + label span{
  display: inline-block;
  width: 19px;
  height: 19px;
  background: url(img/check_radio_sheet.png) left top no-repeat;
}

Como podemos observar hemos aplicado estilos al elemento <span> asignadole una imagen background  de tipo css sprite, y un alto y ancho del mismo tamaño de cada sprite, por lo que sera mas fácil definir cada estado.

Nuestra imagen Sprite

Y este el estilo completo para el css

input[type="checkbox"]{ display: none; }

input[type="checkbox"] + label span{
  display: inline-block;
  width: 19px;
  height: 19px;
  background: url(img/check_radio_sheet.png) left top no-repeat;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor:pointer;
}

Lo ultimo que necesitamos es proporcionar un estado para el elemento cuando el checkbox este marcado(checked), esto es muy sencillo, basta con echar un vistazo al evento checked desde el css

input[type="checkbox"]{ display: none; }

input[type="checkbox"] + label span{
  display: inline-block;
  width: 19px;
  height: 19px;
  background: url(img/check_radio_sheet.png) left top no-repeat;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor:pointer;
}

input[type="checkbox"]:checked + label span{
  background: url(img/check_radio_sheet.png) -19px top no-repeat;
}

Tener en cuenta que debido a que estamos usando una imagen sprite, lo único que se tiene que hacer es cambiar el background position, notar también que todo lo que tenia que ver con los estilos del elemento span cuando se marca un checkbox, es utilizar el pseudo selector css3 :checked

Personalizar la pagina login de wordpress es muy fácil,  podemos añadir nuestro propio código css y hacer que se vea como mas nos guste. En este ejemplo veremos como cambiar el logo de wordress en el login.

Para hacerlo tendremos que editar nuestro functions.php y agregar la siguiente función:

function login_personalizado(){
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/logo-login.png) !important; }
</style>';
}

Luego hacemos uso del hook add_action para ejecutar nuestra función:

add_action('login_head', 'login_personalizado'); 

Quedando nuestro código en functions.php:

/*Personalizar Login WordPress */
function login_personalizado(){
 echo '<style type="text/css">
 h1 a { background-image:url('.get_bloginfo('template_directory').'/images/logo-login.png) !important; }
 </style>';
}
//Usamos el hook para ejecutar la función
add_action('login_head', 'login_personalizado');

/* Otras funciones */
//Cambiamos la url del Logo
function lo_per_url() { echo bloginfo('url'); }

//Cambiamos el nombre del titulo en el Logo
function lo_per_title() { echo get_option('blogname'); }

add_filter('login_headerurl', 'lo_per_url');
add_filter('login_headertitle', 'lo_per_title');

Y si eres de los que no les gusta escribir código existen varios plugins para personalizar el login wordpress, uno de ellos el BM Custom Login

Plugin para cambiar login wordpress

Están todos invitados, este evento es completamente gratis. Siguelo en Twitter con el hashtag #wpperu12

Inscribete aquí: https://eventioz.com/wpperu12

Crearemos un boton elegante utilizando propiedades css3 como border-radius, box-shadow, transition, linear-gradient.

El HTML aplicado para este demo sera:

<a href="#" class="button">Boton CSS3</a>

Se ha creado un enlace simple al cual le agregamos el atributo class=”button”

El estilo CSS3

Primero crearemos nuestra clase .button definiendo su estilo basico.

.button{
  background:#e5e5e5;
  display:inline-block;
  margin:0 6px;
  padding:7px 20px 7px;
  color:#333;
  text-decoration:none;
  text-shadow: 0 1px 1px #FFF;
  border:1px solid #ccc;
}

Redondeamos los bordes del boton con border-radius

/* Bordes redondenados - Border Radius */
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;

Ahora modificaremos el fondo(background) con un degradado vertical usando la propiedad css3 linear-gradient

  /* Fondo Degradado - Background Gradient */
  background:-webkit-linear-gradient(top, #fefefe, #e5e5e5); /* Chrome 10+ */
  background: -moz-linear-gradient(top, #fefefe, #e5e5e5); /* Firefox 3.6+ */
  background: -ms-linear-gradient(top, #fefefe, #e5e5e5); /* IE10 */
  background: linear-gradient(top, #fefefe, #e5e5e5);

Luego agregamos 3 tipos de sombras a la clase separadas por “,” con box-shadow y rgba para aplicar transparencias.

 /* Aplcamos sombras al boton - Box Shadow */
 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
 -moz-box-shadow: inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
 box-shadow: inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);

y para hacer “cool” nuestro boton le agregaremos un efecto de transicion, que se vera al pasar el cursor sobre el boton :hover, con la propiedad css3 transition, con la cual se pueden realizar animaciones.

 /* Animacion - Transition */
 -webkit-transition: all ease-in-out .3s;
 -moz-transition: all ease-in-out .3s;
 transition: all ease-in-out .3s;

Quedando nuestra clase .button

 .button{
    background:#e5e5e5;
    display:inline-block;
    margin:0 6px;
    padding:7px 20px 7px;
    color:#333;
    text-decoration:none;
    text-shadow: 0 1px 1px #FFF;
    border:1px solid #ccc;

    /* Bordes redondenados - Border Radius */
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;

    /* Fondo Degradado - Background Gradient */
    background:-webkit-linear-gradient(top, #fefefe, #e5e5e5); /* Chrome 10+ */
    background:   -moz-linear-gradient(top, #fefefe, #e5e5e5); /* Firefox 3.6+ */
    background:    -ms-linear-gradient(top, #fefefe, #e5e5e5); /* IE10 */
    background:        linear-gradient(top, #fefefe, #e5e5e5);

    /* Aplcamos sombras al boton - Box Shadow */
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
    box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);

    /* Animacion - Transition */
    -webkit-transition: all ease-in-out .3s;
    -moz-transition: all ease-in-out .3s;
    transition: all ease-in-out .3s;
}

Efecto :hover

Usando la propiedad css :hover(ubicar el cursor sobre un elemento), modificaremos algunas propiedades de la clase .button para darle un efecto elegante.

.button:hover{
  border-color:#adcce2; /* Modificamos el color del borde */

  /* Cambiamos los colores del fondo degradado */
  background:-webkit-linear-gradient(top, #fefefe, #f1f1f1); /* Chrome 10+ */
  background:   -moz-linear-gradient(top, #fefefe, #f1f1f1); /* Firefox 3.6+ */
  background:    -ms-linear-gradient(top, #fefefe, #f1f1f1); /* IE10 */
  background:        linear-gradient(top, #fefefe, #f1f1f1);

  /* Modificamos las propiedades del Box Shadow para un efecto Glow */
  -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 6px rgba(36, 168, 229, .3);
  -moz-box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);
  box-shadow:inset 0 1px 0 rgba(251,247,193, .3), inset 0 0 0 1px rgba(251,247,193, .3), 0 1px 6px rgba(36, 168, 229, .3);
}

También podemos aplicar esta clase a los elementos de tipo <input /> o <button>

Aquí veremos algunas técnicas para poder utilizar propiedades css3 en IE como border-radius, background-gradient, box-shadow, multiple background, y el uso de pseudo clases css3 con Selectivizr.

CSS3 PIE

CSS3PIE es un asistente para IE, se extiende al comportamiento de Internet Explorer para reconocer y mostrar las propiedades de CSS3.

Para su uso, debes descargar CSS3PIE, encontraras varios archivos pero solo utilizaremos PIE.htc que vamos a llamar desde nuestro archivo CSS, así que es recomendable que se ubique en la misma carpeta donde se encuentra nuestra hoja de estilo.

Selectivizr

Selectivizr se utiliza para manejar selectores css3, se utiliza en combinación de librerias js como jQuery o Mootools. Se recomienda optar por Mootools ya que admite todos las propiedades de  Selectivizr.

Para este ejemplo se utilizara el siguiente script, debe ser incluido dentro de la etiqueta <head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.0/mootools-yui-compressed.js"></script><!-- Mootools -->
<script type="text/javascript" src="selectivizr.js"></script><!-- Selectivizr -->

Ahora veamos algo de CSS3

Border Radius

Interpretando border-radius en IE con CSS3Pie.

.box{
  border-radius:8px;
  behavior:url(PIE.htc);
}

Box Shadow – RGBA

Para interpretar box-shadow solo debemos incluir el archivo PIE.htc, tambien podemos declarar opacidad a la sombra con la propiedad RGBA.

.shadow{
  box-shadow:0px 2px 2px rgba(62,115,0, 0.75);
  behavior:url(PIE.htc);
}

Background Gradient

.box{
  background: -webkit-linear-gradient(top, #c9ed8a,#72aa31);
  background: -moz-linear-gradient(top, #c9ed8a,#72aa31);
  background: -o-linear-gradient(top, #c9ed8a,#72aa31);
  background: -ms-linear-gradient(top, #c9ed8a,#72aa31);
  background:linear-gradient(top, #c9ed8a,#72aa31);
  -pie-background:linear-gradient(#c9ed8a,#72aa31);
  behavior:url(PIE.htc);
}

Multiple Background

.multiple{
  background:url(pacman.png) no-repeat 20px center, url(twitter.png) no-repeat  60px center, -webkit-linear-gradient(#c9ed8a,#72aa31);
  -pie-background:url(pacman.png) no-repeat 20px center, url(twitter.png) no-repeat  60px center, linear-gradient(#c9ed8a,#72aa31);
  behavior:url(PIE.htc);
}

Selectores CSS3

Ahora usaremos Selectivizr que nos permite agregar pseudo-clases y atributos css3 a navegadores que no lo soportan. Funciona desde IE6.

Solo se debe incluir la librería javascript como se menciono al principio.

.box span:first-child{
  background:#333;
  color:#fff;
}

.box span:nth-child(2n) {
  background: #3de1ff;
}

.box span:last-child{
  background:#fff114;
  color:#333;
}

IE Filter

También podríamos usar filtros de IE (IE filter) para agregar propiedades CSS3. Por ejemplo background-gradient

  .box{
    background:#333;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9ed8a', endColorstr='#72aa31');  /* IE */
  }

Plantillas web HTML5 gratis elegantes listas para que realices tus proyectos, una forma rápida y fácil solución para la construcción de sitios web modernos.

Una vía fantástica para explorar y entender la sintaxis HTML5.

Html5 Portafolio

ElegantPress

Vibrant & Professional

Nova

Vivid Photo

Shinra

Simple Style 7

Minimalism.

Touch the Future

Iphone App Template

One page Portafolio

Sanaroo

Plantilla Html5 y CSS3

DowntoBiz

OWMX-2 Html5 y CSS3

Basado en un diseño hecho en photoshop aplicare  estilos a un sencillo formulario de búsqueda  utilizando css3.

Crearemos el código html, como se daran cuenta no se necesitan muchas lineas para este formulario

<form id="form">
<input id="busca" type="text" />
<input id="submit" type="submit" value="BUSCAR" /></form>

A continuación pasaremos a darle los estilos al elemento que tiene como id “form”, usando css3 le daremos  un degradado de fondo y sombras.

#form{
 background:#fff; /* Navegadores que no soportan css3 */
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E8E8E8));
 background:-moz-linear-gradient(100% 100% 90deg, #E8E8E8, #FFFFFF);

/* Sombras */
 -webkit-box-shadow: inset 0px -2px 2px rgba(255, 255, 255, 1), 0px 2px 4px rgba(0, 0, 0, .3);
 -moz-box-shadow: inset 0px -2px 2px rgba(255, 255, 255, 1), 0px 2px 4px rgba(0, 0, 0, .3);
 box-shadow: inset 0px -2px 2px rgba(255, 255, 255, 1), 0px 2px 4px rgba(0, 0, 0, .3);

 padding: 12px;
 margin: 10% auto;
 width: 480px;
 height: 55px;
}

ahora procederemos a darle estilos al input text que tiene el id “busca” le pondremos borde redondeado.

#busca{
 /* Borde redondenado */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;

  /* Sombras */
  -webkit-box-shadow: 1px 1px 1px #FFF;
  -moz-box-shadow: 1px 1px 1px #FFF;
  box-shadow: 1px 1px 1px #FFF;

  padding:6px;
  width:345px;
  height:32px;
  border:1px solid #D9D9D9;
}

Ahora estilizaremos el input ”submit”

#submit{
 background:#86ACB5; /* Navegadores que no soportan css3 */
  background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#77A5AE), to(#629099));
  background:-moz-linear-gradient(100% 100% 90deg, #629099, #77A5AE);

  /* Borde redondenado */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;

  /* Sombras */
  -webkit-box-shadow: inset 0px -1px 1px rgba(255, 255, 255, .4), 0px 1px 2px rgba(0, 0, 0, .3);
  -moz-box-shadow: inset 0px -1px 1px rgba(255, 255, 255, .4), 0px 1px 2px rgba(0, 0, 0, .3);
  box-shadow: inset 0px -1px 1px rgba(255, 255, 255, .4), 0px 1px 2px rgba(0, 0, 0, .3);

  float:right;
  width:100px;
  height:32px;

  color:#FFFFFF;
  text-shadow:0px 1px 3px #656565;

  cursor:pointer;
  border:0;/* Quitamos el borde que le da la sensación de relieve a este input*/
}

y ya se puede visualizar el formulario con los estilos, pero ocurre que el ancho de #form y el #busca se ven afectados por el padding que le asignamos  a cada uno.

para solucionar esto solo agregaremos la propiedad box-sizing a estos elementos

#form, #busca{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

El año pasado ya habia hecho un formulario parecido, pueden verlo aquí, pero en ese tiempo use mucho código para un formulario tan simple. Con el tiempo y la practica he ido mejorando en cuanto a la estrucutra html se trate.

Espero que este post les haya gustado, hasta la prox.