Border-Radius - Circles and Curvy Shapes with CSS3

psd zu html | codingpeople - webdesign trifft html - 20% Rabatt für alle Neukunden

Border-Radius with CSS3Border-Radius - Die oftmals unspektakulär wirkende CSS-Eigenschaft Border-Radius, die mittlerweile von ( fast ) jedem Browser unterstützt wird, kann wie der Blog-Beitrag The hidden power of border-radius von Liam McCabe zeigt, doch einiges mehr als der ein oder andere vielleicht gedacht hat. Warum warten bis alle Browser SVG-Grafiken unterstützen, wenn man Elemente wie einen Kreis oder Kurven auch auschließlich mit der CSS-Eigenschaft Border-Radius umsetzen kann? ;o) Weiterhin zeigt Liam in seinem Beitrag auch, wie einfach es ist beispielsweise mittels überlappender Elemente einen Mond abbilden zu können. Sich einfach mal ein wenig Zeit nehmen und testen und schon eröffnen sich einem vollkommen neue Ansätze zum Thema Border-Radius. Auf diese Weise könnte man bspw. ein Badge oder ähnliches, ausschließlich via CSS umsetzen.

It has the potential to produce some terrific designs using just CSS - no images

Die Ansätze zu den jeweiligen Ergebnissen wie einem Kreis, sind dabei denkbar einfach. Die Angaben zur Breite und Höhe müssen lediglich dem doppelten des Radius entsprechen.

Code-Beispiel
#circle {
   width: 200px;
   height: 200px;
   background-color: red;
   -webkit-border-radius: 100px;
}

Der Ansatz zu einem Halbkreis ist dann ebenso folgerichtig wie simpel - man halbiert einfach die Breite! Für das obige Beispiel bedeutet dies with:100px.

Aber seht selbst - The hidden power of border-radius!

Ähnliche Artikel zu diesem Thema:

Billomat - Rechnungen Online versenden

  1. Mario 05 Feb 2010, 10:08

    So simpel, aber man muss wirklich erst einmal auf diese Ideen kommen ;o)


  2. Designmacher 06 Feb 2010, 06:05

    Oh toll. Ich wusste noch gar nicht, dass es jetzt schon funktioniert. Dachte immer das Ganze wird erst mit CSS3 eingeführt.


  3. Karl 08 Feb 2010, 15:22

    Wow, auf die Idee wär ich ja nie im Leben gekommen ! Das probier ich doch gleich mal aus !


Artikel kommentieren





XHTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""> <abbr title=""> <b> <cite> <code> <em> <i> <strike> <strong>

E-Mail-Abo: Bleiben Sie auf dem Laufenden und Abonnieren Sie den Webstandard-Blog ganz unkompliziert via Feedburner per E-Mai!


authimage

CSS-Design - Das Buch"CSS-Design - Das CSS Buch"
Webdesign lernen mit CSS-Tutorials. Jetzt kaufen - morgen lesen!CSS-Design - Das Buc



Webstandards Top-5

 

Werbepartner

Codeagenten.de / Sie gestalten. Wir programmieren. X-HTML & CSS aus Ihren Designs.Backlink-Spinne - SEO Link Manager & Backlink-VerwaltungEmpfehlung Hostingnetzpepper - Agentur für TYPO3-EntwicklungHier werben - TKP unter 1EuroHier werben - TKP unter 1Euro

Bilder-Galerie

Bilder-Galerie

Schon abonniert?

SEO-Domains for sale!