Adobe-ähnliche Pfeil-Header

Adobe hat einige ziemlich coole Header-Leisten für Module auf ihrer Website. Die Header-Leiste ist in linke und rechte Abschnitte unterteilt. Der linke Teil ist ein erklärender Titel und der rechte Teil ist ein verwandter Link. Aber lassen Sie uns super kritisch darauf eingehen, wie sie es gemacht haben.

Erstens verwenden sie ein nicht sprites-basiertes Bild dafür.

Das bedeutet eine zusätzliche HTTP-Anfrage nur für die Header. Schlimmer noch, der :hover-Effekt ist ein völlig separates Bild. Das bedeutet eine weitere HTTP-Anfrage und ein „Flash of Black“, während das zweite Bild bei Ihrem ersten Hover geladen wird.

Wir können das mit null Bildern machen! Hier ist unsere Version

Das Markup für den Header ist nur ein Titel mit einem Link darin

<div class="module">
  <h2>Community <a href="#">Blue</a></h2>
  <!-- stuff in module -->
</div>

Hier ist die grundlegende Einrichtung des Headers, mit dem Link rechts mit grundlegenden Farben, einschließlich der geraden weißen Linie, die durch einen Rand erzeugt wird

.module h2 {
	background: #ccc;
	padding: 0 0 0 10px;
	font-size: 16px;

	/* Thickness of the bar more easily achieved with line-height
	   since padding would push link inward.  */
	line-height: 2; 
}
.module h2 a {
	float: right;
	position: relative;
	text-decoration: none;
	color: #333;
	padding: 0 10px;
	border-left: 5px solid white;
}

Jetzt kommt der Trick, um den Pfeil innerhalb der Linie zu erhalten, indem einfach CSS-Dreiecke über die immer nützlichen Pseudo-Elemente angewendet werden.

.module h2 a:before,
.module h2 a:after {
	content: "";
	position: absolute;
	/* Pushed down half way, will get pulled back up half height of triangle
	   ensures centering if font-size or line-height changes */
	top: 50%;
	width: 0;
	height: 0;
}
.module h2 a:before {
	left: -12px;
	/* Triangle */
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid white;
	/* Pull-up */
	margin-top: -8px;
}
.module h2 a:after {
	/* Smaller and different position triangle */
	left: -5px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-right: 6px solid #a2d6eb;
	margin-top: -6px;
}

Ein wesentlicher Unterschied zwischen unserer und ihrer Version ist, dass sie einen Farbverlauf haben, der direkt durch den Pfeil verläuft. Das ist mit unserer nicht möglich, da es nicht praktikabel ist, einen Farbverlauf mit der CSS-Dreieck-Technik anzuwenden. Das soll nicht heißen, dass Farbverläufe ausgeschlossen sind, Sie müssten nur sicherstellen, dass dort, wo der Pfeil an den Hauptlink angebracht ist, die Farbe einheitlich ist.

Für die Demoseite habe ich ein paar verschiedene Farben, Übergänge und Beispiele hinzugefügt, bei denen doppelte Dreiecke verwendet werden könnten, um eine abgewinkelte Linie zu simulieren.

Demo anzeigen   Dateien herunterladen