blog.der-link.de - CSS

Floattutorial

nospam@example.com (SteBu) — Fri, 05 Oct 2007 08:56:48 +0200

Auf maxdesign gibt es ein umfangreiches, sehr gutes Floattutorial. Behandelt wird u.a.

Floating an image and caption
Floating an image thumbnail gallery
Liquid three column layout

Das ist auf jeden Fall ein Bookmark wert.

Stillos

nospam@example.com (SteBu) — Tue, 02 Jan 2007 13:19:30 +0100

Durch einen Kommentar zu einem Blogeintrag angeregt(Quelle habe ich leider nicht mehr), habe ich mich heute mal auf die Suche gemacht. Und wurde fündig.
Einer der größten Skandale in der Geschichte der Blogs. Ja richtig gelesen. Mit den richtigen Werkzeugen bin ich dahinter gekommen, dass fast alle Blogs Plagiate sind. Da wird versucht, mit obskuren Methoden das Offensichtliche zu verschleiern. Und das zieht sich durch alle Schichten von Blogs, wie man bei den Screenshots sehen kann.
Ich ahne, das zieht noch weite Kreise.
Die Screenshots habe ich, zur besseren Anschaulichkeit, mit einer weiteren Spezialsoftware gemacht.

CSS-Based Forms: Modern Solutions

nospam@example.com (SteBu) — Mon, 13 Nov 2006 08:41:23 +0100

Das Smashing Magazine hat eine feine Zusammenstellung moderner Webformulare. Alle CSS-basiert und einige noch mit Ajax aufgebohrt. Da lohnt sich ein Bookmark.

IE-Dev-Toolbar

nospam@example.com (SteBu) — Tue, 26 Sep 2006 12:09:09 +0200

Beim Firefox schon lange Standard(die Web-Developer Toolbar) gibt es für den IE-geplagten* Webentwickler nun auch die Internet Explorer Developer Toolbar.
Wenn ich mir Microsofts Produktbeschreibung durchlese, leistet sie ähnliches wie das FF-Pendant.

*in einigen Unternehmen soll es sowas tatsächlich geben

Opacity mit CSS

nospam@example.com (SteBu) — Tue, 19 Sep 2006 13:18:48 +0200

Auf Mandarin Design gibt es ein sehr ausführliches, 3-seitiges Tutorial zum Thema Opacity mit CSS.

Behandelt werden auch komplexere Situationen als Transparenz von einfachem Text. Unter anderem Hovereffekte für Bilder oder auch einfache Farbfilter für Bilder.

CSS Table Gallery

nospam@example.com (SteBu) — Thu, 31 Aug 2006 09:38:32 +0200

76 verschiedene Designs, für ein und die selbe Tabelle gibt es bei der CSS Table Gallery. ~~Und das wichtigste dabei, es kommt keine html-Tabelle zum Einsatz~~. Alles wird mittels CSS gestylet.

CSS Hacks, eine Übersicht

nospam@example.com (SteBu) — Wed, 07 Jun 2006 15:49:41 +0200

Auf CENTRICLE.COM gibt es eine schöne Übersicht, welcher Browser, auf welchem System, mit den versch. CSS Hacks umgehen kann.
Ist nicht neu, aber in einem Format, welches das Ausdrucken ermöglicht und danach sogar noch lesbar ist.

cssgalaxy.com

nospam@example.com (SteBu) — Wed, 07 Jun 2006 12:17:24 +0200

cssgalaxy.com(ebenfalls eine Beta) ist einen Besuch wert, wenn man, designtechnisch schöne, Webseiten sehen und bewerten will. Auch der Blick auf die CSS World Tour lohnt.

Rounded Corner Generator

nospam@example.com (SteBu) — Wed, 07 Jun 2006 10:55:08 +0200

Spiffy Box, mal wieder eine Beta, ist ein Onlinegenerator für "Rounded Corner". Einfach Höhe, Breite, Eckenradius und Farben angeben auf "Build" klicken und danach Bild sowie das CSS speichern.
Das Teil ist einfach zu bedienen und hat einen interessanten Colorchooser.

Reflection

nospam@example.com (SteBu) — Mon, 22 May 2006 14:27:23 +0200

Reflection ist ein Javascript welches Spiegelungen unterhalb von Grafiken erzeugt(Bild rechts). Die Opacity ist in Schritten einstellbar. Es genügt einem Image die Klasse reflect zuzuweisen.

Zur Zeit werden folgende Browser unterstützt: Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ und Safari.

Für Wordpress-User gibt es sogar ein Plugin mit dem Namen WP Wet Floor.

WP-Theme Aplus Moments

nospam@example.com (SteBu) — Mon, 08 May 2006 19:44:46 +0200

Warum das Theme Aplus Moments nicht im theme browser bei Alex King auftaucht vermag ich nicht zu sagen.

Ich finde es sehr gelungen und vor allem sehr stylish.

CSS-Box

nospam@example.com (admin) — Tue, 28 Jun 2005 12:15:24 +0200

Was mit CSS so alles möglich ist, zeigt Stu Nicholls. Nachfolgend mal ein adaptiertes Beispiel von ihm. Diese Box besteht aus Div-Containern und span-Elementen. Einfach mal mit der Maus rübergehen.

Und viel braucht es nicht um das zu erreichen.
Das html:

<div id="info">

<div id="container">

                 <a id="popup" href="#">

                         <span id="boxing">

                                 <span id="boxlid"></span>

                                 <span id="boxtop1"></span>

                                 <span id="boxtop2"></span>

                                 <span id="boxtop3"></span>

                                 <span id="boxtop4"></span>

                                 <span id="boxmiddle"></span>

                                 <span id="boxbottom1"></span>

                                 <span id="boxbottom2"></span>

                                 <span id="boo">BOO!</span>

                         </span>

                 </a>

</div>

</div>

und das CSS:



#container {position:relative; height:10em; margin:3em;}

#boxing {position:absolute; width:100px; height:150px; background:transparent;}

#boxlid {position:absolute; left:5px; width:0px; top:5px; height:40px; overflow:hidden; border-top:5px solid #f5f0ea; border-left:40px solid #f5f0ea;}

#boxtop1 {position:absolute; left:5px; width:0px; top:50px; height:0px; overflow:hidden; border-left:40px solid #f5f0ea; border-bottom:10px solid #ddd;}

#boxtop2 {position:absolute; left:45px; width:0px; top:50px; height:0px; overflow:hidden; border-right:40px solid #f5f0ea; border-bottom:10px solid #ddd;}

#boxtop3 {position:absolute; left:5px; width:0px; top:60px; height:0px; overflow:hidden; border-left:40px solid #aaa; border-top:18px solid #ddd;}

#boxtop4 {position:absolute; left:45px; width:0px; top:60px; height:0px; overflow:hidden; border-right:40px solid #888; border-top:18px solid #ddd;}

#boxmiddle {position:absolute; left:5px; top: 78px; width:40px; border-left:40px solid #aaa; height:20px; background:#888; overflow:hidden;}

#boxbottom1 {position:absolute; left:5px; width:0px; top:98px; height:0px; overflow:hidden; border-left:40px solid #f5f0ea; border-top:28px solid #aaa;}

#boxbottom2 {position:absolute; left:45px; width:0px; top:98px; height:0px; overflow:hidden; border-right:40px solid #f5f0ea; border-top:28px solid #888;}

#boo {position:absolute; width:100px; height:60px; font-size:15px; color:#ddd; top:50px; left:25px; font-weight:bold;}

a:visited#popup {text-decoration:none; }

a#popup {color:#000; text-decoration:none; cursor:default;}

a:hover#popup {background:#fff;}

a:hover#popup #boxlid {border-left:40px solid #888;}

a:hover#popup #boxtop1 {border-left:40px solid #888; border-bottom:10px solid #444;}

a:hover#popup #boxtop2 {border-bottom:10px solid #aaa;}

a:hover#popup #boxtop3 {border-top:18px solid #444;}

a:hover#popup #boxtop4 {border-top:18px solid #aaa;}

a:hover#popup #boo {color:#f60;}

CSS Selectors

nospam@example.com (admin) — Fri, 17 Jun 2005 11:37:05 +0200

Ein gute Einführung zum Einsatz von Selektoren bei CSS, mit leicht verständlichen Beispielen, gibt es bei literarymoose.info. Auch die anderen Beispiele können sich sehen lassen. Besonders interessant ist die vertikale Linie und das Thermometer(welches ohne Javascript auskommt).

CSS-Quiz

nospam@example.com (admin) — Sat, 26 Feb 2005 08:16:20 +0100

Wer der Meinung ist, daß er sicher im Umgang mit CSS ist, sollte sich mal am CSS-Quiz versuchen. Ich habe es komplett durch und bin auf eine Trefferqoute von 90% gekommen. Durch dieses Quiz ist mir klar geworden, das ich bei dem Thema Selektoren noch etwas lernen muß.

Schäden durch CSS?

nospam@example.com (admin) — Mon, 14 Feb 2005 09:42:06 +0100

Exessives schreiben von CSS kann zu Problemen führen, wenn man es nicht schafft, das ganze im RL abzuschalten.
Ein Beispiel:

Die Eroberung der letzten Nacht zutiefst geschockt auf deiner rechten Seite erblickst und an clear: right !important denkst.

Mehr davon gibt es bei Rene Grassegger.
[via: unblogbar]