Kategorie: CSS

CSS Shapes Editor für Google Chrome

Mittels CSS-Shapes lassen sich zum Beispiel Bilder besser in den Textfluss integrieren, bzw. man kann selbst festlegen, wie der Text eine Grafik umfließt. Hier ein Beispiel:

Shape1


Im Code sieht das obere Beispiel so aus:

<img src="remote.png" align="left” style="shape-outside: polygon(0px 0px, 180px 16px, 365px 501px, 0px 506px);">

Die CSS-Shape ist als Polygon definiert. Allerdings ist es nicht gerade einfach die Werte von Hand festzulegen und im Code festzulegen. Eine Hilfestellung bietet sich hier in Form eines Google Chrome-Plugins an, dem “CSS Shapes Editor”. 

Nachdem das Plugin installiert ist, klickt man mit rechter Maustaste auf das gewünschte Element und wählt den Menüpunkt “Inspect Element” aus:

Inspect Element

Es öffnen sich die Entwickler-Tools. Durch Klicken auf den >> Button kann man den “Shapes”-Editor auswählen und durch Klick auf das Plus Icon dem Element die gewünschte Shape-Form hinzufügen. Zur Auswahl stehen Kreis, Ellipse und das Polygon:

Entwickler-Tools

Hat man die gewünschte Form hinzugefügt, klickt man auf den Zeiger (Pointer) neben dem Plus. Anschließend kann man die Form im Browser-Fenster bearbeiten.

Form bearbeiten

Änderungen werden direkt sichtbar. Ist das Ergebnis wie man es sich wünscht, kopiert man nur noch den Quelltext heraus. Eine Besonderheit gibt es zu beachten, bei mir hat der Editor nur funktioniert mit Dateien die auf einem Webserver lagen. Mit einer lokalen Datei funktionierte der Editor nicht. Also ggf. die HTML-Dateien einfach schonmal auf den Webspace kopieren.

Ich habe noch ein kleines Video erstellt, welches die Bedienung beschreibt:

Obwohl CSS-Shapes eine super Sache sind, funktionieren diese derzeit nicht in allen Browser. Google Chrome und Opera unterstützen diese. Firefox, Safari und Internet Explorer ignorieren diese bisher. 


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