Fun with Border-Radius – CSS Sprechblasen – CSS3 Adventskalender Tag 23

Am vorletztem Tag des CSS3 Adventskalender will ich nochmal ein paar interessante Einsatzmöglichkeiten von border-radius zeigen. Nicht zuletzt auch durch das Gewinnspiel „Gewinne ein Jahres-Abo des Webstandards Magazin“ hat sich border-radius als das CSS3-Feature herauskristalisiert, auch die Zugriffszahlen zeigen das.

Facebook Modal-Window (Lightbox)

Das Facebook-Modal (oder Lightbox/PopUp Window) dürfte jeder kennen. Nachdem Heiko im Webstandard-Blog gestern im CSS3-Adventskalender das Color-Modul HLSA als RGBA-Alternative vorgestellt hat, kommt heute aber nochmal RGBA zum Einsatz.


Screenshot der Facebook-Lightbox auf der maddesigns Facebook Fanpage

Ein einaches CSS-Modal-Window

Das HTML für unser Lightbox-Fenster:

<div class="block">
  <p>Lorem ipsum ...</p>
  <p>Curabitur consequat...</p>
  <p>Senectus dui l...</p>
  <p>Quis consectetuer ...</p>
  <p class="facebook-modal">Lorem ipsum dolor ...</p>
</div>

In diesem einfachen Beispiel gibt es einen Paragraphen mit der Klasse facebook-modal, die durch CSS position: absolute mittig über den Textblock positioniert wird.

CSS:

.facebook-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -100px;
  width: 300px;
  height: 200px;

  background-color: #fff;
  padding: 15px;
  border: 10px solid rgba(0,0,0,0.5);
  /* halb-transparenter Border durch RGBA-Wert 0.5 */

  -moz-border-radius: 10px;
  border-radius: 10px;

  -moz-background-clip: padding;      /* Firefox 1.0-3.6 */
  -webkit-background-clip: padding-box;  /* Safari, Chrome */
  background-clip: padding-box;  /* Firefox 4.0+, Opera */
}
.block {position: relative}

Der Border-Radius beträgt in dem Beispiel 10px, also genauso viel wie die Starke des Rahmens – so wird nur der Rahmen abgerundet und nicht die Content-Box. Damit die Hintergrundfarbe nicht in den Border ragt, wird zusätzlich noch die Eigenschaft background-clip verwendet.

CSS-Sprechblasen

Ein tolles Experiment mit CSS3 Border-Radius hat Nicolas Gallagher (@necolas) in seinem Blog vorgestellt. Er hat unzählige Varianten von CSS Sprechblasen (Speech Bubbles) kreiert. Zwei Beispiele habe ich mal in der Demo-Datei „Fun with Border-Radius“ übernommen.

CSS3-Badge

Ein schönes Beispiel für den Einsatz von CSS3 kann man auf der Website des diesjährigen SXSW Beercamp sehen. Dort ist auch ein schönes CSS3-Badge, das ich als Beispiel hier mal nutze.

Das HTML-Gerüst:

<div class="css3badge">
  <p>
    <a href="http://webstandard.kulando.de/">
      CSS3 Adventskalender <br />
      Gewinnspiel Tag 24
    </a>
  </p>
</div>

CSS:

.css3badge {
  -moz-border-radius: 140px / 75px;
  border-radius: 140px / 75px;

  -webkit-box-shadow: -8px 4px  rgba(197, 81, 17,.6);
  -moz-box-shadow: -8px 4px  rgba(197, 81, 17,.6);
  box-shadow: -8px 4px  rgba(197, 81, 17,.6);

  -moz-transform: rotate(-14deg);
  -webkit-transform: rotate(-14deg);
  -o-transform: rotate(-14deg);
  transform: rotate(-14deg);

  background-color: rgba(197, 81, 17,1);
  color: #fff;
  height: 100px;
  padding: 20px 0;
  width: 260px;
}
.css3badge p {
  font-family: 'Lobster', Helvetica, Arial, sans-serif;
  font-size: 20px;
  padding: 5px 0 0 50px;
}

.css3badge a {
  color: #fff;
  text-decoration: none;
}

Das Live-Ergebnis:

Wie ihr sehen könnt, gibt es am letzten Tag des CSS3 Adventskalender von maddesigns und dem Webstandard Blog nochmal ein tolles Gewinnspiel für Euch, also morgen nochmal beim CSS3 Adventskalender Gewinnspiel Tag 24 teilnehmen!

Links:

Pure CSS speech bubbles – CSS-Sprechblasen Experiment von Nicolas Gallagher
BEERCAMP – SXSW 2010 Edition
Fun with Border-Radius Demo

One thought on “Fun with Border-Radius – CSS Sprechblasen – CSS3 Adventskalender Tag 23”

  1. Auf meinem Blog habe ich runde Ecken, Transparenzeffekte, Farbverläufe, Schatten und CSS3-Buttons realisiert. Eine wahre Freude! Für den IE mache ich mir keine Mühe. Da gibts nur eine ganz einfache Fallback-Lösung und einen Hinweis, doch bitte den Browser zu wechseln. Ja, ja – professionelle Webdesigner haben es schon nicht leicht, wenn sie dafür sorgen müssen, dass es in allen wichtigen Browsern gleich aussehen soll. Da kann man wohl erstmal so tolle Sachen mit CSS 3 vergessen. Ein Glück, dass ich kein professioneller Webdesigner bin. ;-)

Kommentare sind geschlossen.