16x bewertet

Runde Ecken

von smoothie  |  17.11.2009 um 11:32 h
CSS Grundlagen
Typ: CSS Grundlagen
Stufe:Einfach
Gerade in dieser Zeit, glaube ich zumindest, sind "runde Ecken" in der Szene sehr gefragt.Auf Giatu und Bama-Lichi und wie sie alle heißen, trifft man auf sie.Diese Runden Ecken. Smilie .Aber wie macht man die?

Für mein Beispiel benutze ich eine Navigation.Der ich runde Ecken verpassen will.Ihr könnt aber allem was eckig und kantig ist eine runde Form geben Smilie .

Es basiert lediglich auf einem CSS-Code den ihr einfügen müsst.Ich hab euch mal ein Beispiel gebracht.Ihr könnt es für eure eigene Page benutzen..


a.navi:link, a.navi:visited, a.navi:active {
display:block;
text-align:center;
border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px;
background:#D6D6D6;
text-decoration:none;
padding:5px 0px 5px 0px;
margin-right:4px;
margin-bottom: 4px;
font:bold 10px "Arial";
color:#595959;
}


das Entscheidende für unsere runden Ecken ist der Abschnitt des Codes:
border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px;
der gibt an, in welchem Radius (doof erklärt) die Ecken abgeschnitten werden sollen.
Am Ende würde es dann so aussehen:
Bild

Ziemlich einfach diese runde Ecken nee?? Smilie .Ich hoffe es hat euch einigermaßen geholfen.Bei Fragen, die ich auch beantworten kann Smilie , einfach anschreiben.

lg das smoothie



19 Kommentare




jeffreecyde

finde ich echt gut!
Werde es aufjedenfall mal verwenden ;)
am 17.11.2009 um 14:39 Uhr


P@ck

Nette Idee, jedoch nicht angebracht. Die art, über -moz kann nur der Firefox sowie IE 8. Bei allen anderen Browsern wird es eckig dargestellt. Und es ist im Moment leider so, dass noch viele IE6 ect verwenden. :(

Also vllt noch ein Tut machen, wo du das mit Grafik und CSS machst. ;)
am 17.11.2009 um 14:44 Uhr


smoothie

das wusste ich nicht.Benutze ja selbst nur Firefox ,werde ich mir merken danke für den tipp Smilie
am 17.11.2009 um 14:49 Uhr


monkeybox

Im Safari funktioniert es auch Smilie
am 17.11.2009 um 14:55 Uhr


Nobi

gefällt mir :) weiter so :)
am 17.11.2009 um 15:55 Uhr


P@ck

Jap, in Safari och. Dafür kann man aber auch das -webkit zeugs nehmen ;)
am 17.11.2009 um 16:01 Uhr


luisaakainsane

tolles Tut ˆ_ˆ
sehr hilfreich.
am 17.11.2009 um 16:13 Uhr


Flügel

Man sollte dazu erwähnen, dass das CSS-file dadurch nicht mehr valide ist.
Die browserspezifischen (!) Codes nehmen eine Funktion, die ab CSS3 implementiert sein soll, vorweg. Es ist nicht gewährleistet, dass sie in neueren Versionen die CSS3 unterstützten funktionieren werden. Ältere Browser können mit diesem Code gar nichts anfangen!

Ich hätte erwähnt, dass man natürlich auch andere Lösungen - eventuell komplizierter - anstreben kann. Ob Grafisch, per CSS oder mit JS - alles weitere Möglichkeiten!

Viel Eigenleistung seh ich jetzt nicht in dem Tut .. :/ Es wäre gut gewesen, wenn eben nicht nur einseitig geschrieben worden wäre. Alles andere liefert Google schneller und klarer.
Zumal ja nicht mal nur Navigationselemente damit abgerundet werden können .. .
am 17.11.2009 um 16:28 Uhr


Oli

Meiner Meinung nach beeinträchtigen fehlende Kommatar und fehlende Abstände nach Punkten die Lesbarkeit deines Tutorial. Da würde ich demnächst einfach mal drauf achten <3
Die Idee, ein Tutorial zu abgerundeten Ecken zu schreiben, ist ganz nett, doch hätte man da ein wenig mehr schreiben können. Das Navigations-Beispiel ist an sich ganz nett, doch gehst du eigentlich gar nicht, oder besser gesagt kaum, auf die eigentliche CSS-Funktion ein.
Man könnte beispielsweise erwähnen, dass man auch nur bestimmte Ecken abrunden kann:

-moz-border-radius-topleft: 10px;
/*.....*/
am 17.11.2009 um 16:42 Uhr


SmaX

Sowas geht normalerweise erst richtig gut ab CSS 3.

Trozdem ganz ok.
am 17.11.2009 um 17:24 Uhr


SchizoKill

Gutes Tut,musste es bisher immer ganz umständlich machen,aber wenns auch einfacher geht :)
am 17.11.2009 um 19:20 Uhr


Yaka

also ich finde das Tutorial gut Smilie .

Jedoch könntest du doch nun hinzufügen das der unterschied zwischen den einzelnen "Border" Begriffen ist!

z.B hier:

border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px;


was border-radius mach (xD) was -moz-border-radius macht usw ;D

sonst Gut (:
am 18.11.2009 um 11:26 Uhr


Luluko

Erstmal danke fürs Tut, aber eine Frage, kann mir einer sagen, wie ich es zum beispiel machen kann, das nur 2 von 4 Ecken rund sind, das hatte ich nämlich auch schon auf vielen seiten sehen...
am 21.11.2009 um 11:19 Uhr


monkeybox

@Luluko: Oli hat in seinem Kommentar schon angegeben, wie man bestimmte Ecken abrunden kann. Smilie
am 10.01.2010 um 00:09 Uhr


Luluko

Das hatte ich gar nicht gesehen Smilie sry.
am 10.01.2010 um 00:13 Uhr


dwaejitokki

Ein super Tut! Ich hab′s auch schon erfolgreich eingesetzt ˆˆ

Danke!
am 19.01.2010 um 23:17 Uhr


uuhna

Hallo :)
Ich wollte fragen, ob mir jemand erklären kann, wie ich die "Buttons" nebeneinander setzten kann .. Also dass sie nicht untereinander stehen, sondern nebeneinander. Vielleicht kann mir jemand auf die Schnelle helfen :)
am 24.05.2010 um 20:48 Uhr


smoothie

@UUHNA :

Meinst du eine horizontale navigation?
KLICK ME
Hier ist das tutorial und dann einfach nur den css code für die "runden ecken" reinkopieren :)
am 25.05.2010 um 11:39 Uhr


uuhna

Ja, meinte ich Smilie
Ich hab′s selbst rausbekommen Smilie
Habs einfach auf float: left gesetzt Smilie
am 25.05.2010 um 12:35 Uhr