humans.txt

Humans txt

Ist keine Erfindung von mir. Sondern ein Projekt, um die Menschen hinter einer Webseite kennen zu lernen. Hier die Projektseite von humans.txt

Team

Chef: Rocco Wernicke
Contact: r.wernicke-schleswig[at]email.de
From: Deutschland

Site

Last update: 2015/03/10
Language: Deutsch
Doctype: HTML5
TECHNOLOGY: Html5, Css3, jQuery, Modernizr
IDE & Software: Sublime Text, Notepad++, Netbeans, PhpStorm, FileZilla, Gimp
 
Ansicht
Sie befinden sich definitiv hier: [ zur Startseite ]Pages » Tutorial »

Sidebar Open Mediaquerie anzeigen

Css-Tooltip

Tooltips kennen wir alle. Sie sind ein beliebtes Mittel um unseren Usern schnell ein paar Informationen zu kommen zu lassen. Das Html-Attribut title bittet eine einfache Möglichkeit, zum Beispiel Links mit Hilfstexten zu versehen. Der Nachteil an diesen Attribut ist der, dass es kaum Gestaltungsoptionen gibt. In den meisten Fällen ist man auf die Standareinstellung des Browsers angewiesen.

Eine weiter Alternative bitten JavaScript-Lösungen.

Wir versuchen hier einmal eine einfach Css-Lösung zu finden. Zuerst das Html-Gerüst.


  Tooltip-Demo
    
      Donec pede justo, fringilla vel, aliquet...
    

    

Css-Style

.tooltip{
  position: relative;
  background: rgb(255, 218, 185);
}

.tooltip .txt{
  display: none;
}

.tooltip .txt:before{
  content: url(test.png);
  float: left;
  padding-right: 0.4em;
}

.tooltip:hover .txt{
  display: block;
  position: absolute;
  z-index: 10;
  top: 1.3em;
  left: 1.6em;
  width: 40em;
  font-family: Helvetica, Arial, sans-serif;
  font-size: smaller;
  color: #eee;
  background: rgb(50, 50, 50);
  background: rgba(30,30,30,0.8);
  border: 1px solid rgb(50, 50, 50);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 3px 3px 3px rgb(20, 20, 20);
  -moz-box-shadow: 3px 3px 3px rgb(20, 20, 20);
  box-shadow: 3px 3px 3px rgb(20, 20, 20);
}
    

Ergebnis

Unser Tooltip.

Example