Tutorial Runder Bildausschnitt mit ‘border-radius’

Einfache CSS, hier als class="circular" mit ‘border-radius’ um einen Bidausschnitt rund darzustellen. Hier meine CSS, die Ihr (wie hier) entweder als <style> Anweisung in die HTML vom Layout schreibt, oder als Class direkt in den CSS-Code von NOF.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen

<style>
   .circular {
        width: 500px; /* Breite vom Hintergrundbild */
        height: 500px; /* Hoehe vom Hintergrundbild */
        box-shadow: 5px 5px 5px #888888; /* optionaler Schatten */
        border-radius: 250px; /* Haelfte der Hoehe und Breite */
        -webkit-border-radius: 250px;
        -moz-border-radius: 250px;
    }
</style>

Zieht Euch einen Layoutbereich in der Breite und Höhe vom Bild auf (hier 500px x 500px) und gebt diesem Layoutbereich das Bild als Hintergrund, sowie die Class ‘circular’ im Fenster “Layoutbereich-Eigenschaften”. Ebenso könnt Ihr auch ein Bild direkt auf der Seite aufziehen und dann dem Bild die Class geben.

Layoutbereich-Class

Viel Spaß !

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik