Schlagwort: CSS

Unused-CSS.com – Unnötigen CSS Ballast entfernen

Wenn die Webseite über lange Zeit gepflegt und erweitert wird, sammelt sich naturgemäß immer etwas Ballast im Quelltext an. Unter anderem in den CSS-Dateien. Hier finden sich dann Elemente die nirgends auf der Webseite mehr verwendet werden. Code der nicht mehr verwendet wird trägt nur noch zur Verlängerung der Ladezeit bei.

Vor kurzem bin ich auf die Webseite www.unused-CSS.com gestoßen. Hier trägt man einfach die URL seiner HTML-Seite ein und nach kurzer Analysezeit wird eine Auswertung präsentiert und die unbenutzten CSS-Elemente dargestellt:


Unused-CSS

Die Basisversion des Dienstes ist kostenlos. Gegen Geld kann man seine gesamte Webseite analysieren lassen und bekommt die gesäuberten CSS-Dateien zugeschickt. In der kostenlosen Variante ist der Dienst leider etwas zu sehr eingeschränkt, so wird maximal eine HTML-Seite untersucht. Zumindest interessant, für den schnellen Überblick. 


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. 


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!


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. 


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


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:


Fotos und Bilder als Polaroid darstellen

Mit Hilfe von CSS3 und jQuery können Sie Ihre Fotosammlung in effektvoller Weise als Polaroid darstellen lassen. Das hier vorgestellte Beispiel mischt die einzelnen Polaroids beim Start der Seite nach einem Zufallsprinzip und stellt diese ungeordnet auf dem Bildschirm dar. Zum Anschauen der Bilder holt man sich diese durch Anklicken in den Vordergrund. Außerdem lassen sich alle Bilder zu einer anderen Position verschieben. Einfach das nachfolgende Video anschauen, um die beschrieben Funktionen zu sehen.

Video zur Polaroid-Darstellung

Nutzen Sie die folgenden Buttons um das Beispiel genauer anzusehen und zu testen oder um das Beispiel herunterzuladen. Mit dem in Download enthalten Dateien können Sie Ihre eigene Polaroid-Seite erstellen.

btnBsp btnDownload

Nun noch ein paar Innereien zu diesem Script zum besseren Verständnis und zur Variation bestimmter Parameter:

HTML-Datei (index.html)

Innerhalb des body-Tags werden die einzelnen Bilder über das <img>-Tag eingefügt, wobei src den Pfad zum Bild enthält. Innerhalb von <p> schreiben wir den Text, der auf dem Polaroid stehen soll. Das Ganze wird dann von einem <div>-Container eingeschlossen, welcher der Klasse polaroid zugeordnet wird. Es können beliebig viele Bilder in dieser Form hinzugefügt werden.

<body>
<div class="polaroid">
  <img src="pics/Schwan_Wald_See.png" alt="Schwan im Waldsee" />
  <p>Schwan im Waldsee</p>
</div>
<!-- Mehr Bilder hier -->
</body>

CSS-Datei (style.css)

Unserem <div>-Container hatten wir oben die Klasse polaroid zugeordnet. Hier werden nun die einzelnen Attribute festgelegt, die das Erscheinungsbild bestimmen.

In der ersten Zeile legen Sie Höhe und Breite des Container als absolute Werte fest sowie den Pfad zu dem Hintergrundbild. Das Hintergrundbild ist in diesem Fall die “Polaroid-Maske”.  Deshalb müssen Höhe und Breite der Größe der Polaroid-Maske entsprechen. Sie können das Polaroid-Bild auch beliebig austauschen gegen z.B. ein andersfarbiges Polaroid oder wenn eine andere Größe benötigt wird.  Erstellen lässt sich eine neue Polaroid-Maske unter anderem mit DA-WebImage.

.polaroid { width:368px; height:376px; background-image:url(../pics/polaroid-bg.png); 
position:absolute; }

In der zweiten Zeile ist die Größe der einzelnen Fotos definiert. Es ist zu beachten, dass alle Fotos dieselbe Größe habe. Weiterhin wird mit margin der Abstand von den Rändern so festgelegt, dass das Bild genau in die Polaroid-Maske passt.

.polaroid img { width:335px; height:275px; margin:25px 0 0 15px; }

In der dritten Zeile legen wir die Eigenschaften, wie Ausrichtung, Schriftfarbe, Schriftart, etc. zum Schriftzug unterhalb des Polaroids fest.

.polaroid p { text-align:center; font-family:Georgia,serif; font-size:20px; color:#2E2E2E;

margin-top:15px; }

jQuery (script.js)

Die Script-Datei stammt von Marco Kuiper und kann dem Download entnommen werden. Hier sind die einzelnen Funktionen enthalten, welche die Animationen, wie das Rotieren und Verschieben der Polaroids bewerkstelligen. Auf eine ausführliche Beschreibung der einzelnen Funktionen verzichte ich an dieser Stelle. Der interessierte  Programmierer kann sich die Funktionen in einem entsprechenden Editor; Texteditor ist ausreichend; anschauen.

Zusammenfassung

Es sei noch gesagt, dass CSS3 und HTML5 derzeit noch nicht in allen Browsern vollständig implementiert sind. So kann es beim Beispiel zu unterschiedlichen Darstellungen bei unterschiedlichen Browsern kommen. Das aufgenommene Video zeigt die Anwendung in Chrome. Dort funktioniert alles super. Aber im Mozilla Firefox funktionierte zum Beispiel die Rotation der Bilder nicht.

btnBsp btnDownload


Externe Links mit Icon versehen

Auf einer Webseite gibt es viele Links. Für den Benutzer der Webseite ist es eine super Sache zu erkennen ob der Link auf eine interne Seite oder auf eine externe Seite verlinkt.

Externe Links, welche von der Webseite wegführen können mittels CSS einfach mit einem Icon versehen werden.

Der Benutzer sieht so auf den ersten Blick wohin der Link in etwa geht. Das ganze sieht so aus:

Weiterlesen


CSS: Mit float geschickt Textblöcke oder Bilder positionieren

Erstellt man eine HTML-Seite mit verschiedenen Textblöcken und Bildern, so werden diese erst einmal im standardmäßigem Fluss von links nach recht und von oben nach unten angeordnet. Mittels CSS und der float-Eigenschaft lassen sich Blöcke an eine bestimmte Position ausrichten. Blöcke können in diesem Fall die verschiedensten HTML-Elemente, wie <img>, <div>, <table> und ähnliche sein.

Verwenden wir den folgenden HTML-Code ohne CSS-Definitionen, so werden die Elemente im standardmäßigem Fluss ausgerichtet, wie im darauffolgenden Bild dargestellt:

<img height="176" src="BspBild.JPG" width="132" />
Hier sehen Sie einen Beispieltext wenn ....