senäh

17senäh und so…

HTML/CSS/JS
23. Dez 2012
Kommentare: 0

iEnno Logo nur mit CSS3 (Ribbon-ish)

Kategorien: HTML/CSS/JS | 23. Dez 2012 | Kommentare: 0

Vergangene Woche schmiss es mir einen Beitrag in den Feedreader, in dem ein einfaches Ribbon allein mit CSS umgesetzt wurde. Ich verspürte spontan den Drang sowas in der Art anhand des “Logos” von iEnno – meinem Blogs über Mac- und iOS-Software – selbst zu bauen. Das Ergebnis möchte ich gern mit euch teilen.

TL;DR

Für alle Ungeduldigen gibt es Bild und Code sofort. Links das Original in Photoshop, rechts die CSS-Variante.

links: PSD, rechts: CSS

links: PSD, rechts: CSS

Ein JsFiddle gibt’s hier.

Alle anderen werden im Folgenden erfahren, aus welchen Komponenten sich das Resultat zusammensetzt.

HTML

Ich mag es möglichst wenig Markup zu verwenden, um das HTML semantisch zu halten. Folgerichtig ist für die beiden Schriftzüge nur das hier nötig:

<hgroup>
  <h1>iEnno</h1>
  <h2>Mac, iPhone und so</h2>
</hgroup>

Das ist alles. Um das ganze gemäß SMACSS ultimativ wiederverwendbar zu machen, könnte man noch Klassen hinzufügen. Überlasse ich jetzt mal euch.

CSS

Als erstes kümmern wir uns um den Hintergrund. Es gibt einen leichten Hintergrundverlauf und die Stitches. Alles setzen wir mit dem hgroup-Element um. Verläufe mit CSS3-Properties, Stitches mit Pseudo-Elementen.

hgroup {
  width: 180px;
  height: 180px;
  position: relative;
  margin: auto;
  /* some vendor prefix shit for background image */
  background-image: radial-gradient(circle farthest-side at center top, #924F6E 0%, #833B5C 100%);
  text-align: center;
}

hgroup:before, hgroup:after {
  content: "";
  display: block;
  position: absolute;
  left: 4px;
  top: 3px;
  width: 170px;
  height: 170px;
  margin: auto;
  border: dashed 1px #5e042e;
}

hgroup:after {
  left: 5px;
  top: 4px;
  border-color: #A66B83;
}

Sieht dann so hier aus:

Hintergrund mit Verlauf und Stitches

Hintergrund mit Verlauf und Stitches

Der Rest ist eher Formsache.

h1 {
  margin: 0;
  padding: 30px 0 0;
  font-family: "Helvetica Neue";
  font-style: normal;
  font-weight: bold;
  text-shadow: 0 -1px 1px #57122F, 2px 1px 0px #925470;
  font-size: 40pt;
  color: #70183F;
}

h2 {
  margin:0;
  font-family: Noteworthy; // mac only
  font-style:italic;
  font-weight:normal;
  font-size:14pt;
  color:white;
  opacity:0.8;
}

Fazit

Fertiges Logo aus CSS

Fertiges Logo aus CSS

Immer wieder erstaunlich, was man erreichen kann, wenn man sich dazu entschließt auf die Browserkompatibilität zu pfeifen. Gemessen am Original (siehe ganz oben) fehlen eigentlich nur 3 Sachen:

  • das leichte Rauschen auf dem Hintergrund, um das ganze etwa interessanter wirken zu lassen
  • der inset-Schatten beim iEnno-Schriftzug gefällt mir nicht ganz, ist aber momentan vermutlich nicht besser machbar
  • die Schrift des Untertitels ist etwas zu fett geraten; wer helfen kann, darf das gern tun 😉

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)