PAGE online

CSS-Tutorialcode: Bilder flexibel anordnen mit CSS Grid

Hübsch gruppierte Bilder machen Websites einfach attraktiver. Denis Potschien erklärt, wie selbst CSS-Einsteiger mit CSS Grid schnell abwechslungsreiche Galerien gestalten können. Hier geht’s zum Tutorial-Code.

CSS-Tutorial, UI Design, UX Design, Webfonts

Zusammen mit unserem Step-by-Step-Workshop in PAGE 07.2019 können Sie das Tutorial Schritt für Schritt nachvollziehen. Wir wünschen viel Spaß beim Tüfteln und Coden!

PDF-Download: PAGE 7.2019

Kreativität: Freiheit versus Regel ++ Ideation: Methoden & Tools für Designer ++ Ideen für die Schublade – hurra! ++ Webdesign: Flexible Layouts mit CSS Grid ++ Karriere: Jobvermittlung für Kreative ++ Ethik & Design: Chance & Pflicht für Gestalter

8,80 €
Lieferzeit: 2-3 Werktage
AGB

Komplexe Weblayouts lassen sich weder mit float-basierten Gestaltungsrastern noch mit CSS Flexbox perfekt realisieren. CSS Flexbox ermöglicht es zwar, die Gestaltung vollständig vom HTML-Code zu trennen, bietet sich aber eher für lineare als für verschachtelte Strukturen an. Gerade Letzteres geht mit CSS Grid wesentlich leichter.

In PAGE 07.2019 erläutern wir Schritt für Schritt, wie Sie mit CSS Grid relativ unaufwendig eine responsive Galerie gestalten, deren Bilder sich bei Klick vergrößern. CSS Grid ist eine vielseitige Gestaltungstechnik, mit der man nicht nur klassische Bereiche wie Header, Footer, Navigation und Inhalt frei auf einem Webseitenraster platzieren, sondern auch Bilder individuell in anspruchsvollen Galerien anordnen kann.

Das Tutorial eignet sich als Fingerübung für alle, die über grundlegende Kenntnisse in HTML und CSS verfügen und bereits einfache Seiten und Layouts erstellen können. Hier geht’s in unseren Shop zu PAGE 07.2019

PDF-Download: PAGE 7.2019

Kreativität: Freiheit versus Regel ++ Ideation: Methoden & Tools für Designer ++ Ideen für die Schublade – hurra! ++ Webdesign: Flexible Layouts mit CSS Grid ++ Karriere: Jobvermittlung für Kreative ++ Ethik & Design: Chance & Pflicht für Gestalter

8,80 €
Lieferzeit: 2-3 Werktage
AGB
[8492]

Dieser Beitrag wurde erstmalig am 29.05.2019 veröffentlicht.

Produkt: eDossier: »Microinteractions: Animationen und Transitions«
eDossier: »Microinteractions: Animationen und Transitions«
Best Practices für Web und Mobile. Coding-Tipps für CSS3. Tools, Bibliotheken und Generatoren fürs Prototyping & Wireframing

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte Sie auch interessieren