Heim > Web-Frontend > CSS-Tutorial > Wie kann ich mit reinem CSS einen „Tooltip Tail'-Effekt erstellen?

Wie kann ich mit reinem CSS einen „Tooltip Tail'-Effekt erstellen?

Linda Hamilton
Freigeben: 2024-11-08 20:33:02
Original
703 Leute haben es durchsucht

How Can I Create a

Einen „Tooltip Tail“ mit reinem CSS erstellen

Das Konzept, einen „Tooltip Tail“ nur mit CSS zu erstellen, ist faszinierend. So erzielen Sie diesen Effekt:

Einfacher „Tooltip Tail“ mit Randtrick

Das erste Beispiel erstellt einen „Tooltip Tail“-Effekt durch clevere Randmanipulation:

HTML:

<div>Cool Trick:
    <div class="tooltiptail"></div>
</div>
<br>

<div>How do I get this effect with only CSS?
    <div class="anothertail"></div>
</div>
Nach dem Login kopieren

CSS:

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff #ffffff;
    border-style: solid;
    border-width: 20px;
    width: 0px;
    height: 0px;
}

.anothertail {
    background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
    display: block;
    height: 29px;
    width: 30px;

}
Nach dem Login kopieren

Verbesserter „Tooltip Tail“ mit Box Shadow

Um der Spitze des „Tooltip Tail“ Dimension und einen Schatten hinzuzufügen, Sie können einen Box-Shadow-Effekt verwenden:

#tailShadow {
    position: absolute;
    bottom: -8px;
    left: 28px;
    width: 0;
    height: 0;
    border: solid 2px #fff;
    box-shadow: 0 0 10px 1px #555;
}
Nach dem Login kopieren

Browserübergreifender „Tooltip Tail“ mit Shadow

Das folgende Snippet gewährleistet die browserübergreifende Kompatibilität für den Box-Shadow-Effekt:

#tailShadow {
    position: absolute;
    bottom: -8px;
    left: 28px;
    width: 0;
    height: 0;
    border: solid 2px #fff;
    -moz-box-shadow: 0 0 10px 1px #555;
    -webkit-box-shadow: 0 0 10px 1px #555;
    box-shadow: 0 0 10px 1px #555;
}
Nach dem Login kopieren

Mit diesen Techniken können Sie benutzerdefinierte „Tooltip-Enden“ in CSS erstellen, die die visuelle Attraktivität und Funktionalität Ihrer Webelemente verbessern.

Das obige ist der detaillierte Inhalt vonWie kann ich mit reinem CSS einen „Tooltip Tail'-Effekt erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage