Diferencia entre revisiones de «Slide.css»
De WikiCafe
| (No se muestran 33 ediciones intermedias de 2 usuarios) | |||
| Línea 1: | Línea 1: | ||
.container { | .container { | ||
| − | |||
background-color: white; | background-color: white; | ||
width: 300px; | width: 300px; | ||
| − | padding: | + | padding: 50px; |
| + | float:right; | ||
| + | margin-right:-25px; | ||
| + | margin-top:-190px; | ||
| + | |||
} | } | ||
| Línea 15: | Línea 18: | ||
ul.slider { | ul.slider { | ||
position: relative; | position: relative; | ||
| − | width: | + | width: 300px; |
height: 300px; | height: 300px; | ||
} | } | ||
| Línea 28: | Línea 31: | ||
transition: opacity .5s; | transition: opacity .5s; | ||
background: #fff; | background: #fff; | ||
| + | align-items: center; | ||
| + | |||
} | } | ||
| Línea 38: | Línea 43: | ||
ul.slider li:first-child { | ul.slider li:first-child { | ||
opacity: 1; | opacity: 1; | ||
| − | /*Mostramos el primer | + | /*Mostramos el primer li*/ |
} | } | ||
ul.slider li:target { | ul.slider li:target { | ||
opacity: 1; | opacity: 1; | ||
| − | /*Mostramos el | + | /*Mostramos el li del enlace que pulsemos*/ |
} | } | ||
| Línea 60: | Línea 65: | ||
color: white; | color: white; | ||
text-decoration: none; | text-decoration: none; | ||
| − | background-color: | + | background-color: #681a27; |
| − | padding: 10px; | + | padding: 10px 10px 10px 10px; |
| − | width: | + | width: 15px; |
| − | height: | + | height: 15px; |
| − | font-size: | + | font-size: 12px; |
border-radius: 100%; | border-radius: 100%; | ||
| + | font-weight: bold; | ||
} | } | ||
Revisión actual del 14:15 8 abr 2021
.container {
background-color: white; width: 300px; padding: 50px;
float:right; margin-right:-25px; margin-top:-190px;
}
ul, li {
padding: 0; margin: 0; list-style: none;
}
ul.slider {
position: relative; width: 300px; height: 300px;
}
ul.slider li {
position: absolute; left: 0px; top: 0px; opacity: 0; width: inherit; height: inherit; transition: opacity .5s; background: #fff;
align-items: center;
}
ul.slider li img {
width: 100%; height: 300px; object-fit: cover;
}
ul.slider li:first-child {
opacity: 1; /*Mostramos el primer li*/
}
ul.slider li:target {
opacity: 1; /*Mostramos el li del enlace que pulsemos*/
}
.menu {
text-align: center; margin: 20px;
}
.menu li {
display: inline-block; text-align: center;
}
.menu li a {
display: inline-block; color: white; text-decoration: none; background-color: #681a27; padding: 10px 10px 10px 10px; width: 15px; height: 15px; font-size: 12px; border-radius: 100%; font-weight: bold;
}
