animaciones con css3 Archive

Input con css

#input1{ padding:10px; border:solid 1px #DEDEDE; } #input2{ padding:10px; border:solid 1px #DEDEDE; border-radius:5px; } #input3{ padding:10px; border:solid 1px #DEDEDE; border-radius:5px; box-shadow:0 0 15px #036; -moz-box-shadow:0 0 15px #036; -o-box-shadow:0 0 15px #036; -ms-box-shadow:0 0 15px #036; -webkit-box-shadow:0 0 15px #036; } #input4{ padding:10px; border:solid 1px #DEDEDE; border-radius:5px; } #input4:focus{ box-shadow:0 0 15px #036; -moz-box-shadow:0 0 15px

Imagenes con css – css3

#contenedor{ padding:10px; text-align:center; width:100%; border-radius:5px; margin:10px auto; border:solid 1px #DEDEDe; background:-moz-linear-gradient(#dedede 0%, #000 100%); background:-moz-linear-gradient(#dedede 0%, #000 100%); background:-ms-linear-gradient(#dedede 0%, #000 100%); background:-o-linear-gradient(#dedede 0%, #000 100%); background:-webkit-linear-gradient(#dedede 0%, #000 100%); } img{ background:#999; transition:all 1s; -moz-transition:all 1s; -ms-transition:all 1s; -o-transition:all 1s; -webkit-transition:all 1s; border:solid 5px rgba(204,204,204,0.3); background-clip:padding-box; border-radius:5px; margin-left:10px; cursor:pointer; transform:rotate(10deg); -moz-transform:rotate(10deg); -ms-transform:rotate(10deg); -o-transform:rotate(10deg); -webkit-transform:rotate(10deg);

Animando Tooltip Con CSS y CSS3

Bootstrap Tooltip Usando Solo CSS Ayer mirando la nueva actualización de facebook me llamo mucho la atención las tooltip que tienen en su sitio web, muchos piensan que para hacer estas tooltip es una tarea difícil y por eso no quieren lanzarse hacerla. El uso de tooltip en nuestro sitio web le da un toque

Animaciónes con css3

#c1{ width:120px; color:blue; height:120px; border-radius:120px; -webkit-border-radius:120px; -moz-border-radius:120px; -o-border-radius:120px; background:-moz-linear-gradient(#dedede 0%, #999 100%); background:-ms-linear-gradient(#dedede 0%, #999 100%); background:-o-linear-gradient(#dedede 0%, #999 100%); background:-webkit-linear-gradient(#dedede 0%, #999 100%); margin:20px 0 0 60px; } #c2{ width:150px;color:blue; height:80px; border-radius: 80px / 55px; -webkit-border-radius: 80px / 55px; -moz-border-radius: 80px / 55px; -o-border-radius: 80px / 55px; background:-moz-linear-gradient(#dedede 0%, #999 100%); background:-ms-linear-gradient(#dedede 0%, #999

Animaciones en CSS3

#anime1{ width:20em; height:3em; background-color:#1FA2E1; transition: height 1s; -webkit-transition: height 1s; -moz-transition: height 1s; -o-transition:height 1s; } #anime1:hover { width:20em; height:15em; } #anime2 { background-color:#ff9d1c; width:20em; height:3em; border-radius:3px; transition: background 2s; -webkit-transition: background 2s; -moz-transition: background 2s; -o-transition: background 2s; } #anime2:hover { background-color:#1FA2E1; } #anime3 { background-color:#1FA2E1; width:7em; border-radius:3px; height:7em; text-align:center; padding:5px; transition: border-radius 2s;

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>