webdesign

CSS Rounded Corners example

This trick uses background images, one for each corner. The focus here is getting it to work in the simplest way possible, without trying to hack fixes together for the benefit of specific browsers. It is designed to just work.

Wieder mal eine Lösung mit Bildern und zusätzlichem Markup. Diese Lösungen scheinen die derzeit stabilsten zu sein.

http://www.redmelon.net/tstme/4corners/

Web 2.0 design guide

Einen wirklich sehr ausführlichen Web 2.0 design guide hat webdesignfromscratch.com zusammengestellt.

Alles was man über Webdesign im Web 2.0 Zeitaltern wissen muss wurde hier vereint. Leider in englischer Sprache.

Über hasLayout — das Konzept des hasLayout im IE/Win

Corina Rudel hat einen der wichtigsten Artikel zu Darstellungsproblemen im IE aus dem Englischen ins Deutsche übersetzt.

Viele Darstellungsprobleme des Internet Explorer lassen sich beheben, indem man einem Element »Layout« gibt.

http://onhavinglayout.fwpf-webdesign.de/#elem

Das Original "On having layout" von Ingo Chao ist unter http://www.satzansatz.de/cssd/onhavinglayout.html zu finden.

Image-Replacement-Techniken

Image Replacement beschreibt das Ersetzen von HTML-Elementen durch Bilder, wobei der eigentliche Textinhalt selbst nicht mehr angezeigt wird.

http://meiert.com/de/publications/articles/20050513/

Phark-Methode:
h1 {
background: url(muster.gif);
height: 25px;
text-indent: -999em;
width: 250px;
}

http://meiert.com/de/publications/articles/20050513/#toc-phark

HTML Entities

Die Bezeichnungen der Sonderzeichen für HTML
http://www.w3schools.com/tags/ref_entities.asp

CSS Dock Menu

Dem Dock von Apple nachempfundenes CSS Menu mit JQuery und Fish-Eye Optik.

www.ndesign-studio.com

Vertical Centering in CSS

Man kennt das Problem: Man benutzt ein DIV-basiertes Layout, muss aber die Inhalte nicht nur horizontal, sondern auch vertikal ausrichten. Das CSS-Statement vertical-align verstehen die wenigsten Browser und funktioniert auch nicht auf DIV-Container. Die Lösung:

<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; #top: -50%">

Gut gestaltete Online-Shops

http://www.endless.com/
AJAX, Filterfunktionen

http://www.prickie.com/
Flash, Drag'n'Drop, Warenkorb

http://www.reisenthel.com/
Produktpräsentation, Flash

how essential are grids to web design

So much web design work relies on establishing a grid and the constraints on that grid: ad sizes, display size, browser display area minus chrome, and so forth. Grids are, quite literally, everywhere. But learning how to effectively utilize grids-- without becoming a slave to them-- can make the difference between a competent layout and a great layout.

http://www.codinghorror.com/blog/archives/000877.html

Alles fürs Webdesign

The Web Designers Tool Kit ist eine ausgezeichnete Sammlung von Links für Webdesigner auf dezinerfolio.com

" I have put together some of the best and the most useful set of links and resources a Web Designer and a Developer would need. Almost every requirement for developers and designers are now as Online Services. Even I make use of almost every resource below. Enjoy" - Navdeep