Ecken und Kreise mit border-radius, box-shadow und gradient

Border Radius – abgerundete Ecken

Die schlichte CSS-Eigenschaft border wird zur Freude vieler Webdesigner in CSS3 um die Eigenschaft border-radius erweitert. border-radius rendert aber auch Kreise und Ellipsen, nicht nur abgerundete Ecken.

18-12-15 SITEMAP

In älteren Browsern braucht border-radius noch einen Browser-Präfix, damit die runden Ecken mit CSS ans Tageslicht kommen:

border-radius: 8px;

Inzwischen gehört border-radius in den modernen Browsern zu den etablierten CSS-Eigenschaften.

border-radius-kreis
<img style="border-radius:100px;" width="200" height="200" src="" />

Button mit border-radius

Die Buttons, die uns die Browser zur Verfügung stellen, sind schlicht und klein. Setzen wir eine größere Schrift ein, vergrößert sich auch der Button, aber wirkt schlicht und eckig.

border-radius allein reicht nicht, sondern auch die border-Eigenschaft und der Hintergrund können eine leichte Auffrischung brauchen.

.simplebutton { 
     font-size: 1em;
     padding:0 1em;
     height: 2.4em;
     border-radius: 1.2em;
     border: 1px solid #ddd;
     background-image: linear-gradient(to bottom, #efefef 30%, #ccc 80%);
     text-transform: uppercase;
     letter-spacing:1px;
     color:#777;
     text-shadow: 1px 1px 4px #fff;
     font-weight:bold;
 }

Der Button bekommt eine feste Höhe – 2em in diesem Beispiel. Mit einer festen Höhe von 2em und border-radius:1em oder 50% entsteht die perfekte Abrundung. Für den Glanz sorgt background-image mit einem Verlauf.

text-transform:uppercase versetzt die Inschrift des Buttons in Großbuchstaben oder Versalien. Fast immer sind längere Wörter in Großbuchstaben und Fettschnitt besser lesbar, wenn der Abstand zwischen den Buchstaben leicht vergrößert wird.

CSS – Kreise mit border-radius

Wenn border-radius halb so groß ist wie die Breite/Höhe des Bildes, entsteht ein Kreis. Kombinieren wir border-radius mit box-shadow, entstehen Buttons.

.buttonDown, .buttonUp {
    width:100px; height:100px; display:inline-block;
    background: hsl(50,98%,80%);
    border-radius: 50% }
 .buttonDown {box-shadow: 4px 4px 10px hsl(50,90%,30%) inset }
 .buttonUp {box-shadow: 4px 4px 10px hsl(50,90%,30%) }

Abgekantete Ecken mit linear-gradient

CSS gradient bringt ja jeden Tag neue Effekte hervor. Also: abgekantete Ecken (»beveled corners«)

.beveled {
    width: 80%; height: 100px; margin-left: auto; margin-right: auto;
    background:
       linear-gradient(135deg, transparent 10px, hsl(45, 96%, 80%) 0) top left,
       linear-gradient(225deg, transparent 10px, hsl(45, 96%, 80%) 0) top right,
       linear-gradient(315deg, transparent 10px, hsl(45, 96%, 80%) 0) bottom right,
       linear-gradient(45deg,  transparent 10px, hsl(45, 96%, 80%) 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
 }

Mehr zu border-radius und box-shadow

2019-11-16 SITEMAP BLOG