Codeschnipsel 71: Infoboxen

Info-Box - mit Hintergrundfarbe, abgerundeten Ecken und Schatten

Infobox-Einbauhinweis für Benutzer anderer CMS

Weitere Infoboxen in dieser Website (BaBox)

Infobox mit Eselsohr oben rechts (Beispiel: Suchmaschinen-Eigenheiten-Seite)

Die Infoboxen in der linken Spalte der Seite Suchmaschinen-Eigenheiten (und auf anderen Seiten) haben die Klasse  notizS .
Die Klasse ist im Projekt-CSS, Ausbaustufe links   definiert.
Merkmale:
- Schatten links und unten,
- abgeknicktes oberes rechtes Eck (ein Eselsohr),
- Rest wie die unten folgende Infobox  backgroundGreyShadow .

CSS:
<style type="text/css">            /*   Zeile entfällt im Projekt-CSS */
/* Notizbox mit Schatten und Eck ==================== */
.notizS {
    background:   none repeat scroll 0 0 #F2F5F8;
    overflow:     hidden;
    padding:      18px 10px;
    box-shadow:   -1px 1px 1px #AFAFAF;      /* Schatten links und unten */
    position:     relative;
    width:        88%;             /* Breitenreduktion wg. Innenabstands */
  }
.notizS:before {                                        /* das Eselsohr */
    background:   none repeat scroll 0 0 #F2F5F8;
    border-color: #FFFFFF #FFFFFF #ADBAC7 #ADBAC7;     /* Farbe des Ecks */
    border-style: solid;
    border-width: 0 15px 15px 0;                  /* das Eck oben rechts */
    box-shadow:   0 1px 1px #666666, -1px 1px 1px #999999;   /* Schatten */
    content:      "";
    display:      block;
    position:     absolute;                   /* absolute Positionierung */
    right:        0;                                  /* Position rechts */
    top:          0;                                    /* Position oben */
    width:        0;
  }
</style>                            /*   Zeile entfällt im Projekt-CSS */

Quelle: Pure CC folded-corner effect
Beispiel: linke Spalte in Seite Suchmaschinen-Eigenheiten
Demonstration: in diesem Absatz

Lea Verou hat faszinierende alternative Lösungen publiziert:
Simple folded corner (Kommentare beachten)
Folded corners - a pen by Lea Verou
Passend hierzu auch:
Beveled corners and negative border radius with CSS3 gradients

zurück   |   nach oben

Infobox mit innerem Schatten 'inset' (Beispiel: Video-Seiten)

Die Infoboxen in der linken Spalte der Video-Seiten haben die Klasse  infoBoxS2  zugeordnet.
Merkmale: Aussenschatten 2px ohne Versatz, Innenschatten 6px.
Die Klasse ist im Projekt-CSS Ausbaustufe links   definiert. CSS-Code:

<style type="text/css">  /*   Zeile entfällt im Projekt-CSS */
.infoBoxS2 {
  padding:        12px 12px 8px 12px;
  width:          86%;
  border:         1px solid #AFAFAF;
  border-radius:  4px;
  box-shadow:     0 0 2px #ADBAC7, 0 0 6px #CAD2DB inset;
  }
</style>                 /*   Zeile entfällt im Projekt-CSS */

Beispiel: linke Spalte in Videos
Demonstration: in diesem Absatz

zurück   |   nach oben

Infobox mit Schatten rechts und unten (Beispiel: Weblica-Seite)

Infobox mit schmalem Schatten nur unten (Beispiel: Weblica-Websites-Seite)

Info-Box - aufklappbar (nur mit CSS und HTML, mit Mouseover-Effekt)

1. HTML-Code im Head der Seite (HTML-Id-Element) [auch möglich: im Seitenabsatz  ]:

<style type="text/css">
#box {}
#box a {
  color: #ffffff;
  text-align: center;
  background: #0E3F8D;
  text-decoration: none;
  display: block;
  width: 150px;
  padding: 5px;
  border: 1px solid black;}
#box a:hover {
  color: black;
  background: #B0C4DE;
  width: 400px;}
#box a span {display:none;}
#box a:hover span {
  position: relative;
  z-index: 3;
  display: block;
  font-size: 80%;
  color: black;
  background: #ffffff;
  border: 1px solid black;
  padding: 10px;}
</style>

2. HTML-Code im Seitenabsatz (Absatz vom Typ HTML):

<style type="text/css">
#box a:hover  {
  width: 600px; }
</style>
<div id="box"><a><b>Neuigkeiten</b><span>Diese Infobox ist ausschliesslich mit HTML und CSS implementiert.<br />
Javascript wird nicht benötigt.<br />
Zu beachten: box ist ein Id-Element und darf auf einer Seite nur einmal vorkommen.<br />
... ...
</span></a></div>

Anpassungen je nach Bedarf und Geschmack

Quelle, u. a.: SelfHTML-Wiki Infobox
zur Schichtpositionierung mit z-index siehe hier: SelfHTML-Wiki z-index
Anwendungsbeispiel:

zurück   |   nach oben

Info-Box von Ingo Turski (mit Mouseover-Effekt)

Ingo Turskis Infobox Infobox:
Noch eine Infobox, gänzlich ohne Javascript.
Es lohnt sich, bei Ingo Turski zu stöbern.

zurück   |   nach oben