Ich bin gerade auf einen ordentlichen CSS-Trick gestoßen. Schauen Sie sich die Geige an ...
.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;
}
<div>Cool Trick:
<br />
<div class="tooltiptail"></div>
</div>
<br />
<div>How do I get this effect with only CSS?
<br />
<div class="anothertail"></div>
</div>
Dies erzeugt einen kleinen pfeil- / dreieckartigen Effekt, einen "Tooltip-Schwanz". Das macht mich wahnsinnig!Ich bin wirklich daran interessiert zu wissen, wie das funktioniert?!
Gibt es eine Möglichkeit, diesen CSS-Trick zu erweitern, um einen Effekt wie folgt zu erzielen:
Dies ist ein interessantes Problem. Kann dies nur mit CSS erfolgen, wobei der Schatten vorerst ignoriert wird?
UPDATE 1
Ich fand eine Lösung für meine ursprüngliche Frage. Hier ist die Geige ...
HTML
<div style="position: relative;">Cool Trick:<br />
<div class="tooltiptail"></div>
<div class="tooltiptail2"></div>
</div>
CSS
.tooltiptail {
display: block;
border-color: #ffffff #a0c7ff #ffffff #ffffff;
border-style: solid;
border-width: 20px;
width: 0px;
height: 0px;
}
.tooltiptail2 {
display: block;
border-color: transparent #ffffff transparent transparent;
border-style: solid;
border-width: 18px;
width: 0px;
height: 0px;
position: relative;
left: 4px;
top: -38px;
}
Wie kann ich das obige kleine Bild mit reinem CSS, einschließlich des Schattens, genau nachahmen und es browserübergreifend kompatibel machen?
UPDATE 2
Hier ist meine Lösung nach einer Kombination der folgenden Antworten. Ich habe es nicht in mehreren Browsern getestet, aber es sieht in Chrome großartig aus.
http://jsfiddle.net/UnsungHero97/MZXCj/688/
HTML
<div id="toolTip">
<p>i can haz css tooltip</p>
<div id="tailShadow"></div>
<div id="tail1"></div>
<div id="tail2"></div>
</div>
CSS
#toolTip {
background-color: #ffffff;
border: 1px solid #73a7f0;
width: 200px;
height: 100px;
margin-left: 32px;
position:relative;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 0px 8px -1px black;
-moz-box-shadow: 0px 0px 8px -1px black;
-webkit-box-shadow: 0px 0px 8px -1px black;
}
#toolTip p {
padding:10px;
}
#tailShadow {
background-color: transparent;
width: 4px;
height: 4px;
position: absolute;
top: 16px;
left: -8px;
z-index: -10;
box-shadow: 0px 0px 8px 1px black;
-moz-box-shadow: 0px 0px 8px 1px black;
-webkit-box-shadow: 0px 0px 8px 1px black;
}
#tail1 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #73a7f0 transparent transparent;
position:absolute;
top: 8px;
left: -20px;
}
#tail2 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #ffffff transparent transparent;
position:absolute;
left: -18px;
top: 8px;
}
quelle
Antworten:
Hier ist ein Beispiel mit einem Box-Shadow. Alle Browser der neuesten Version sollten dies unterstützen
http://jsfiddle.net/MZXCj/1/
HTML:
CSS:
Code-Snippet anzeigen
quelle
Hier ist eine Erklärung zur Beantwortung Ihrer ersten Frage (ich überlasse das eigentliche CSS anderen, da ich faul bin - bitte stimmen Sie ihren Antworten zu, die Ihrer Meinung nach die Stimmen verdienen!):
Wenn Sie einen Rand mit unterschiedlichen Kantenfarben, aber demselben Stil (in Ihrem Fall
solid
) rendern , ist die Naht, die jedes Paar benachbarter Ecken teilt, eine diagonale Linie. Es ist ganz ähnlich wie das Diagramm hier zeigt dergroove
,ridge
,inset
undoutset
Stile Grenze.Beachten Sie, dass sich zwar alle Browser gleich verhalten und dies so lange ich mich erinnern kann, dieses Verhalten jedoch weder in der CSS2.1-Spezifikation noch im Modul CSS-Hintergründe und Rahmen vollständig definiert ist. Letzteres enthält einen Abschnitt, der Farb- und Stilübergänge an Ecken beschreibt , und die Beschreibung scheint zu implizieren, dass bei Rändern mit Eckradien von Null die gerenderte Linie tatsächlich eine Linie ist, die die Ecke der Polsterkante mit der Ecke der Ecke verbindet Randkante (was zu einer um 45 Grad abgewinkelten Linie für gleich breite Ränder führt), aber die Spezifikation warnt immer noch davor, dass dies möglicherweise nicht immer der Fall ist (zumal Ränder mit Eckradien von Null nicht einmal explizit berücksichtigt werden). 1
Durch das Content-Box-Modell (Original W3C) wird aus den 20-Pixel-Rändern ein 40 x 40-Bereich erstellt, wobei die Inhaltsdimensionen als 0 x 0 definiert werden.
Das Teilen eines Quadrats mit diagonalen Linien, die seine vier Ecken verbinden, führt zu vier rechtwinkligen Dreiecken, deren rechte Winkel sich am Mittelpunkt des Quadrats treffen (siehe unten).
Der obere, untere und linke Rand sind weiß, um dem Hintergrund des
.tooltiptail
Containers des Elements zu entsprechen, während der rechte Rand ein Blauton ist, der der Hintergrundfarbe des Tooltips entspricht:Das Ergebnis ist, dass die Ränder beschriftet und die Randgrenzen mit meinem vertrauenswürdigen Linienwerkzeug hinzugefügt wurden:
Das Neuausrichten des Tooltip-Endes ist lediglich eine Frage des Umschaltens der Tooltip-Farbe. Dies würde zum Beispiel einen Schwanz ergeben, der am Boden einer Spitze befestigt ist:
jsFiddle-Vorschau
1 Wenn Sie sich für die Einhaltung von Standards einsetzen, können Sie dies alles auch als Hack betrachten.
quelle
"I'm not worried about the shadow yet"
.Ich mache diesen Tooltip mit nur einem
div
Element.HTML:
CSS:
Demo
Erläuterung:
Ich habe mein normales Div mit Rand wie in anderen Beispielen. Der Schwanz ist eine einfache Kombination von CSS:
quelle
Tooltip ohne Schatten
Code-Snippet anzeigen
Geigen-Demo
Mit Shadow (sieht in WebKit etwas komisch aus ... muss es wohl optimieren):
Code-Snippet anzeigen
Demo 1 , Demo 2
quelle
Crossbrowser-Ansatz:
Code-Snippet anzeigen
Dieser funktioniert ab IE7 + (funktioniert in IE6 auch mit (
filter: chroma(color=white);
), zeigt jedoch nicht den schwarzen Rand um den Pfeil an).IE6 Fix:
Dadurch erhält die hässliche schwarze Transparenz, die von IE6 gerendert wird, die Farbe, die Sie im Chroma-Filter angegeben haben (ich habe Weiß verwendet, damit sie im Hintergrund verschwindet).
CSS 3-Ansatz:
Sie können dies mit CSS3-Rotation tun, schlagen jedoch in nicht CSS3-kompatiblen Browsern fehl:
quelle
Sie können die Pseudo-Elemente: before und: after von CSS verwenden. Zum Beispiel: Vorher kann verwendet werden, um ein Dreieck einzufügen, und: Nachher, um ein Rechteck einzufügen. Die Kombination dieser beiden erzeugt eine Blasen-Werkzeugspitze
Z.B :
Ein Online-Tool finden Sie unter http://www.careerbless.com/services/css/csstooltipcreator.php
quelle
title
?aria-label
ein geeigneteres benutzerdefiniertes Attribut für einen Tooltip ist. Mittitle
Sie auch das Standard-Tooltip-Rendering des Browsers (für sehende Benutzer sowieso).span:before
span:after
, ein Dreieck und zu erstellen und es nach Bedarf von webblogsforyou.com/… anzupassen .