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 €
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 €
AGB
[8492]

Dieser Beitrag wurde erstmalig am 29.05.2019 veröffentlicht.

Produkt: PAGE 9.2020
PAGE 9.2020
Zeit für Ideen! 10 Themen, 10 Visionen ++ Behavioural Design ++ Selfmarketingtool Freefonts ++ Design & Wirtschaft nach Corona ++ Außergewöhnliche Agenturen ++ Making-of: Chatbot für lexoffice ++ Nachhaltiges Packaging ++ Tutorial: UX Design mit Figma ++ Ratgeber: Font-Management-Tools

Schreiben Sie einen Kommentar

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

Das könnte Sie auch interessieren