Counter kostenlos

Tutorial

Runder Icon (HTML/CSS)

In diesem Tutorial zeige ich euch wie man einen quadratischen Icon kreisförmig macht. Zuerst benötigen wir ein Bild, ich verwende dieses hier (von Morguefile.com):

Anschließend verkleinere und schneide es auf 120x120 zu:

Nun haben wir einen Icon, den wir unter "icon.jpg" abspeichern. Nun erstellen wir ein neues oder öffnen ein bestehendes HTML-Dokument und fügen unseren Icon ein:

Die Klasse "roundicon" wird später benötigt um den Icon rund zu machen. Als nächstes folgt der CSS-Teil. Um den Icon rund zu machen benötigen wir die CSS3 Eigenschaft "border-radius" und setzen diese auf 50%. Diesen Code fügen wir in vor </head> ein:

-webkit-border-radius unterstützt die Anzeige in Safari and Chrome Browsern, -moz-border-radius in Mozilla Firefox Browsern und border-radius die restlichen aktuellen Browser. Nun sollte unser Icon wie folgt aussehen:

Natürlich kann man da noch vieles hinzufügen, wie z. B. einen Rahmen:

Ich hoffe ich konnte euch ein wenig weiterhelfen.