El propósito de este artículo es usar sombras de cuadro para crear un efecto de desplazamiento de acordeón.
Enfoque: La propiedad box-shadow de CSS se usa para dibujar sombras alrededor de un elemento. La propiedad box-shadow de CSS tiene la siguiente sintaxis.
Sintaxis:
box-shadow : x-offset y-offset blur-radius spread-redius color
HTML
<!DOCTYPE html>
<html>
<body style="text-align: center;">
<style>
.info {
position: relative;
max-width: 100%;
font-size: 60px;
}
.info label, .info-content {
padding: 10px;
display: block;
}
.info label {
background: #808080;
}
.info-content {
background: #ffffff;
display: none;
}
.info input {
display: none;
}
.info input:checked ~ .info-content {
display: block;
border:solid;
}
.info label:hover {
box-shadow: inset 0 0 10px red;
}
</style>
<div class="info">
Hover mouse over this accordion to see box-shadow
in action. After that click on accordion to show
its content.
<input id="info1" type="checkbox" />
<label for="info1">Geeks For Geeks</label>
<div class="info-content">
A Computer Science portal for geeks. It contains
well written, well thought and well explained
computer science and
programming articles, quizzes
and videos.
</div>
</div>
</body>
</html>
Salida: Puede ver la sombra roja afectada por el desplazamiento.
- Antes de hacer clic: Vemos la siguiente página web.
- Después de hacer clic: verá el contenido del acordeón «GeeksForGeeks».
Publicación traducida automáticamente
Artículo escrito por syedfaisalmca y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA