Aufbau eines Sterns mit CSS

Wenn es eine Sache gibt, die ich an meiner Arbeit am meisten liebe, dann ist es die Umsetzung der Herausforderungen, die mir ein Designer stellt. Es gibt fast immer einen Weg, ein Design in Code umzusetzen, und ich liebe es herauszufinden, wie ich mit CSS dem Originaldesign so nahe wie möglich kommen kann.

Vor kurzem hat mir unser Creative Director bei Sparkbox, Drew, ein Design für eine E-Commerce-Website gegeben, das ich umsetzen sollte. Es gab ein Element auf der Website, das eine Art Sternform hatte und den Preis des Produkts enthielt. Da es einen dynamischen Preis enthielt, musste sich das Element entsprechend vergrößern und anpassen. Also habe ich mich daran gemacht, dieses Ding mit CSS zu bauen.

Das Design zerlegen

Also los geht's. Wir haben einen ziemlich spitzen Kreis mit dem Produktpreis darin. (Beachten Sie auch den dezenten inneren Rand, den Drew hier verwendet. Darüber werden wir später sprechen.) Ich habe dieses Design genommen und daraus das hier gemacht

Ich weiß, es ist nicht *ganz* dasselbe – es hat ein paar "Spitzen" weniger –, was ich technisch gesehen mit etwas mehr Markup hätte erreichen können, aber ich entschied, dass etwas weniger Markup und weniger Spitzen es wert waren. Lassen Sie uns durchgehen, was hier vor sich geht.

Visualisierung des Geschehens

Stellen Sie sich diesen Stern als eine Reihe von rotierten Boxen vor. Die Art und Weise, wie ich mir das Ganze vorstellte, war mit ein paar Haftnotizen. Schauen Sie mal

Ich habe hier also drei Elemente, jedes um 30 Grad gedreht. (Im fertigen Design werde ich tatsächlich sechs Elemente haben, Sie werden sehen...)

Der Markup

<div class="price-container">
  <div class="price">
    <span class="label">Buy</span>
    <span class="number">$15.00</span>
    <span class="label">Now</span>
  </div>
</div>

Ich habe <div class="price-container">, das, Sie haben es erraten, den Stern für den Preis enthält. Ich werde es für den Hintergrund des Sterns verwenden. Das <div class="price"> ist der Container für den Text im Inneren (die Preisinformationen). Das war's mit dem Markup. Von hier aus werde ich Pseudo-Klassen stylen, um die mehreren Spitzen zu erzeugen. Außerdem erwähnte ich bereits, dass die CSS-Version dieses Sterns ein paar Spitzen weniger hatte. Dieses Markup enthält eigentlich nichts unnötiges.

Das Styling

Nun zum spaßigen Teil. Ich werde kurz umreißen, was ich tun werde, und Ihnen dann die dafür benötigten Stile zeigen. Ich werde .price-container, .price und die Pseudo-Elemente :before und :after für jeden stylen. Im Wesentlichen habe ich sechs Elemente zur Verfügung. Ich habe dieses Hintergrundbild erstellt, das auf jedes der Elemente angewendet wird, und ich werde jedes um 15 Grad drehen

Wenn Sie sich das Bild der Haftnotizen oben noch einmal ansehen, bemerken Sie, wie ich den inneren Rand mit Bleistift gezeichnet habe. Durch das Zerlegen des Haftnotizen-Modells habe ich ein Stück erhalten, das so aussieht.

Hier sind also die Stile jedes Elements (die Kommentare sollten Ihnen helfen zu verstehen, was vor sich geht. Ich habe auch einige Notizen unten.)

.price-container,
.price-container:before,
.price-container:after,
.price-container .price,
.price-container .price:before,
.price-container .price:after {
	height: 8.5em;
	width: 8.5em;
	background: #760B1F url(price-bg.png) top left no-repeat;
	background-size: 8.5em;
}

.price-container:before,
.price-container:after,
.price-container .price:before,
.price-container .price:after {
	content: "";
	position: absolute;
}

.price-container {
	margin: 100px auto; /* Centering for demo */
	position: relative; /* Context */
	top: 2.5em;
	left: 2.5em;
	-webkit-transform: rotate(-45deg);
	  -moz-transform: rotate(-45deg);
	   -ms-transform: rotate(-45deg);
	    -o-transform: rotate(-45deg);
	       transform: rotate(-45deg);
}

.price-container:before {
	top: 0;
	left: 0;
	-webkit-transform: rotate(-30deg);
	  -moz-transform: rotate(-30deg);
	   -ms-transform: rotate(-30deg);
	    -o-transform: rotate(-30deg);
	       transform: rotate(-30deg);
}

.price-container:after {
	top: 0;
	left: 0;
	-webkit-transform: rotate(-15deg);
	  -moz-transform: rotate(-15deg);
	   -ms-transform: rotate(-15deg);
	    -o-transform: rotate(-15deg);
	       transform: rotate(-15deg);
}

.price-container .price {
	padding: .5em 0em;
	height: 7.5em; /* height minus padding */
	position: absolute;
	bottom: 0;
	right: 0;
	-webkit-transform: rotate(45deg);
	  -moz-transform: rotate(45deg);
	   -ms-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	       transform: rotate(45deg);
	z-index: 1; /* important so the text shows up */
}

.price-container .price:before {
	top: 0;
	left: 0;
	-webkit-transform: rotate(60deg);
	  -moz-transform: rotate(60deg);
	   -ms-transform: rotate(60deg);
	    -o-transform: rotate(60deg);
	       transform: rotate(60deg);
}

.price-container .price:after {
	top: 0;
	left: 0;
	-webkit-transform: rotate(75deg);
	  -moz-transform: rotate(75deg);
	   -ms-transform: rotate(75deg);
	    -o-transform: rotate(75deg);
	       transform: rotate(75deg);
}

Ein paar Dinge, die ich zu den Stilen anmerken werde

• Beachten Sie die Reihenfolge der Rotationswinkel: Diese Reihenfolge ist wichtig, da im innersten Element Text sein wird. Daher muss das letzte Element (das, in das der Text eingefügt wird, in diesem Fall .price) gerade sein. Beachten Sie, dass .price-container um -45 Grad und .price um 45 Grad gedreht ist – zurück auf 0.
• Die Höhe und Breite: Höhe und Breite müssen festgelegt werden, da wir es hier mit Hintergrundbildern zu tun haben. Ich habe sie in em festgelegt, damit sie sich entsprechend anpassen, wenn sich die Textgröße erhöht.
• Es gibt einen oberen und unteren Abstand bei .price-container .price. Deshalb ist die Höhe etwas anders als bei allen anderen.
• Alles ist absolut im ersten Container positioniert. .price-container hat left: 2.5em und top: 2.5em, um das Ganze ein wenig zu verschieben. Wenn alles gedreht wird, gehen die Ecken über den Rand und aus dem Container heraus.
• z-index: Es gibt einen z-index für .price-container .price. Dies ist wichtig, damit die Preisinformationen in diesem Div sichtbar sind.

Nun bleibt nur noch das Stylen des Textes.

.price-container .price span {
  position: relative;
  z-index: 100;
  display: block;
  text-align: center;
  color: #FE3D5C;
  font: 1.8em/1.4em Sans-Serif;
  text-transform: uppercase;
}

.price-container .price span.number {
  font-weight: bold;
  font-size: 2.5em;
  line-height: .9em;
  color: #fff;
}

Ohne Bild

Nun, ich habe hier ein paar zusätzliche Elemente, da das Design diesen sehr dezenten inneren Rand vorsah. Wenn Sie den inneren Rand nicht mögen oder benötigen, entfernen Sie einfach den Teil mit dem Hintergrundbild und der Hintergrundgröße, und das Design wird trotzdem gut aussehen.

Browser-Unterstützung

Dies funktioniert so, wie es ist, in IE 9+, Firefox 4.0+, Safari 4.1+ und Chrome 3.0+. IE 8 und älter unterstützen keine Hintergrundgröße, und Chrome 1.0, Firefox 3.6 und Safari 3.0 benötigen einige Vendor-Präfixe. IE8 unterstützt zwar Pseudo-Elemente, aber keine transform.

Der Fallback wäre ein farbiger Quadrat. Wahrscheinlich kein großes Problem.

Da haben Sie es

Es ist eine Sternen-Preis-Sache. Flexibel genug, um sich zu vergrößern, wenn Sie Ihre Schriftgröße erhöhen. Mit etwas CSS gemacht.

Demo ansehen   Dateien herunterladen