Alle Artikel mit dem Schlagwort: Lea Verou

CSS Spaltenbreite

CSS Secrets 3/3: Spaltenbreiten in Tabellen zähmen

In ihrem Buch „CSS Secrets“ versammelte die international bekannte CSS-Spezialistin Lea Verou 47 Techniken, wie sich mit elegantem, klarem CSS-Code typische Webdesign-Probleme lösen lassen. Drei dieser Code-Schnipsel veröffentlichen wir im oreillyblog. Auf Silbentrennung und Checkbox-Design folgt “Spaltenbreite in Tabellen zähmen”.  Das Problem Auch wenn wir schon vor langer Zeit aufgehört haben, Tabellen für das Layout zu benutzen, haben sie auch auf modernen Websites noch ihre Berechtigung. Tabellen werden benutzt, um tabellarische Daten (Statistiken, E-Mails, Listen von Dingen mit vielen Metadaten und vieles andere) darzustellen. Außerdem können wir andere Elemente dazu bringen, sich wie Tabellenelemente zu verhalten, indem wir die tabellenspezifischen Schlüsselwörter für die Eigenschaft display verwenden. Obwohl ihre Benutzung gelegentlich sehr bequem zu sein scheint, ist das Layout von Tabellen bei dynamischen Inhalten nur schwer vorherzusagen. Der Grund ist, dass die Spaltenbreite dem vorhandenen Inhalt angepasst wird, wobei selbst explizite width-Angaben eher als eine Art Empfehlung interpretiert werden, wie in Abbildung 7.5 zu sehen ist.   Aus diesem Grund benutzen wir oft andere Elemente für tabellarische Daten, oder wir finden uns damit ab, nicht alles vorhersagen zu können. …

CSS Checkboxen

CSS Secrets 2/3: Eigenes Design für Checkboxen

In ihrem Buch „CSS Secrets“ versammelte die international bekannte CSS-Spezialistin Lea Verou 47 Techniken, wie sich mit elegantem, klarem CSS-Code typische Webdesign-Probleme lösen lassen. Drei dieser Code-Schnipsel veröffentlichen wir im oreillyblog. Nach Silbentrennung geht es heute um Checkbox-Designs. Problem Designer wollen möglichst jedes Website-Element genau kontrollieren. Müssen Grafikdesigner mit beschränkter CSS-Erfahrung ein Website-Mockup erstellen, haben die Formularelemente fast immer ein Design, bei dem sich der CSS-Entwickler am liebsten die Haare ausreißen würde. Aus Gründen der Lesbarkeit sprechen wir in diesem Secret von Checkboxen (oder „Ankreuzfelder“). Trotzdem lässt sich alles hier Besprochene nicht nur auf Checkboxen, sondern auch auf Radiobuttons anwenden, falls nicht anders vermerkt. Als CSS eingeführt wurde, waren Stildefinitionen für Formulare nur sehr beschränkt nutzbar. Selbst heute sind sie in den verschiedenen CSS-Spezifikationen nicht besonders klar formuliert. Allerdings haben die Browser im Laufe der Jahre immer mehr CSS-Eigenschaften für Formularelemente zugelassen, wodurch es inzwischen recht große Gestaltungsmöglichkeiten gibt. Leider gehören Checkboxen und Radiobuttons nicht zu diesen Formularelementen. Bis heute ermöglichen die meisten Browser so gut wie keine Stildefinitionen. Als Folge finden sich die Website-Autoren entweder mit dem …

CSS Secrets Silbentrennung

CSS Secrets 1/3: Silbentrennung

In ihrem Buch „CSS Secrets“ versammelte die international bekannte CSS-Spezialistin Lea Verou 47 Techniken, wie sich mit elegantem, klarem CSS-Code typische Webdesign-Probleme lösen lassen. Drei dieser Code-Schnipsel veröffentlichen wir nun im oreillyblog. Wir beginnen mit CSS Secret Nr. 20 aus dem Kapitel “Typografie”: Silbentrennung.  Das Problem Designer lieben Blocksatz. Wenn Sie sich ein beliebiges, gut designtes Magazin oder Buch ansehen, ist er ständig zu sehen. Im Web wird der Blocksatz dagegen eher selten verwendet und von geschickten Designern eher noch weniger. Warum ist das so, obwohl wir doch schon seit CSS 1 text-align: justify; definieren können? Der Grund wir klar, wenn Sie sich die folgende Abbildung ansehen. Typografen sprechen hier von einem “Gießbach” aus Leerraum, der entsteht, wenn die Wortabstände angepasst werden müssen, um den Blocksatz zu erzeugen. Das sieht nicht nur unschön aus, es behindert auch die Lesbarkeit. Im Druck geht der Blocksatz Hand in Hand mit der Silbentrennung. Durch das Fortführen eines Worts auf der folgenden Zeile muss deutlich weniger Leerraum eingefügt werden, wodurch der Text wesentlich natürlicher wirkt. Lösungen für die Silbentrennung im Web gibt es einige. Allerdings …

CSS Secrets

E-Book-Deal im Oktober: CSS Secrets

Rücken wir doch Webdesign-Problemen mit Code zu Leibe: Lea Verou zeigt uns, wie es geht. Ihr Buch “CSS Secrets” gibt es jetzt günstiger. Dass Lea Verou eine Virtuosin ist, haben wir hier schon erläutert. Immer wieder programmiert sie ihrem staunenden Publikum auf internationalen Web-Konferenzen etwas vor. Und in ihrem Buch “CSS Secrets” versammelte sie 47 Techniken, wie sich mit CSS-Code Formen bauen, Text in Kreise gießen oder Bilder mit einem Milchglas-Effekt versehen lassen. Oder oder.  Wir feiern das einjährige Jubiläum unserer deutschen Ausgabe – mit einem Sonderpreis für das E-Book:  Nicht vergessen: Die E-Book-Aktion ist auf den Monat Oktober begrenzt, dafür könnt Ihr die E-Books aber in jedem Shop Eures Vertrauens kaufen, der Preis ist überall gleich. Unsere E-Books sind natürlich DRM-frei.

CSS Secrets Buchcover

Neuerscheinung: CSS Secrets

Lea Verou ist mit gerade einmal 30 Jahren bereits eine Webdev-Koryphäe und auf großen internationalen Konferenzen zuhause. Jetzt haben wir sie auch im O’Reilly-Programm – mit “CSS Secrets: Typische Webdesign-Probleme klug gelöst”. “I am Lea, and this is Mr Border-Radius”: So leitet Lea Verou ihren Talk auf der 2014er Fluent Conf ein. Und macht sich dann auf, ihr Publikum erst von der oft abgesprochenen Coolness der runden Ecken zu überzeugen. Und schließlich auch davon, dass die CSS-Auszeichnung noch viel mehr bietet als eben nur das Abrunden geometrischer Figuren. Sie zeigt beispielsweise, wie sich Ellipsen erstellen lassen. Oder halbe Ellipsen. Auch Viertel-Ellipsen.  Nun könnte man diese Figuren auch mit Images einbinden. Per CSS-Code aber, erklärt Lea, lassen sie sich animieren. Dazu fügt sie ein, zwei, drei, ok… manchmal drölfzig Attribute in die CSS-Anweisungen und formt die Pixel gerade so, wie andere Vasen töpfern. Wer ihr zusieht, wundert sich nicht mehr, dass ihr bisweilen Zauberkräfte zugesprochen werden. Oder, wie “King of Web Standards” Jeffrey Zeldman sagt: “Niemand versteht es besser, dieses neue CSS zu vermitteln, als Lea Verou; sie zählt zu …