Logo Adobe Certified Expert (ACE) und Adobe Certified Instructor (ACI) für Adobe Acrobat

Aktuelle Links zum Thema: »CSS-Grundlagen«

Schatten css only - Crossbrowser
Schatten um Objekte, nur mit CSS und auch in den Internet Explorern. Ein Beispiel für eine Kombination von CSS3-, Mozilla- und webkit-Syntax, kombiniert mit den IE-Filtern.

Besprochene Seite besuchen

Kategorie: | |

Safari CSS Reference
Apple Developer ConnectionEine Referenz der CSS-Anweisungen, die Safar (bzw. Webkit) versteht. Enthält auch die experimentellen CSS-3-Eigenschaften.

Besprochene Seite besuchen

Kategorie: | | |

CSS3 Eigenschaften für Webkit-Browser, einschließlich iPhone
CSS3Es gibt doch einige Unterschiede zwischen Safari für den Desktop und das iPhone. John Allsop hat einige getestet und sie sauber in einer Gegenüberstellung aufgelistet.

Besprochene Seite besuchen

Kategorie: | | |

Wie verhalten sich Inline-Elemente mit einem Padding
Hundekopf - Logo von maxdesignWer schon mal versucht hat, einem inline-Element ein padding zuzuweisen, wird wohl selbst schon festgestellt haben, dass sich inline-Elemente hier anders verhalten als Block-Elemente. Russ Weakley von maxdesign beschreibt dieses Verhalten anschaulich und leicht nachvollziehbar (Englisch).

Besprochene Seite besuchen

Kategorie: | |

Experimente mit Cascading Style Sheets
Cssplay - LogoDie Homepage von Stu Nichols, in der er eine unglaubliche Fülle von raffinierten CSS-Tricks ausbreitet: Menüs, Layout-Techniken, Boxen mit runden Kanten, Photogalerien und vieles mehr. Unbedingt vorbeischauen ...

Besprochene Seite besuchen

Kategorie: | | |

Runde Ecken mit CSS - ein Überblick
Smiley Cat - LogoEine umfangreiche Linksammlung, wie man runde Ecken mit CSS erstellen kann: mit und ohne Bilder, mit und ohne JavaScript.

Besprochene Seite besuchen

Kategorie: |

Runde Ecken mit JavaScript
Nifty - LogoAlessandro Fulciniti beschreibt in seinem Artikel »Nifty Corners Cube« die Erstellung von runden Ecken mit Hilfe von CSS und JavaScript, ganz ohne Bilder. CSS und JavaScript können heruntergeladen werden, die Beispiele sind sehr ausführlich, leider nur in Englisch.

Besprochene Seite besuchen

Kategorie: |

Runde Ecken ohne Bilder
Bild 17Tomasz Lewandowski beschreibt in diesem Artikel eine Technik, wie mit Hilfe von CSS-Auszeichnungen (zugegeben ziemlich umfangreichen) runde Ecken gestaltet werden können, ohne dass man Bilder zu Hilfe nehmen muss. Er bezieht sich auf Arbeiten von Stu Nichols (»Krazy Korners«).

Besprochene Seite besuchen

Kategorie: |

Vertikal zentrieren mit CSS
Illustration - VogelDie vertikale Zentrierung von einzelnen Objekten in einem CSS-Container war und ist ein Problem, da diese Technik von CSS eigentlich nicht vorgesehen ist. In standardkonformen Browsern gibt es die Möglichkeit, mit display:table, display:table-cell zu arbeiten und mit vertical-align: middle zu zentrieren. Allerdings versteht der Internet Explorer dieses Konzept nicht, er muss also mit Hacks überlistet werden. In einem Artikel von Jeena Paradies werden einige der Konzepte vorgestellt; nachfolgend die Links, die im Artikel und in den Kommentaren genannt werden: »Vertical Centering in CSS« (mit ausführlicher Anleitung), »Shrink-wrap and Center« (nur Beispiel, ohne Anleitung), »CSS vertical centering using float and clear« (ebenfalls nur Beispiel).

Besprochene Seite besuchen

Kategorie: | | |

Transparente Bereiche in Internetseiten
Logo von SelfHTMLDieser Artikel zeigt, wie Sie in Ihren Internetseiten Transparenzeffekte einsetzen können: über eine GIF-Grafik, über die CSS-Eigenschaft »opacity«, über eine Simulation mit übereinanderliegenden (nicht-transparenten) Bildern oder mittels einer PNG-Grafik. Der Artikel beschreibt die jeweiligen Vor- und Nachteile der Methoden und erläutert vor allem die Einschränkungen durch den Internet Explorer bis Vs. 7.

Besprochene Seite besuchen

Kategorie: | |

Einführung in XHTML, CSS und Webdesign
IllustrationEine ziemlich umfassende Einführung in die Themen XHTML und CSS von Michael Jendryschik. Er richtet sich an Anfänger und an Profis, die ihr Wissen in Teilgebieten vertiefen oder einfach einiges nachschlagen wollen. Es ist kein direktes Lehrbuch, eher eine Referenz. Schön gestaltet sind die Seiten obendrein.

Besprochene Seite besuchen

Kategorie: | |

YAML - CSS-Framework für Typo3
yaml-LogoYAML (Yet Another Multicolumn Layout) ist ein CSS-Framework für mehrspaltige, tabellenlose CSS-Designs von Dirk Jesse. Das Framework kann unter der Creative Commons Lizenz frei verwendet werden, solange sich in der Homepage ein Link auf YAML befindet, es können aber auch kommerzielle Lizenzen erworben werden, die keinen Link erfordern. Auf den Seiten von YAML finden Sie ausserdem eines der besten Tutorials zu CSS-Layouts in deutscher Sprache. Absolut empfehlenswert! Dieter Bunkerd wiederum hat YAML in ein Typo3-Template integriert und beschreibt die Implementierung in einem informativen Workshop, der zudem auch auf einige wichtige Extensions eingeht, zum Beispiel tt_news, google-sitemap und mehr.

Besprochene Seite besuchen

Kategorie: | | | | |

CSS-Bugs im Internet Explorer (bis Vs. 6)
Weinendes BabyKurzweilige und anschauliche Darstellung der wichtigsten CSS-Fehler der Internet Explorer: Boxmodel-Fehler, Peekaboo-Bug, Guillotine-Bug, 3-Pixel-Jog-Bug und noch ein paar mehr. Alle Fehler werden beschrieben und mit Beispielen illustriert.

Besprochene Seite besuchen

Kategorie: | |

Yet Another Multicolumn Layout
Bild 9-1Yet another Multicolumn Layout oder kurz YAML ist ein hervorragendes CSS-Framework von Dirk Jesse. Dirk liefert eine detaillierte Anleitung mit, so dass man den Aufbau und die Verwendung der einzelnen Templates und CSS-Dateien leicht analysieren und an eigene Erfordernisse anpassen kann. Das Framework bietet browsersichere, weitgehend barrierefreie Templates für ein-, zwei- und dreispaltige Webseiten, getestet unter allen wesentlichen Browsern (sogar in den Betas von Internet Explorer 7). Insbesondere Dirks Ausführungen zum Clearing haben mich immens beeindruckt - das Problem des absoluten Clearings in nicht floatenden Spalten wird wirklich genial umschifft. Das Framework steht unter der Creative Common Licence, das heisst, jeder der es verwendet, muss auf yaml.de verlinken und kann es ansonsten frei verwenden. Dirk bietet aber auch eine kommerzielle Lizenz (zu den Nutzungsbedingungen).

Besprochene Seite besuchen

Kategorie: | | |

Tipps zum praxisgerechten Aufbau von Stylesheets
Styleworks - LogoEine Sammlung nützlicher Tipps, wie man seine CSS-Dateien übersichtlich hält und sich die Wartung vereinfachen kann. Ich stimme nicht mit allen dort beschriebenen Regeln überein (zum Beispiel formatiere ich CSS-Stile lieber mit erheblich weniger Platzaufwand) aber insgesamt sind sie empfehlenswert.

Besprochene Seite besuchen

Kategorie: |

Tabellen-Layout mit CSS
Styleworks - LogoIm Mittelpunkt steht die Gestaltung von größeren Datentabellen mit Hilfe von CSS. An vielen Beispielen werden die verschiedenen Gestaltungsmöglichkeiten mit Rahmen, Hintergründen und Abständen dargestellt. Browserunterschiede werden ausführlich diskutiert.

Besprochene Seite besuchen

Kategorie: | |

Tabellenformatierung mit CSS
Styleworks - LogoDetaillierter Workshop über die Formatierung von Tabellen mit Hilfe von CSS. In einer Einführung wird das grundlegende CSS-Tabellenmodell beschrieben, danach folgen Rahmen, Höhe und vertikale Ausrichtung, Breite und horizontale Ausrichtung und schließlich Über- und Unterschriften. Ausführlich wird auch auf Browserunterschiede eingegangen.

Besprochene Seite besuchen

Kategorie: | |

CSS Play: Experimente mit Cascading Style Sheets
css play logoEine sehens- und besuchenswerte Seite von Stu Nichols, die hält, was der Titel verspricht: Animationen, CSS-Slide-Shows, Menüs und Layouts in beeindruckender Qualität. Leider nur in Englisch und mit ziemlich viel Werbung versehen, aber die Beispiele sind sehenswert.

Besprochene Seite besuchen

Kategorie: | | |

Learn CSS Positioning in Ten Steps
BarelyFitz - LogoEin interessantes Tutorial von Patrick Fitgerald über die Postionierungsmöglichkeiten von CSS 2: postition: static, relative und absolute, jeweils einzeln und in Kombination. Sehr knappe und anschauliche Darstellung; sie zeigt sehr schön die Kombinationsmöglichkeiten und die Grenzen der jeweiligen Technik auf. Leider nur in Englisch.

Besprochene Seite besuchen

Kategorie: | |

SELFHTML - HTML-Dateien selbst erstellen
Der KLassiker. Themen: HTML, XHTML, CSS, XML, JavaScript, Dynamisches HTML, Perl und PHP. Ausserdem eine Fülle von ergänzenden Informationen rund ums Webdesign. Ein unbedingtes Muss für Einsteiger und für alle anderen ein wertvolles Nachschlagewerk. Gibt es zudem als Downloadversion und als Buch. Ergänzt wird es durch ein Forum und das Weblog SELFTHML aktuell, in dem über aktuelle Trends und Themen im Webdesign diskutiert wird.

Besprochene Seite besuchen

Kategorie: | | | |

Seite 1 von 2 Seite(n)  1 2 >

 

Aktuelle Seminartermine:

Seminarkalender abonnieren

Icon einer Kalenderdatei
Seminarkalender als .ics-Datei: Für Kalenderanwendungen herunterladen (alle Systeme)
Icon einer Kalenderdatei
Seminarkalender für iCal: Kalender abonnieren (nur Mac OS X)