border-radius > redondea las esquinas
opacity > traspariencia del fondo entre 0 y 1. Siendo 1 el máximo.
body
{
background-color: yellow;
}
a
{
background-color: #000;
color: white;
padding: 5px;
border-color: #000000;
border-style: solid;
border-width: 2px;
border-radius:10px;
opacity: 0.5;
}
a:hover
{
background-color: blue;
border-radius: 0px;
color: black;
opacity: 1;
:not > indica que cuando no estés en una posición, se cumpla esta condición.
body
{
background-color: #ACFA58;
}
a
{
background-color: #FF0040;
color: #000000;
padding: 5px;
border-color: #5882FA;
border-style: solid;
border-width: 2px;
border-radius:10px;
opacity: 1;
}
nav:hover a:hover
{
background-color: #FAAC58;
border-radius: 0px;
color: black;
opacity: 1;
width:10%;
}
nav:hover a:not(:hover)
{
opacity: 0.5;
}
table
{
border: solid orange 3px;
border-radius: 10px;
}
table td:hover
{
background-color: white;
}
td
{
border: 2px solid white;
padding:5px;
border-radius: 10px;
}
: active es cuando hacemos click sobre el boton.
página recomendada: digitalicom.es
transition-duration > hace los cambios en una progresión de x tiempo.
body
{
background-color: #FAFAFA;
}
a
{
background-color: #FE2EC8;
color: #1B0A2A;
padding: 5px;
border-color: #1B0A2A;
border-style: solid;
border-width: 2px;
border-radius:20px;
opacity: 0.8;
}
nav:hover a:hover
{
background-color: #FA58D0;
border-radius: 5px;
color: #610B5E;
opacity: 0.6;
transition-duration: 5s;
}
body
{
background-color: #FAFAFA;
}
a
{
background-color: #FE2EC8;
color: #1B0A2A;
padding: 5px;
border-color: #1B0A2A;
border-style: solid;
border-width: 2px;
border-radius:20px;
opacity: 0.8;
}
nav:hover a:hover
{
background-color: #FA58D0;
border-radius: 5px;
color: #610B5E;
opacity: 0.6;
transition-duration: 5s;
}
Y ahora esta haciendo cosas muy molonas, pero no soy capaz de seguir su ritmo, lo intentare la próxima clase :)
0 comentarios:
Publicar un comentario