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

a.tooltip { position:relative; color:#f90; text-decoration:none; } a.tooltip div4 { padding:5px 10px; background:#fff; border:1px solid #999; border-radius:5px; min-width:140px; position:absolute; top:5px; left:5px; color:#FFF; text-align:center; display:none; font-family:Georgia, “Times New Roman”, Times, serif; font-size:13px; font-weight:bold; } a.tooltip div4:before { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #DEDEDE; z-index:5; content: ” “;

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>