Bootstrap – Sebastians Blog https://sgaul.de Neues aus den Softwareminen Wed, 19 Jun 2019 07:55:04 +0000 de-DE hourly 1 https://wordpress.org/?v=6.1.7 https://sgaul.de/wp-content/uploads/2019/02/cropped-sgaul-2-1-32x32.jpg Bootstrap – Sebastians Blog https://sgaul.de 32 32 Freie, skalierende Icons für die Website https://sgaul.de/2012/03/07/freie-skalierende-icons-fur-die-website/ Wed, 07 Mar 2012 17:07:30 +0000 https://sgaul.de/?p=1061 Freie, skalierende Icons für die Website weiterlesen]]> Bin gerade bei Webdesign-Shock auf diesen Tipp gestoßen: Das Projekt „Font Awesome“ bietet mehr als 150 einfache, schicke Icons, die frei auch auf kommerziellen Websites verwendet werden können. Das Gute dabei: Da sie auf einer Schriftart basieren, skalieren die Bildchen beliebig mit. Für die einfache Verwendung steht bereits eine CSS-Datei bereit, die sich auch in Twitters Bootstrap integriert.

Beispiele des Font-Awesome-Projekts

Die verwendete Lizenz ist die „Attribution 3.0 Unported (CC BY 3.0)“, welche nur die Namensnennung fordert.

Links

Quelle Screenshot und Artikelbild: Beispiele von Font Awesome

]]> Moderne Pfeile mit CSS https://sgaul.de/2012/01/09/moderne-pfeile-mit-css/ https://sgaul.de/2012/01/09/moderne-pfeile-mit-css/#comments Mon, 09 Jan 2012 15:32:31 +0000 https://sgaul.de/?p=912 Eigentlich gibt es in HTML genug Möglichkeiten, einen Pfeil zu realisieren. Der ↓ (↓) sollte in allen relevanten Browsern als solcher angezeigt werden. Dennoch wird er kaum genutzt. Vielleicht auch einfach deshalb, weil er nach dem momentanen Empfinden der meisten Webdesigner doch etwas altbacken aussieht. Es gibt aber auch eine Möglichkeit, mit CSS einen einfachen Pfeil in Dreiecksform umzusetzen, der sich vielleicht besser in moderne Designs einfügt.

Sehen kann man ein solches Beispiel etwa beim Framework „Bootstrap“ von Twitter:

Kleiner Dreieckspfeil ohne Bild: http://twitter.github.com/bootstrap/#navigation

Wie diese Pfeile erstellt werden, lässt sich auch mit Firebug und Co. nur schwer herausfinden, da man mit solchen Seiteneffekten kaum rechnet. Man macht sich hier zu nutze, wie die Browser die Border-Eigenschaft von CSS umsetzen.

Testbox

Man sieht im Beispiel, wie an den Farbübergängen des Rahmens Querlinien entstehen. Betrachten wir den roten Teil des Rahmens: Machen wir den grünen und blauen Teil transparent, erhalten wir ein aufgestelltes, rotes Trapez.

Testbox

Entfernen wir dann den Text und reduzieren die Höhe auf ein Minimum, wird dieses Trapez dann zum Dreieck:

 

Nur der linke Rahmen hat nun eine Farbe, in der Folge entsteht ein Dreieck, welches nach rechts zeigt.

Ich habe folgende CSS-Klassen entworfen, mit der man Pfeile nach oben, unten, links und rechts mittels class="arrow up", class="arrow down" usw. setzen kann. Man kann das ganze natürlich anders, vermutlich auch kürzer realisieren. Mir ging es aber darum, die relevanten Einstellungen Pfeilfarbe (= border-color) und Größe (= border-width) nur einmal vornehmen zu müssen. So muss man für eine kleine Änderung nicht erst 20 Zeilen Code durchsuchen.

<!DOCTYPE html>
<html lang="en">

<meta charset="utf-8">
<title>CSS Arrows</title>

<style type="text/css">
.arrow {
	border: 5px solid #444;
	font-size:0;line-height:0;height:0;padding:0;margin:0;
}
.arrow.down {
	border-right-color:  transparent;
	border-bottom-color: transparent;
	border-left-color:   transparent;
}
.arrow.up {
	border-top-color:    transparent;
	border-right-color:  transparent;
	border-left-color:   transparent;
}
.arrow.left {
	border-top-color:    transparent;
	border-bottom-color: transparent;
	border-left-color:   transparent;
}
.arrow.right {
	border-top-color:    transparent;
	border-right-color:  transparent;
	border-bottom-color: transparent;
}
</style>

<p><span class="arrow down"></span></p>
<p><span class="arrow up"></span></p>
<p><span class="arrow left"></span></p>
<p><span class="arrow right"></span></p>

</html>

Schöne, neue HTML-5-Welt: Kein Head, kein Body, alles valide.

Im Browser sollte das ganze dann in etwa so aussehen:

Vielen dank an Denis Potschien, der mich mit seinem T3N-Artikel „CSS3: Individuelle Tooltips ohne JavaScript“ auf diese Idee gebracht hat.

]]> https://sgaul.de/2012/01/09/moderne-pfeile-mit-css/feed/ 4