So erstellen Sie CSS3 -Papiercurls ohne Bilder

Dieses Tutorial zeigt, dass ein CSS3 -Papier -Curl -Effekt ohne Bilder erzeugt wird. Frühere Tutorials zeigten, wie Sprachblasen und -bänder mit CSS3 von :before und :after pseudoelementen erstellt werden; Dies baut auf dieser Technik auf.

Ein Papier -Curl -Effekt ist eine optische Täuschung, die normalerweise mit einem Schatten am Boden des Elements erreicht wird. Zuvor erforderte diese Bildbearbeitungssoftware. CSS3 bietet eine überlegene Alternative. Die Vorteile der Verwendung von CSS3 umfassen: Browserkompatibilität (es verschlechtert sich in älteren Browsern anmutig), Hintergrundunabhängigkeit, Skalierbarkeit, wiederverwendbares Code und einfache Anpassung.

Erstellen Sie zunächst ein einfaches HTML -Element:

<code class="language-html"><div class="box">My box</div></code>

Fügen Sie dann eine grundlegende innere und äußere Schattierung mit box-shadow:

hinzu

<code class="language-css">.box {
  position: relative;
  width: 500px;
  padding: 50px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}</code>

Der Curl-Effekt wird mit zwei :before und :after pseudo-Elementen erstellt. Dies sind:

1. rotiert und verzerrt mit CSS3 -Transformationen.
2. am unteren Rand positioniert.
3. gegeben A box-shadow.

Einstellung z-index: -1 platziert die Pseudoelemente hinter das Hauptbox und macht nur die Schattenkanten sichtbar:

Die CSS für die Pseudoelemente:

<code class="language-css">.box:before, .box:after {
  position: absolute;
  width: 40%;
  height: 10px;
  content: ' ';
  left: 12px;
  bottom: 12px;
  background: transparent;
  transform: skew(-5deg) rotate(-5deg);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  z-index: -1;
}

.box:after {
  left: auto;
  right: 12px;
  transform: skew(5deg) rotate(5deg);
}</code>

Während dies Anbieterpräfixe für eine breitere Browserunterstützung verwendet, bleibt es effizienter als eine bildbasierte Lösung. Der Effekt funktioniert in modernen Browsern; Ältere Browser lassen den Schatten einfach weg. Eine Demonstrationsseite ist verfügbar (Link weggelassen, da sie nicht in der Eingabe angegeben ist). Das CSS ist in das HTML eingebettet. IE6, 7 und 8 werden anmutig verschlechtern, ohne die Schatteneffekte zu zeigen.

häufig gestellte Fragen (FAQs) zu reinen CSS3-Papier-Locken werden weggelassen, da sie bereits im Originaltext beantwortet werden.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie CSS3 -Papiercurls ohne Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!