Heim >Web-Frontend >HTML-Tutorial >Wie kann man mithilfe von HTML und CSS die Illusion einer Bildstapelung erzeugen?
Wie kann man mithilfe von HTML und CSS die Illusion einer Bildstapelung erzeugen?
- WBOYnach vorne
- 2023-09-16 14:05:081179Durchsuche
Optische Täuschungen sind sehr faszinierend, wenn es um die Webentwicklung geht. Der Einsatz optischer Täuschungen auf unserer Website fesselt die Benutzer, weil sie mit ihren Gedanken spielen. Es bringt unser Gehirn dazu, etwas zu glauben, das in Wirklichkeit gar nicht existiert. Diese Illusionen können mit verschiedenen Techniken in CSS erstellt werden. Eine der am häufigsten verwendeten Illusionen ist die Bildstapelillusion, bei der es sich lediglich um eine Illusion von Tiefe handelt. In diesem Artikel besprechen wir die Schritte zum Erstellen einer Bildstapel-Illusion, die nur HTML und CSS verwendet. Fangen wir an.
Was ist die Bildstapel-Illusion?
Die Bildstapel-Illusion ist eine visuelle Illusion, die durch das Stapeln mehrerer Bilder mit unterschiedlicher Transparenz entsteht. Wenn man es aus einem bestimmten Blickwinkel betrachtet, verschmelzen alle Bilder miteinander und erzeugen die Illusion eines dreidimensionalen Bildes.
Dieser Effekt wurde zuvor mit Photoshop erstellt. Jetzt können wir jedoch einfach eine mit HTML und CSS erstellen.
Schritte, die Sie befolgen müssen
Erstellen Sie ein div-Element, das das Bild enthält. Dies wird die Oberfläche des ersten Stapels sein.
Stilen Sie das img-Element mit den Eigenschaften „border“ und „box-shadow“.
Geben Sie Abmessungen für div-Elemente an (class="stack1"). Behalten Sie die Position des div-Elements relativ bei, sodass die Position der kommenden Pseudoelemente (:before- und :after-Elemente) relativ zum div-Element und nicht relativ zu bleibt, da wir die Position dieser Pseudoelemente beibehalten -Elemente ist eine absolute Position. Schweben Sie das div-Element nach links. Fügen Sie Ränder und Polsterungen hinzu, um ein besseres Aussehen zu erzielen.
Fügen Sie das erste Pseudoelement des Stapels mit dem Attribut ":before" hinzu. Fügen Sie keine Inhalte hinzu. Geben Sie seine Abmessungen an und geben Sie ihm eine absolute Positionierung. Gestalten Sie es mithilfe der Eigenschaften „Hintergrundfarbe“, „Boxschatten“ und „Rahmen“.
Behalten Sie den Z-Index der Pseudoelemente bei -1. Geben Sie oben und links unterschiedliche Werte, um ihm eine andere Position zu geben und eine andere Illusion zu erzeugen. Sie können Pseudoelemente auch drehen, um verschiedene Effekte zu sehen.
Erstellen Sie ein zweites Pseudoelement mit dem Attribut ":after". Sein Stil ähnelt dem ersten Pseudoelement. Ändern Sie einfach die oberen, linken und transformierten Werte, um die optische Täuschung zu erzeugen. Damit ist Ihr erster Stapel abgeschlossen.
Ebenso können Sie auf einer Webseite so viele Stapel erstellen, wie Sie möchten. Hier haben wir 2 Stapel auf einer Seite erstellt.
Beispiel
In diesem Beispiel haben wir eine Reihe von Bildern erstellt. Für den Stapel belassen wir top, left und transformieren die Werte als -15px, -15px und rotate(-10deg). >:before Pseudoelemente, während 5px, 0 und rotate(10deg) :after Pseudoelemente sind. Geben Sie jedem Pseudoelement eine andere Hintergrundfarbe, um eine größere Wirkung zu erzielen.
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #B9C8BC;
}
img {
height: 253px;
width: 262px;
border: 10px solid white;
box-shadow: 4px 4px 4px grey;
}
h1 {
text-align: center;
text-decoration: underline;
font-family: Georgia;
}
.stack1,
.stack2,
.stack3 {
float: left;
position: relative;
margin: 65px;
padding: 3px;
}
.stack1:before,
.stack1:after {
content: "";
border: 10px solid white;
position: absolute;
z-index: -1;
}
.stack1 {
height: 250px;
width: 260px;
}
.stack1:before {
height: 280px;
width: 260px;
background-color: grey;
top: -15px;
left: -15px;
transform: rotate(-10deg);
box-shadow: 4px 2px 4px #9a2ca0;
}
.stack1:after {
height: 250px;
width: 260px;
background-color: #808000;
top: 5px;
left: 0;
transform: rotate(10deg);
box-shadow: 4px 2px 4px #9a2ca0;
}
</style>
</head>
<body>
<h1> Image Stack Illusion </h1>
<div class="stack1">
<img src="https://www.tutorialspoint.com/images/physics-tutorials_icon.svg" alt="Wie kann man mithilfe von HTML und CSS die Illusion einer Bildstapelung erzeugen?" >
</div>
</body>
</html>
Wo können wir die Bildstapel-Illusion im Webdesign verwenden?
Im Webdesign kann die Bildstapel-Illusion verwendet werden, um eine Vielzahl aufregender visueller Layouts zu erstellen. Damit lassen sich auffällige Bildergalerien und ansprechende Produktwerbeseiten erstellen. Darüber hinaus können Designer damit ihre Portfolios präsentieren. Branchen und große Unternehmen können diesen Effekt in die Erstellung ihrer Landingpages integrieren.
Fazit
Image Stack Illusion wird häufig in der Webentwicklung, Werbung und im Grafikdesign verwendet. Die Anziehungskraft, die viele Benutzer ansprachen, überzeugte die Entwickler, weitere auffällige visuelle Elemente dieser Art zu erstellen. Darüber hinaus verlassen wir uns nicht mehr auf die Photoshop-Anwendung, um diesen Effekt zu erzielen. Wir können es ganz einfach nur mit HTML und CSS erstellen. In diesem Artikel verwenden wir Pseudoklassen (:before und :after), um das gewünschte Ergebnis zu erzielen. Wir haben uns in diesem Artikel 6 verschiedene Illusionen angesehen. Es gibt jedoch noch mehr Möglichkeiten. Sie müssen lediglich die gleichen Schritte befolgen, die hier beschrieben wurden, um zu üben und Ihre eigenen visuellen Elemente zu erstellen.
Das obige ist der detaillierte Inhalt vonWie kann man mithilfe von HTML und CSS die Illusion einer Bildstapelung erzeugen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!