Wie nur ein Kreisbild mit CSS machen (Beispiel)
Überhaupt gewundert, wie diese Phantasie Kreis Bilder ohne die Notwendigkeit, damit sie in Photoshop zu bearbeiten? Wenn Sie nicht wissen, was ich rede, siehe Scenewave. Das ist eigentlich ziemlich einfach. Aus Gründen der diesem Beispiel wollen wir Coca-Cola-Logo von hier verwenden.
Lassen Sie sich mit einfachen HTML und CSS für diesen beginnen (ich nehme an, Sie können ein leeres HTML-Dokument einrichten und verknüpfen Sie ein Stylesheet, um es).
Lassen Sie uns setzen einen grundlegenden Stil für die Klasse img-Kreis oben.
Das einzige, was, die Sie nicht vertraut sind, ist die Linie 5. Die Hintergrund-Größe ist eine neue CSS3-Eigenschaft, die mit den Abmessungen des Hintergrunds manipulieren kann. Sie können durch Eingabe exakte Pixelwerte, Prozentsatz, seine Breite und Höhe eingestellt oder die Hintergrundabdeckung machen oder ganze Container fit machen. Stellen Sie sicher, dass Sie die Hintergrund-size-Dokumentation für weitere Informationen zu sehen.
So, jetzt haben wir Bild, dass unsere viereckigen Behälter passt. Lassen Sie sich den CSS-Code ändern, um kreisförmige Rahmen zu machen. Wir werden border-radius Eigenschaft verwenden. das gibt uns Gelegenheit, die Ecken des Elements abzurunden es angewendet wird. Um unser Bild Kreis machen müssen wir Werte verwenden, die sind die Hälfte der Bildgröße Werte. Unsere CSS-Datei sieht nun wie folgt aus:
Und du bist fertig! Neue CSS-Eigenschaften ermöglichen es uns, Effekte zu schaffen, die Ihnen wertvolle Minuten Photoshopping sparen.
Wenn Sie sorgfältig Links zur Dokumentation studiert habe ich Ihnen (falls Sie es verpasst - check it out), Sie wissen genau, dass Sie das Bild der Ecken in nicht-symmetrische Art und Weise manipulieren kann. Versuchen Sie CSS-Code unten. Was ist passiert?
Um zu sehen, die Auswirkungen dieses Tutorial Besuch dieser jsFiddle Seite.