Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Im Zuge der „Retina-Optimierung“ von Websites sollte man sich Gedanken machen, welche technische Lösung sich für welche Art Icon am ehesten anbietet. Neben Webfont-Icons, Vektoren (SVG) und hochauflösenden Pixelgrafiken kommen auch CSS-generierte Grafiken in Frage. Für das in diesem Artikel beschriebene Icon halte ich eine Umsetzung mittels CSS3 für durchaus sinnvoll.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

Vorteile der CSS3 Umsetzung

Die Umsetzung mittels CSS3 hat einige wesentliche Vorteile. Die Grafik wird berechnet und eignet sich daher auch für hochauflösende Displays. Auch die Performance der Website wird verbessert wenn kein Bild geladen werden muss. Darüber hinaus ist die Grafik sehr flexibel. Sie kann unkompliziert animiert und umgefärbt werden und passt sich relativen Schriftgrößen an.

Technischer Aufbau des CSS3-Tag-Icons
Technischer Aufbau des CSS3-Tag-Icons

Tag-Icon mit CSS3

Der Quellcode des Icons ist recht übersichtlich. Mit Hilfe der Pseudoelemente :before und :after wird das Dreieck und der Kreis innerhalb des Dreiecks erstellt. Der HTML-Code ist ein gewöhnlicher Link mit CSS-Klasse.


.tagIcon {
   float: left;
   height: 30px;
   line-height: 32px;
   position: relative;
   margin-bottom: 10px;
   padding: 0 15px 0 15px;
   background: #C09;
   color: white;
   text-decoration: none;
   border-radius:0 4px 4px 0;
}

.tagIcon:before {
   content: "";
   position: absolute;
   top: 0;
   left: -15px;
   border-color: transparent #C09 transparent transparent;
   border-style: solid;
   border-width: 15px 15px 15px 0;
}

.tagIcon::after {
   content: '';
   position: absolute;
   top: 12px;
   left: 0;
   float: left;
   width: 5px;
   height: 5px;
   border-radius: 100%;
   background: white;
}

.tagIcon:hover {
   background:#333;
} 

.tagIcon:hover:before {
   border-color: transparent #333 transparent transparent;
}

Live-Beispiel

Die nachfolgende Abbildung ist ein Live-Beispiel. Du kannst die Datei auch in einem separaten Fenster anzeigen.

Themenverwandte Links

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. CSS-Content erzeugen - ::before ::after - Adrian Hohendorff
    schrieb am 28.02.2015 um 23:57 Uhr:

    […] (Beispiel gefunden beim Kulturbanausen) […]

    Antworten
  2. Adrian
    schrieb am 24.02.2015 um 20:24 Uhr:

    Super Idee!

    :before und :after stammen aus CSS2. Zu CSS3 wurde lediglich die Syntax auf die Notation mit zwei Doppelpunkten geändert, um sie von Pseudoklassen abzugrenzen.
    Oder meinst du mit dem Titel die border-radius-Regel?

    Antworten
    • Adrian
      schrieb am 24.02.2015 um 20:25 Uhr:

      Ich meinte border-radius-Eigenschaft :P

      Antworten
  3. Florence
    schrieb am 07.05.2013 um 13:30 Uhr:

    schöner Beitrag!

    Nur ein kleiner Hinweis: :before und :after sind keine Pseudoklassen, sondern Pseudoelemente.

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 07.05.2013 um 21:52 Uhr:

      Du hast vollkommen recht. Ich habe den Artikel korrigiert. Vielen Dank für die Info :)

      Antworten

Schreibe einen Kommentar zu CSS-Content erzeugen - ::before ::after - Adrian Hohendorff Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →