Categoría: CSS

Animaciones CSS

<div id="prueba">
<h1>hola</h1>
</div>
#prueba{
width:100px;
height:100px;
background:red;
animation-name:animacion;
animation-duration:4s;
animation-iteration-count: infinite;
}

@keyframes animacion{

15% {transform:translate(0,200px)rotate(0deg);}
30% {transform:translate(0,200px) rotate(360deg);}
50% {transform:translate(100px,100px);background:red;}
65% {transform:translate(100px,100px);background:green;}
80% {transform:translate(100px,100px);background:blue;}

}

Degradados

<div id="prueba">
</div>
<div id="prueba2">
</div>
<div id="prueba3">
</div>
<div id="prueba4">
</div>
<div id="prueba5">
</div>
<div id="prueba6">
</div>
<h1>Hola que tal</h1>
div{
 display:inline-block;
 width:500px;
 height:300px;
 border: solid 2px grey;
 box-shadow: 20px -10px 10px orange;
 margin:20px;
}
#prueba{
 background:linear-gradient(rgba(30,90,90,0), rgba(30,90,90,1));
}
#prueba2{
 background:linear-gradient(45deg, red, blue,orange);
}
#prueba3{
 background:linear-gradient(to right,red, blue);
}
#prueba4{
 background:radial-gradient(red, blue);
}
#prueba5{
 background:radial-gradient(circle,red, blue);
}
#prueba6{
 background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
h1{
 background-color:black;
 text-shadow: 0px 0px 10px rgba(255,255,255,0.6), 0px 0px 30px rgba(255,255,255,0.4), 0px 0px 50px rgba(255,255,255,0.3), 0px 0px 180px rgba(255,255,255,0.3);
 color: rgba(255,255,255,0);
}

Imágenes de fondo

<div id="prueba">

</div>

<div id="test">

</div>
<div id="test2">

</div>

<ul>
<li><h1>Hola que tal estamos</h1></li>
<li><h1>Hola que tal estamos</h1></li>
<li><h1>Hola que tal estamos</h1></li>
<li><h1>Hola que tal estamos</h1></li>
</ul>

#prueba{
width:500px;
height:400px;
border: solid 2px grey;
background-image:url("img/smile.png"),url("img/textura.jpg");
background-position:right BOTTOM, left top;
background-repeat:no-repeat;
background-size: auto,cover;
}

#test{
width:500px;
height:200px;
border: solid 2px blue;
background-image:url("img/perro.jpg");
background-size: cover;
background-repeat:no-repeat;
}
#test2{
width:200px;
height:500px;
border: solid 2px blue;
background-image:url("img/perro.jpg");
background-size: cover;
background-repeat:no-repeat;
background-position:right bottom;
}
li{
display:inline-block;
width:150px;
height:150px;
border: solid 4px orange;
background-image:url("img/perro.jpg");
background-size: cover;
background-repeat:no-repeat;
}

li:nth-child(2){
background-image:url("img/smile.png");
}

Pseudoclases y pseudoelementos

<div id="cabecera">
<h1>Hola que tal</h1>
<p>Yo estoy muy bien gracias</p>
</div>
<p>Hola</p><p>Hola</p><p>Hola</p><p>Hola</p><p>Hola</p><p>Hola</p>

h1:hover{
color:red;
}
h1::before{
content:”- “;
}
h1::selection{
background-color:yellow;
}
h1:hover + p{
display:block;
}

h1 + p{
display:none;
}
p:before{
content:url(“img/smile.png”);
}
p::after{
content:” (–) “;
}

Más sobre posiciones

<h1>Pruebas posiciones</h1>
<div class="relative">Elemento con posición relativa
 
 <div id="rb">Hola que tal estamos yo estoy muy bien</div>
 <div id="lb"></div>
 <div id="lt"></div>
 <div id="rt"></div>
 <div id="center"><p>A</p></div>
</div>
.relative {
 position: relative;
 width: 400px;
 height: 200px;
 border: 3px solid #73AD21;
} 
#rb,#lb,#rt,#lt,#center{
 position:absolute;
 width:50px;
 height:50px;
 border:solid 2px blue;
 margin:0;
}
#rb{
 right:0;
 bottom:0;
 border:solid 2px blue;
}
#lb{
 left:0;
 bottom:0;
 border:solid 2px green;
}
#rt{
 right:0;
 top:0;
 border:solid 2px yellow;
}
#lt{
 left:0;
 top:0;
 border:solid 2px red;
}
#center{
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 border:dotted 2px black;
 text-align:center;
}

Posición fija y absoluta

<h1 id="fijo">Esto está fijo</h1>
<h1 id="absoluto">Esto es absoluto</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
#fijo{
 position:fixed;
 width:200px;
 border:solid 2px red;
 right:100px;
 top:10px;
}
#absoluto{
 position:absolute;
 width:200px;
 border: 2px solid red;
 right:100px;
 top:10px;
}

 

Ejemplo estilos listas inline-block

<ul>
<li><iframe name="iframe1" src="http://trifulcas.com"></iframe></li>
<li><iframe name="iframe2" src="http://sport.com"></iframe></li>
<li><iframe name="iframe3" src="http://bcn.com"></iframe></li>
</ul>
<ul>
<li><a href="http://sport.com" target="iframe1">Sport</a></li>
<li><a href="http://trifulcas.com" target="iframe2">Trifulcas</a></li>
<li><a href="http://sport.com" target="iframe3">Sport</a></li>
</ul>
iframe{
 border:0;
}
li{
 display:inline-block;
 width:200px;
 border: solid 1px grey;
}
li iframe{
 width:200px;
}