CSS
am 22.09.2009 in CSS, XHTML, Produktivität
Zen Coding
Zen Coding ist ein Plugin für bekannte Editoren, wie z. B. Textmate, das es dem Anwender erlaubt, HTML-Code mit CSS-Selektorsytax zu schreiben. Einfach den Selektor (Beispiel: div.content>h1>a) aufschreiben, auslösen und – zack – schon erscheint das fertige HTML-Markup. Verdammt praktisch!
am 13.07.2009 in CSS, Browser, Javascript
Extrem beeindruckend: 3D CSS Effects
Wie Wolfgang Bartelme schon sagt: „Unbelievable what’s possible with plain HTML, CSS, JavaScript and the latest Webkit 3D CSS Effects.“ Der Artikel „Snow Stack is Here“ zeigt uns eine eingefilmte Vorschau der neuen 3D-CSS-Effekte, aber auch eine Live-Demo (nur vollständig funktionabel in der Webkit-Version r45855).
Smart CSS Ain’t Always Sexy CSS
Im Digital Web Magazine gibt es einen weiteren sehr lesenswerten Artikel, der vielleicht zu neuen Herangehensweisen für das Klassifizieren von Elementen und das Verfassen von CSS anregt. Fazit von Martin Ringlein: Eine schlaue Kombination aus sematischen und präsenations-haltigen Markup ist meist die bessere Lösung.
Yahoo! UI Library: Grids CSS
Ich habe mich heute erstmals mit dem YUI CSS-Framework auseinandergesetzt und bin sehr angetan davon. Hier werden Information, eine Video-Präsentation (Dauer: mehr als 40 Minuten), sowie die nötigen CSS-Dateien (optional auch von Yahoo! gehostet) bereitgestellt.
Nettuts
Die Jungs von PSDTuts haben ein neues Blog gestartet: Nettuts möchte hochwertige Tutorials für Webdesign und Webdeveloper liefern. Mit »Build a Sleek Portfolio Site from Scratch«, »Create a Slick Tabbed Content Area using CSS & jQuery« und »Creating a PayPal Payment Form« haben sie schon einmal einen guten Start gemacht.
Multiple CSS-Klassenvergabe
Dass man einem Element mehrere CSS-Klassen vergeben kann, habe ich recht spät erfahren. Wieviele CSS-Anweisungen man sich damit sparen kann, ist unglaublich. Für diejenigen von euch, die davon noch nichts wussten, hier eine kleine Einführung.
Für Einsteiger: CSS-Layouts kostenlos zum mitnehmen
Hier finden CSS-Einsteiger gute Grundlagen für eigene auf CSS basierende Layouts, die kostenlos und lizensfrei verwendet werden.
100 kostenlose CSS-Ressourcen
Bei softwaredeveloper.com gibts eine sehr gut sortierte und aufbereitete Liste an kostenlosen Informationen und Materialien zum Thema CSS. Vom Einstieg bis zum Profizeugs ist sehr vieles dabei.
Schönere HTML-Formulare mit CSS
Bei sitepoint kann man sich mal einen Denkanstoß holen, sich bei Formulargestaltung mehr Mühe zu geben.
71 CSS Menüs kostenlos zum mitnehmen
Hier gibt's eine umfangreiche Liste an frei-verügbaren CSS-basierten (Navigations-)Menüs.
Beste CSS-Techniken im Mai
roScripts veröffentliche eine kleine Sammlung von 20 CSS_Techniken, die im Mai herausgekommen/bekannt geworden sind. Mit dabei: Runde Button-Links, Schlagschatten, Komprimierungs-Tools und und und...
Design-Sammlung über Paginierungs-Navigationen
Hier gibt es kostenlose CSS-Stile für Paginierungs-Navigationen (Blätterfunktionen für zu viele Einheiten in einer Seite). Es sind bekannte Stile (Flickr, Digg, Yahoo, etc.) sowie Eigenentwicklungen des Autors dabei.
24 Tooltipp-Scripts
Dr. Web stellt hier eine Sammlung an Tooltipp-Scripts vor. Einige Tutorials basieren auf zugänglichen CSS-Lösungen, während andere interaktive und effektvolle Javascript/AJAX-Methoden verwenden.
Skalierbare CSS Buttons mit PNGs
Ja, in letzter Zeit gibt es viele Tutorials zu diesem Thema. Dieser Artikel verfolgt einen Ansatz mit PNG-Bildern und Hintergrundfarben.
Kugelsichere Link-Buttons mit CSS
Roger verrät uns eine kugelsichere Lösung für grafisch aufgepeppte Link-Buttons. Diese reagiert besser auf Textskalierung oder viel Textinhalt als die von mir am 10. Mai 2007 erwähnte Lösung Sexy Buttons mit CSS.
CSSneustart
Lust auf was Neues? Zum CSSneustart am 01. Juli 2007 stellen deutsche Webseiten ihr Design auf den Kopf! Die tägliche Tristesse wird durch frische Ideen, neue Layouts und modernes Webdesign ersetzt. Modernes Webdesign und das Verständnis für Webstandards und Barrierefreiheit im Netz, sind in Deutschland nach wie vor nur wenig bekannt und verbreitet. Wir wollen das ändern! Teilnehmen dürfen alle: Profis und Amateure, kommerzielle und private Webseiten.
Link-Boxen mit CSS und Javascript
Auf „Ask The CSS Guy“ wird erklärt, wie man einen Container mit Überschrift und Text komplett klickbar macht und mit einem Hovereffekt versieht - sauber, zugänglich und elegant mit CSS und Javascript.
Sexy Buttons mit CSS (updated)
Alex Griffioen beschreibt in diesem Artikel, wie man mit schlankem Markup und der Sliding Doors Technik schöne Buttons mit elegantem Hover-Effekt zaubern kann.
Mittlerweile ist der Artikel dank Alexander Hahn auch in deutsch verfügbar.
Wegweiser für die Erstellung besserer Site Badges
Wer vorhat, Site Badges (Seitenelemente für Websites ausserhalb der Kontrolle, auch bekannt als „Widgets“) zu schreiben, muss sich über viele Einschränkungen und schlechte Gegebenheiten im Klaren sein. Hier erfährt man alles Wissenswerte.
CSS Dockmenü
Im N.Design Studio gibt es nun das Mac-Dock als XHTML-CSS-jQuery-Lösung kostenlos zum Download. Sehr interessante Angelegenheit, mit der ich mich schon vor einiger Zeit auseinandergesetzt habe. Mein Ansatz war nur anders, was wohl zum Scheitern geführt hat :)
CSS Hover-Effect für Boxen
Veerle teilt uns mit wie sie in Zusammenarbeit mit Roger Johansson vier flexible Boxen im Tab-Design mit Hoverffekten versehen hat. Das Ergebnis präsentiert sie sehr anschaulich in zwei statischen HTML-Seiten (einmal mit und einmal ohne aktiviertem CSS).
CSS Reset Reloaded
Eric Meyer hat vor einigen Tagen seine CSS-Reset-Methode in einer überarbeiteten Fassung vorgestellt. Dieses CSS-Schnipsel hebt jegliche Formatierungen, die der Browser beinflussen könnte auf. Werden die enthaltenen CSS-Regeln auf ein Dokument angewendet, ist dieses wirklich stillos. So eignet sich der Code perfekt für den Start eines neuen CSS-gestützten Projekts.
25 Codeschnipsel zum Mitnehmen #4
Im Tutorialblog gibt es nun eine weitere kleine aber feine Sammlung an Links zu Codeschnipseln (CSS, DHTML, AJAX, JS), die man immer mal brauchen könnte. Die vorherigen Teile Teil 1 , Teil 2 und Teil 3 dürfen nicht übersehen werden.
60 Top-CSS-Galerien
Hier werden die 60 wichtigsten und einflussreichsten CSS-Galerien aufgelistet. Optimaler Ausgangspunkt, wenn man mal Inspiration für neue Webdesigns sucht oder einfach nur auf schönen Websites surfen möchte.
Ist XHTML wirklich besser als HTML?
Falsche Behauptungen, Argumente ohne Fundament oder einfach das fehlende Verständnis für die grundlegenden Unterschiede zwischen HTML und XHTML - alles kann zu einer falschen Entscheidung für den Einsatz führen. Es folgt eine freie Übersetzung eines Auszugs aus dem Artikel „HTML or XHTML? Fact From Fiction“ von Stephen Philbin und meine Gründe dafür, XHTML nach wie vor einzusetzen.
The Top Five Forgotten HTML Elements
Auf Sitepont stellt Matthew Magain 5 oft vergessene HTML-Elemente vor, die man viel öfters einsetzen sollte, als man zu denken meint. Danke.
Die neuen Selektoren von CSS 3
Roger Johansson nannte uns am 10. Januar 2006 die neuen Selektoren von CSS 3 mit Anwendungsbeispielen. Einen deutsprachigen Überblick der meines Erachtens 14 wichtigsten Selektoren gibt es hier.
HTML 4.5 Anyone?
Andy Budd über HTML "HTML was created for document mark-up, and it still does a pretty good job." Er berichtet über die Entwicklung von HTML - er geht speziell auf Applikationsentwicklung mit HTML ein und nennt ein aktuell interessantes Stichwort: Web Applications 1.0
Googles Ergebnisanzeige per userContent.css optimieren
Suchmaschinenoptimierer und Webdesigner sehen Ihre Websites gerne in Googles Suchergebnissen. Doch manchmal muss man ein wenig suchen, um diese zu lokalisieren. Für Firefox-Nutzer habe ich hier ein Tutorial, welches beschreibt, wie man bestimmte Ergebnisse (anhand einer URL) mit CSS ändert, um diese leichter zu finden.
Windows Luna-Menü mit CSS
Tom hat wiedermal ein sehr schönes Tutorial herausgebracht. Diesmal geht es um die Nachbildung der typischen Microsoft Office-Menüs mit HTML und CSS.
Richtiger Einstieg in (X)HTML-Entwicklung
In den nächsten Tagen möchte ich einen guten Bekannten in die (X)HTML-Entwicklung einführen. Wichtig dabei ist mir der richtige Einstieg in Zugänglichkeit, Benutzerfreundlichkeit, sowie Barrierefreiheit. Ich plane, dass wir zuerst eine Website nur mit (X)HTML entwickeln. Dadurch verspreche ich mir, ihm ein Auge und Gefühl für Semantik zu verleihen.
Stylegala steht zum Verkauf
Die CSS-Galerie Stylegala steht seit einigen Tagen zum Verkauf. Der Verkaufs-Thread informiert über durchschnittliche Besucherzahlen und Seitenimpressionen und berichtet von einem möglichen monatlichen Einkommen von ca. 2500 US Dollar. Ab 30000 US Dollar kann man mitbieten. Leider nicht ganz meine Preislage :)
5 Merkmale von schlechtem HTML
Es gibt sicherlich viele Merkmale, die eine schlechte Website ausmachen. Diese können in der Zugänglichkeit oder in der Suchmaschinenoptimierung schlechte Auwirkungen haben. Wenn also zwei oder mehr von den folgenden Markmalen zutreffen, sollte man sich überlegen, diese gemäß den heutigen Standards neu aufzusetzen.
Schwachstellen und Lücken in HTML/XHTML
Nichts ist perfekt. HTML/XHTML erst recht nicht. Sonst hätte es bis jetzt nur eine Version gegeben. Die Schwächen, die mich stören, habe ich hier zusammengefasst. Vielleicht fallen euch noch weitere ein.
Hover-Effekte für Linklisten
Tom S. Weber erklärt, wie er seine Daily Links-Sektion, welche für frische Links seiner Interessen ist, mit CSS gestaltet hat. Ein netter Hovereffekt darf da natürlich nicht fehlen...
Runde Ecken und runde Ränder mit CSS
Grundsätzlich ist es möglich, runde Ecken oder runde Ränder mit CSS jedem Block-Element zuzuweisen. Jedoch bedarf es einem Workaround (manche mögen es CSS-Hack nennen) für unseren lieben IE. Hier stelle ich eine Methode vor, runde Ecken oder runde Ränder mit CSS für alle geläufigen Browser ohne Javascript zu erstellen.
CSS-Filter im Überblick
Immer wieder nützlich: Eine überschaubare Tabelle, die die möglichen Filter diverser Browser beinhaltet.
CSS-Dateien organisieren
Wenn große Web-Projekte mit CSS umgesetzt werden, bedarf es einer gewissen Organisation. Wie man dabei am besten vorgeht beschreibt Heiko in seinem Artikel.
Transparenz und Anzeige von PNG im Internet Explorer
Bis heute war mir nicht bekannt, dass es möglich ist, per CSS Elemente auch Transparenz zuzuweisen, sodass es der Internet Explorer versteht. Auch das PNG-Bilder können im Internet-Explorer korrekt angezeigt werden, war mir unbekannt. Doch nun bin ich schlauer und stelle euch die gegebenen Möglichkeiten vor.
CSS Reboot Mai 2006
Dieses Jahr ist es wieder soweit: Am 1. Mai 6:00 (GMT) werden wieder viele Webdesigner ihre Website völlig neu gestaltet präsentieren. Diesmal macht Labuschin Webdesign mit. Die ersten Entwürfe sind schon fertig.
Meine X-Ray CSS-Modifikation
Heike Edinger hat vor einiger Zeit mehrere CSS-Stylesheets veröffentlicht, welche Websites sozusagen durchleuchten. Die Version "Markup" habe ich ein wenig verändert und stelle sie hier zum Download bereit.
Browser-Cross CSS
Es gibt Dinge, die unbedingt beachtet werden müssen, damit CSS von möglichst vielen Browsern gleich interpretiert wird. Dazu gehört nicht nur Doctype und Wildcard. Mehr darüber schreibt Emil Stenström.
Website-Frühjahrsputz
Im Laufe des Jahres sammeln sich viele Kleinigkeiten auf Websites an, die dort nichts zu suchen haben. Markup-Fehler, fehlerhafte Updates/Plugins und Rechtschreibfehler sollten also entfernt oder korrigiert werden. Vielleicht kommt auch eine neue Art der Archivierung in Frage. Ich habe hier 7 Tipps zusammengetragen.
Tooltips mit JS und CSS gestalten
Web-Graphics veröffentlichten mit Bubble Tooltips ein gutes Tutorial über die Gestaltung von Tooltips mit Javascript und Cascading Style Sheets.
Eingabefelder im Mac OS X-Stil
Inspiriert durch die neuen Photoshop-Templates diverser Browser und deren Formular-Darstellungen habe ich ein kleines Tutorial vorbereitet. Es beschreibt die CSS-Formatierungen von Input und Textarea im Mac OS X-Stil. Es ist zwar nicht besonders schwer oder etwas neues, aber man sollte es einmal probieren.
Balken-Diagramme mit CSS
Eine sehr interessante Überlegung, mit der ich mich bereits beschäftigt habe. Diese Methode gefällt mir und ist weitaus eleganter als meine.
Punkte in Classes und IDs
Tomsw.org verrät, was man bei der Namens-Gebung von Elementen und deren Verarbeitung in CSS beachten muss.
CSS-Hack für Opera durch Kombinieren
Während meines Updates der CSS-File stieß ich auf folgendes Problem: Opera zeigte als einziger Browser den Inhalts-Container zu weit oben an und verdeckte somit die Hauptnavigation. Es musste also ein geeigneter CSS-Hack für Opera her. Ich glaube, ich habe dabei selbst einen kreiert - zumindest eine komplexe Kombination.
Positionierung mit CSS
Im 15. Artikel unseres Adventskalenders beschreibt Teresia Kuhr geläufige Positionierungs-Methoden auf CSS-Basis.
CSS Hack Diät
Björn Seibert rät davon ab, CSS-Hacks in Übermaßen zu benutzen. Warum? IE 7 kommt Anfang nächsten Jahres raus!
CSS zum Bewundern
Heute wurde mein bescheidener Anteil des Adventskalenders zum Thema Webstandards veröffentlicht. Es geht um große CSS-Galerien, wie CSS Beauty oder Screenspire.
Logische Auszeichnungen machen Sinn
Immer öfter endecke ich Websites, in welchen Texte unzureichend ausgezeichnet sind. Beispielsweise werden Abkürzungen nicht - wie vom W3C vorgesehen - notiert, sondern einfach nur dahingeschrieben. Auch mir passieren manchmal solche Fehler. Um dies in Zukunft besser zu machen, habe ich ein wenig recherchiert.
CSS Linksammlung
Per-Net.ch hat eine sehr umfangreiche Linksammlung zum Thema CSS aufgebaut. Tutorials, Referenzen und und andere Kategorien sind dort verfügbar. Auch Labuschin Webdesign befindet sich bereits in dieser CSS-Hilfen-Datenbank.
Closing Divs
Eine interessante Überlegung, Divisionen zu schließen - Ein HTML-Kommentar zur besseren Übersicht im Quellcode.
CSS Toolshed
CSS-Projekt ala CSS Zen Garden - speziell für CMS - ist im Anmarsch. Die Willkommenseite gefällt mir persönlich sehr gut.
CSS-Teamarbeit meistern
Content with Style berichtet im aktuellen Artikel Playing Nice with the Other CSS Kids über die Arbeit in einem Developer-Team...
Ein Herz für Tabellen
Tabellen sind zum Symbol für die bösen, alten Zeiten geworden, als Killerwebsites State of the Art waren. Das Mittel zum Zweck - Tabellen - werden heute dämonisiert. Zu Unrecht.
css nightingale
Eine junge CSS-Gallery, selbst auch sehr schön umgesetzt. Auch Labuschin Webdesign ist dabei.
Formulare mit CSS gestalten
Wer kennt sie nicht - Formulare, die mit Tabellen gestaltet wurden, damit sie übersichtlicher aussehen. Label links, Eingabefeld rechts daneben, alle Eingabefelder schön übereinander geordnet. Doch das lässt sich auch mit CSS erreichen. Mehr dazu in diesem Artikel.
CSS Import
Eine CSS-Galerie mit sehr gelungenen Websites. Auch Labuschin Webdesign ist bei den Notable entries dabei :)
CSS-Editoren im Vergleich
Manuela erzählt über ihre Erfahrungen mit verschiedenen CSS-Editoren. Sehr übersichtlicher und guter Artikel.
CSS Reboot Herbst 2005
Laut des Zählers von CSS Reboot werden in 9 Tagen knapp 900 Seiten mit nagelneuen Style Sheets versehen. Wenn das mal keine Inspirationswelle wird.
BD Smooth
Als ich heute bei Bartelme Design den Stil ausschalten wollte endeckte ich sein neues Design. Es ist ihm mal wieder gut gelungen. Nur der Style-Switcher funktioniert zur Zeit noch nicht.
Browsershots
Kostenloser Service für Screenshots von Mac-, Linux- oder Windowsbrowsern. Für Webdesigner natürlich ein Bookmarking-Muss.
CSS Table Gallery
Tabellen korrekt angewendet und mit CSS gestaltet. Chris Heilmann zeigt Werke von Webdesignern aus aller Welt.
CSS Optimizer im Vergleich
Vier verschiedene CSS Optimizer wurden vom Webstandard Blog getestet. Sehr interessante Ergebnisse!
Semantisch korrekter Header
Bis vor kurzem war mir gar nicht klar, wie viel man über einen guten Header nachdenken sollte - bis zu einem kleinen Einspruch von Wolfgang Bartelme auf meinen Artikel 'Header mit CSS stylen'.