Kategorie: CSS

Syntax Highlighting mit highlight.js

Wer ab und zu mal Codesnippets auf seiner Homepage einbinden will, kann sich mal highlight.js anschauen. Die Kombination aus JavaScript- und CSS-Bibliothek erlaubt ein sehr einfaches Syntaxhighlighting von Code in Webseiten.

63 verschiedene Sprachen werden laut Webseite derzeit unterstützt.


Im Gegensatz zu anderen Tools, wie z.B. www.toHTML.com, wird der eigentliche Quelltext nicht verändert und hart mit HTML formatiert.

Um highlight.js zu verwenden, lädt man es entweder von der Homepage herunter und bindet die Dateien in die Homepage ein oder verwendet die gehostete Version. In diesem Fall ist es mit dem Einfügen von folgendem HTML-Code in den “head” der HTML-Datei getan:

<link rel="stylesheet" href="http://yandex.st/highlightjs/7.4/styles/default.min.css">
<script src="http://yandex.st/highlightjs/7.4/highlight.min.js"></script>

Der eigentliche Quelltext wird nun mittels “pre” und “code” Tag eingebunden:

Code

Wie man sieht wird der Quelltext nicht mit HTML-Tags verändert. Dies erleichtert spätere Änderungen ungemein und das Design kann jederzeit gewechselt werden.

Das Ergebnis sieht dann z.B. so aus:

Highlight

Wer etwas mehr Farben haben will, verschiedene Themes stehen auf der highlight.js Webseite zur Verfügung. Einfach einbinden, fertig:

Highlight2


CSS – Elemente mit Schatten versehen

Die Zeiten in denen man Elemente mit irgendwelchen Tricks mit einem Schatten versehen konnte, sind zum Glück weitestgehend vorbei. Zumindest sofern der Browser CSS3
unterstützt.

Will man eine HTML-Element, z.B. ein DIV mit einem Schatten versehen, kann man dies recht leicht mittels CSS realisieren:

box-shadow:3px 3px 3px #a8a8a8;

Kurze Erkärung, die ersten beiden Werte geben den Abstand in X und Y Richtung wieder, der dritte Wert den “Blur” Radius und zuletzt die Farbe des Schattens:

Schatten

Wer etwas mit den Einstellungen herumspielt entdeckt schnell neue Möglichkeiten, z.B. statt einem Schatten einen Glow-Effect:

box-shadow:0px 0px 10px #ec0707;

Rotes Glühen

Auch mehrere Schatten lassen sich kombinieren:


box-shadow: 8px 8px 8px green,
        -8px 8px 8px red,         
        8px -8px 8px blue,
        -8px -8px 8px black;

Mehrere Schatten

Soll der Schatten innen und nicht außen sein, auch kein Problem:

box-shadow: inset 3px 3px 3px #a8a8a8;

Schatten Innen

Viel Spaß beim Experimentieren!


HTML: Alle Formularfelder sollen die gleiche Breite haben

Aus einer aktuellen Supportanfrage, im HTML-Formular die gleiche Breite haben. Konkret geht es natürlich um ein DA-FormMaker Formular, aber dies lässt sich prinzipiell natürlich bei Formularen aus jeder anderen Software anwenden.

Lösen lässt sich das mit etwas CSS, welches wir im Head der HTML-Datei definieren:

Same width 1

Wie man sieht genügt es nicht, einfach die Breite zu definieren, man muss explizit “border” und “padding” auf die gleichen Werte bringen.

Hier sieht man auch gleich das grundsätzliche Problem. Textareas und Input-Felder lassen sich recht leicht auf die gleiche Breite bringen. Hat man Auswahlfelder wird es schwieriger. Hier werden je nach Browser die Bedienelemente, z.B. Scrollbar vom Betriebssystem übernommen, dann haut es mit der Breite nicht immer hin. Hier hilft nur ausprobieren und natürlich testen in verschiedenen Browsern.


In dem Beispiel sieht man, dass die Breite vom “select” etwas größer ist.

So sieht das ganze dann aus:

Same size2

Download der Beispieldatei hier.


Tooltips mit Hint.css

Eine kleine feine CSS-Bibliothek: hint.css. Nachdem das Stylesheet eingebunden ist, kann man Elemente seiner Webseite sehr leicht mit Tooltips ausstatten, welche erscheinen, wenn man mit der Maus über dem Element ist:

Hint CSS

Das Einbinden im Code geht sehr einfach, Beispiel:

<a href="javascript:void(0)" class="hint--top" data-hint="Yeah, I am >:D">Look, there is something over me.</a>

Mehr Beispiele gibt es auf der Webseite. Es gibt verschiedene Arten von Tooltips, zum Beispiel für Warnungen oder Fehlermeldungen. 


CSS 3.0 Maker

Wer mal ein wenig mit CSS herumspielen will, sollte sich die Webseite http://www.css3maker.com/ancshauen:

image

Man wählt einfach die gewünschte CSS Option aus, spielt ein wenig an den Einstellungen und kann das Resultat direkt anschauen. Sowohl in Code als auch als Live-Ansicht. Außerdem wird zu jedem Effekt die Browserkompatibilität angezeigt (Desktop und mobile Browser).


Acko.net–3d Webdesign

Heute nur ein kleiner Linktipp, der zeigt, was mit modernen Browsern und Webdesign (und ordentlich Know-How) alles so möglich ist. Ohne Flash wohlgemerkt: http://acko.net

Einfach die Seite besuchen und nach unten scrollen, dann sieht man den 3D Effekt. Ich habe das Ganze mit Google Chrome getestet. Ob es auf anderen Browsern auch funktioniert, müsst ihr ausprobieren.

image

Die technischen Hintergründe werden hier etwas genauer erklärt. Das ganze geht sogar so weit, dass der Programmierer der Webseite gleich noch einen Editor zusammengehackt hat, mit dem ihr das Aussehen der Webseite in einem 3d Editor bearbeiten könnt:

image


CSS-Code online testen mit CSS-Desk

Wer ab und zu mal CSS-Code erstellen und testen muss, kann sich mal das Online-Tool www.cssdesk.com anschauen. Einfach HTML-Code eingeben, im unteren Bereich den CSS-Code.

Jede Änderung wird sofort in der Vorschau rechts dargestellt. Praktische Sache.

Selbst wenn man den Browser schließt und später die Seite wieder ansurft, ist der Code noch da. Man sich auch einen Permanentlink erstellen lassen und so anderen den Code zusenden. Ideal, wenn man zusammen am CSS-Code arbeiten will.

Ist man fertig, kann man das Ganze als HTML-Datei herunterladen. Oder man kopiert einfach den Code.

image


Linktipp: CSS 3 im Einsatz

Heute mal ein kleiner Link-Tipp. Eine Vorstellung von CSS 3 und die neuen Möglichkeiten die sich damit ergeben. Einfach unten auf den Link klicken oder auf das Bild.

Viele grafische Effekte die man früher nur mit Grafiken und viel Gefummel hinbekommen hat, gehen jetzt über ein wenig CSS-Code.

Noch unterstützen nicht alle Browser alle Funktionen von CSS3. Negativ hebt sich mal wieder der Internet Explorer hervor, aber in der nächsten Version wird vieles unterstützt. Eine Übersicht der Browserunterstützung gibt es hier.

image

Hier klicken!


DIV Element mit 100% Höhe erstellen

Ab und zu will man ein DIV-Element, welches die gesamte Browserhöhe einnimmt. Z.B. für eine Startseite, wo ein Logo zentriert erscheint. Hier ist der Code mit dem das möglich ist:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>DIV 100% Höhe</title>
 
    <style type="text/css">
      html, body { height: 100%; }
 
      div#outerdiv {
        width:800px;
        height: auto !important;
        height: 100%;
        min-height: 100%;
        background-color: #E3EEB9;
        text-align:center;
        margin:0 auto;
      }
    </style>
  </head> 
  <body>
    <div id="outerdiv">
      <img src="http://andy.ekiwi.de/wp-content/uploads/2011/11/DSCN2723.jpg">
      <p>Willkommen auf unserer Homepage</p>
    </div>
  </body>
</html>

So sieht das ganze dann aus:

image


Animationen mit animate.css

Mit CSS und Java-Script sind ja mittlerweile coole Sachen möglich, für die man früher Flash brauchte. Wegen mir kann Flash komplett aus dem Internet verschwinden.

Am Besten nutzt man eine fertig programmierte Komponente. Wie zum Beispiel animate.css. Demo und Download unter daneden.me/animate/

Hier eine Demonstration als Video: