Efectos CSS3 para mi web

Efectos para mi pagina web

En esta parte les voy a enseñar como hacer algunos diseños para los div de nuestras páginas web para los que aun no están familiarizados con el CSS 3, lo primer es crear una etiquita div con su respectivo id  

Quedaria como esta 
 <div id=”boton”>
        BORDER REDONDOS
    </div>
Luego escribimos el stylo CSS 3 que nos permitira darle border dedondeados a las esquinas el stylo css 3 seria el siguiente 
 #boton{
     background:orange;
     text-align:center;
     padding-top:5px;
     color:#FFF;
     max-width:250px;
     min-height:30px;
     border:solid 1px #DADADA;
     border-radius:5px;
     -webkit-border/radus:5px;
     -moz-border-radius:5px; /* para que funcione en firefox */
     -o-border-radius:5px; /* para Opera  */
     -ms-border-radius:5px;/* para Internet explorer*/
   
     }
con estos ultimos codios permitimos que se bena iguales en todos los navegadores como Firefox, Chrome, Internet Explorer.

Ahora vamos agregar el efecho hover para que nuestro div cambie de color al pasar el mouse por ensima

 #boton:hover{
         background:orange;
         }

Bueno nuestor DIV quedaria asi

#boton{ background:F1F1F1; text-align:center; padding-top:5px; color:blue; max-width:250px; min-height:30px; border:solid 1px #DADADA; border-radius:5px; -moz-border-radius:5px; /* para que funcione en firefox */ -o-border-radius:5px; /* para Opera */ -ms-border-radius:5px;/* para Internet explorer*/ } #boton:hover{ background:orange; } input{ border-radius:5px; -mo-border-radius:5px; -o- border-radius:5px; -ms- border-radius:5px; width:200px; border:solid 1px #DADADA; height:30px; } input:focus{ box-shadow:0 0 10px #0CC; -moz- box-shadow:0 0 10px #0CC; -o-box-shadow:0 0 10px #0CC; -ms-box-shadow:0 0 10px #0CC; }

BORDER REDONDOS

Ahora vemos el efecto de resplandor de CSS3 el cual podemos notar en Twitter que son unos efectos muy bonitos y elegantes para los input de nuestros sitios web  , Lo primero que vamos hacer es crear un input de texto.
 <input type=”text” name=””/>
 
Una vez con nuestro input creado procedemos a darle los estilos CSS3 lo primer es establecer el tamaño y el alto del input y poner lo borde redondos el código CSS sería el siguiente 
  input{
             border-radius:5px;
                -webkit-border/radius:5px;
              -mo-border-radius:5px;
              -o- border-radius:5px;
               -ms- border-radius:5px;
               width:200px;
               border:solid 1px #DADADA;
               height:30px;
             }
Ahora vamos agregar un efecto que podemos notar en muchos buscadores tales como la barra de búsqueda de yahoo así como lo input de twitter me refiero a ese texto que parece en los input y luego de darle clic desaparecen bueno este efecto lo podemos hacer con el atributo placeholder del CSS3. Para esto agregamos la siguiente línea al input que escribimos anterior y quedaria de la siguiente manera 
placeholder=”Escribe algo”
quedaria asi 
<input placeholder=”Escribe algo” type=”text” name=””/>
 
Ahora les damos el efecto de resplandor que es un efecto dicho sea de paso muy elegante para cualquier web
El código CSS 3 para los principales navegadores seria el siguiente
 input:focus{
                 box-shadow:0 0 10px #0CC;
                 -webkit-box-shadow:0 0 10px #0CC;
                -moz- box-shadow:0 0 10px #0CC;
                 -o-box-shadow:0 0 10px #0CC;
                 -ms-box-shadow:0 0 10px #0CC;
                 }

Nuestro input quedaria de la siguiente manera 

También podrimos ponerle animaciones a los inputs o  los div usando solamente CSS 3 pero eso será en otro entrada dedicada únicamente a estos atributos.
Bueno espero y les allá gustado el tutorial si le gusto dejen sus comentarios y si quieren algún efecto CSS 3 lo pueden pedir  que con mucho gusto se lo preparo.. será hasta la próxima entrega

 

Si el tutorial te parecio interesante dale a +1 o dejanos tu comentarios…

Comments

  1. By David

Deja un comentario

Tu dirección de correo electrónico no será publicada.