scrollleiste.de

Artikel mit dem Schlagwort "css"

Links der Woche 41

12 New Rules of Working You Should Embrace Today
So arbeitet der emanzipierte Arbeitnehmer oder Freelancer heute. Passt irgendwie zur digitalen Bohème von Sascha Lobo.
50 Stunning Examples of the Droste Effect
Der Droste Effekt ist eine spezielle Form des rekursiven Bildes. Also nicht nur das Bild im Bild des Bildes. Sondern dazu noch noch miteinander verdreht und verwoben. Irgendwie. Interessant.
54 Humorvolle Und Ausgefallene Werbideen Perfekt In Szene Gesetzt!
Wirklich witzige Werbeideen. Wer davon noch mehr sehen möchte sollte sich unbedingt das Buch Advertising Now! Print kaufen. Inspirativ und immer wieder lustig zu blättern.
CSS Decorative Gallery
Bilder und Bildergalerien mit CSS und jQuery optisch aufwerten. Rahmen, Titel, Popups, Klebestreifen, Pins. Alles ist machbar, sieht gut aus und hält das Markup sauber.
Warum Webdesign nicht 700€ kostet
“Ihre Webseite um 189€!” zum Beispiel. Wieso das unrealistisch ist und qualitativ so nicht funktionieren kann.
Gute Bücher für kein Geld: drei auf einen Streich
Terrashop verschenkt wieder ein Buch für € 0,-. Lediglich 3,95 Versandkosten sind für das Buch “Bilder drucken” von Christoph Kühne (Addison-Wesley Verlag) zu berappen.
earBuddy
Mit diesem Schlüsselanhänger hat man die iPod- oder iPhone-Kopfhörer absofort immer dabei.

Links der Woche 29

Letterbox beta 4 for Snow Leopard
Das Plugin “Letterbox” für das Mac-Programm “Mail” gibt’s jetzt auch für Snow Leopard. Damit lassen sich die Mailvorschau rechts anzeigen und Zeilen zebramäßig einfärben.
40 Extremely Impressive Examples of Photo Manipulation
Diese 40 Photoshop-Bildmontagen sind wirklich spektakulär.
Personas | Metropath(ologies)
Das MIT-Projekt ist eine Personen-Suchmaschine, die zeigt wie einen das Web sieht.
Browser Sandbox – Run any browser from the web
Beliebigen Windows-Browser direkt aus dem Browser ausführen. Nur unter Windows und nur mittels Browser-Plugin.
Using CSS to Fix Anything: 20+ Common Bugs and Fixes
20 typische Browser- oder Darstellungsfehler im Webdesign und ihre CSS-Lösung kurz, knackig und visuell erklärt.
SQL Buddy – Web based MySQL administration
Webbasierte MySQL-Datenbank-Verwaltung, die phpMyAdmin vor allem mit der schönen und einfachen Oberfläche Konkurrenz macht.
Feng-GUI – Feng Shui for Graphic User Interfaces
Dieser Usability-Dienst versucht Eye-Tracking-Heatmaps softwareseitig zu simulieren. Die Brauchbarkeit der Ergebnisse darf angezweifelt werden.

CSS-Spaltentechnik mit YAML

Geübte Webdesigner schütteln ein-, zwei- oder gar dreispaltige CSS-Layouts oft noch aus dem Ärmel. Einfache “Fixed Width”-Layouts, also Layouts mit fester Breite, lassen sich für alle gängigen Browser relativ einfach umsetzen, wenn man die Tücken um die Browserbugs und typische Problemstellungen kennt. Der bekannte Box-Modell-Fehler des Internet Explorer gilt hier als Paradebeispiel. Weiterlesen »

Default-Stylesheet für HTML

Wenn Sie sich beim Umsetzen von Websites per CSS schon öfter gefragt haben, welche default-CSS-Angaben bestimmte Elemente eigentlich haben, dann finden Sie im Appendix D der W3C-Spezifiktion von CSS 2.1 Antwort.

Dies ist inbesondere dann interessant, wenn Sie Formatierungseigenschaften eines Elementes entfernen möchten. Denken wir an die Verwendung einer unsortierten Liste <ul> als Menüpunktaufzählung. Wenn Sie die einzelnen Punkte horizontal nebeneinander, ohne Aufzählungszeichen und ohne Außen- oder Innenabstand darstellen möchten, können Sie im genannten Anhang nachsehen, welche CSS-Eigenschaften Sie dazu überschreiben müssen.

Beachten Sie jedoch, dass nicht jeder Webbrowser sich an die Vorgaben der vom W3C veröffentlichten Recommendation hält. Dies können Sie insbesondere dann feststellen, wenn Sie das Stylesheet Ihrer Website einmal völlig ausschalten und die Darstellung des reinen Markups in den verschiedenen Browsern vergleichen.

Für Webdesigner ist diese Seite auf jeden Fall ein Bookmark wert.

Silbentrennung in HTML

Hyphenator ist ein Google Code Projekt, das per JavaScript eine Silbentrennung in die eigene Website bringt. Einfach API in die Seite einfügen und Silbentrennung starten:

[code language="html"]
<script src="http://hyphenator.googlecode.com/svn/trunk/Hyphenator.js" type="text/javascript">
</script>

<script type="text/javascript">
Hyphenator.run();
</script>
[/code]

Jetzt muss man nur noch den Elementen der Seite, auf die die Silbentrennung angewendet werden soll, die CSS-Klasse class="hyphenate" zuweisen. Explizit verhindern lässt sich die Trennung per class="donthyphenate".

Weiterlesen »

Verläufe im Text mit CSS

Web 2.0 Verläufe im Text per CSS – ohne Flash oder eingebettes Bild unmöglich?

Verlauf im Text per CSS

Nicht mit Hilfe dieses CSS-Tricks: Das Geheimnis ist in den Tag um den Text, z.B. <H1> am Anfang einen weiteren <span>-Tag einzufügen: Weiterlesen »

IE Bugs denen man ständig begegnet

Die Website “CSS Trick” listet in einem interessanten Beitrag typische CSS-Bugs des Internet Explorers auf, mit denen man sich als Webdesigner leider ständig konfrontiert sieht. Für ein Nachschlagewerk wohl zu wenig ausführlich, aber um sich die Bugs einmalig anzusehen und diese zu verstehen lesenswert. Zumal CSS Tricks gleich Links zu den entsprechenden Lösungen mit anbietet.

Wenn einem diese leidigen Fehler des Internet Explorers bewusst sind, erspart man sich bei der Umsetzung von Designs in Markup und CSS viel Zeit:

  • Der Box Model Fehler
  • Der doppelte Rand Fehler
  • Keine Mindest-Breite bzw. Mindest-Höhe
  • Vertikaler Versatz bei Floats
  • Keine Hover-Effekte bei “Nicht-Links”
  • PNGs ohne Alpha-Transparenz

Anzeigen