Heim >Web-Frontend >CSS-Tutorial >CSS Masonry Catness
CSS Masonry Catness
- Mary-Kate OlsenOriginal
- 2024-11-01 07:09:30563Durchsuche
CSS ist wie alles andere in der Technik – es verändert und entwickelt sich ständig weiter. Eine fortlaufende Entwicklung in diesem Bereich ist das CSS Grid Layout Module Level 3, auch bekannt als CSS Masonry Layout. Theo hat ein Video darüber gemacht, wie es sich entwickelt und welche Debatte Apple und Google über die Umsetzung führen.
All das hat mich begeistert, CSS Masonry auszuprobieren! Die WebKit-Fotodemos haben mich dazu inspiriert, eine ähnliche Ansicht mit Katzenbildern zu erstellen! Wer liebt keine Katzen?
Voraussetzungen
Um zu sehen, was wir erstellen werden, benötigen Sie die Safari Technology Preview oder um das Feature-Flag „layout.css.grid-template-masonry-value.enabled“ in Firefox auf „true“ zu setzen.
Um auf die Funktionsflags in Firefox zuzugreifen, geben Sie about:config in Ihre Adressleiste ein. Drücken Sie die Eingabetaste und Sie können nach dem Raster oder der oben genannten Zeichenfolge suchen. Schalten Sie es auf „true“ und Sie können loslegen!
Grundlegende Vertrautheit mit TypeScript/JavaScript, React und Next.
Richten Sie ein neues Projekt ein
Erstellen Sie im Terminal ein neues Next-Projekt.
Führen Sie diesen Befehl aus: npx create-next-app@latest
Dann müssen Sie möglicherweise das folgende Paket installieren:
create-next-app@15.0.1 Ok to proceed? (y) y
Nennen Sie Ihr Projekt. Ich nenne meinen Katzenbilder-Wasserfall
Fahren Sie mit der Einrichtung des nächsten Projekts im Terminal fort (achten Sie darauf, Tailwind nicht zu verwenden):
Would you like to use TypeScript? Yes Would you like to use ESLint? Yes Would you like to use Tailwind CSS? No Would you like your code inside a 'src/' directory? No Would you like to use App Router? (recommended) Yes Would you like to use Turbopack for next dev? No Would you like to customize the import alias (@/* by default)? No
Wenn Ihr Projekt fertig eingerichtet ist:
Ändern Sie die Verzeichnisse in Ihrem Projekt, indem Sie diesen Befehl in Ihrer Terminal-CD „Ihr-Projektname“ ausführen.
Öffnen Sie es in VSCode, indem Sie dann diesen Befehlscode ausführen. (Richten Sie diesen Befehl ein, falls Sie dies noch nicht getan haben)
Entfernen Sie die Heizplatte
Im App-Ordner befindet sich eine Datei namens page.tsx. Diese enthält den gesamten Code, der im Boilerplate gerendert wird.
Entfernen Sie diesen Code und behalten Sie vorerst ein Div oder Fragment bei. Hier ist ein Beispiel:
// app/page.tsx
export default function Home() {
return <div></div>;
}
Es gibt auch ein Stylesheet für die Seite im App-Ordner. Es heißt page.module.css und Sie können es öffnen, alle darin enthaltenen Stile auswählen und löschen.
Lassen Sie uns unsere Metadaten ändern und klarer machen, was unsere App tut. Aktualisieren Sie layout.tsx wie folgt:
// app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "Cat Pics",
description: "Bringing cats your way with experimental CSS",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Fügen Sie auch ein Katzen-Favicon hinzu (wie Sie unter „Weiter“ ein Favicon hinzufügen)!
Erstellen Sie eine .env-Datei
Erstellen Sie eine .env-Datei im Stammverzeichnis des Projekts. Hier speichern wir den API-Schlüssel von The Cat API.
Melden Sie sich für die Cat-API an
Melden Sie sich für einen kostenlosen API-Schlüssel von The Cat API an. Nach der ersten Anmeldung erhalten Sie eine E-Mail mit Ihrem API-Schlüssel. Kopieren Sie diesen API-Schlüssel und erstellen Sie eine neue Variable in .env. Ich nenne meinen Schlüssel CAT_KEY.
Ihre lokale .env sollte so aussehen: CAT_KEY=your_api_key. Wenn Sie dies bereitstellen, stellen Sie sicher, dass Sie es auch dort hinzufügen, wo es bereitgestellt wird.
Bringen Sie die Katzenbilder mit!
Ich nutze die oben genannten WebKit-Demos, um die Seite und Stile für die Katzenbilder zu erstellen. Hier rufen wir unsere API auf, kartieren die Ergebnisse und rendern die zurückgegebenen Bilder:
create-next-app@15.0.1 Ok to proceed? (y) y
Stylen Sie die Bilder
Nachdem wir nun die Bilder hochgeladen haben, sehen wir uns das CSS-Mauerwerk in Aktion an! Hier ist page.module.css:
, eine Seite aus dem Buch von WebKit
Would you like to use TypeScript? Yes Would you like to use ESLint? Yes Would you like to use Tailwind CSS? No Would you like your code inside a 'src/' directory? No Would you like to use App Router? (recommended) Yes Would you like to use Turbopack for next dev? No Would you like to customize the import alias (@/* by default)? No
Wenn Sie Ihre Dateien speichern und npm run dev in Ihrem Terminal ausführen, sollte eine Seite wie diese angezeigt werden (mit zufällig ausgewählten Bildern):
Darauf lässt sich noch viel Potenzial aufbauen! Die Bilder behalten ihre Qualität und ohne Medienabfragen fühlt sich die Seite responsive an. Sie können das, was hier zu CSS kommt, auf andere Weise nutzen. Theo hat sie in seinem Video vorgestellt, und die Demos von WebKit und Google tun das auch.
Es ist jetzt schön, Entwickler zu sein. Es werden viele tolle Tools, Funktionen, Laufzeiten und mehr entwickelt. Die Zeit wird zeigen, wie genau dies in CSS implementiert wird. Wie auch immer die Entscheidung fällt, die Erkenntnis ist, dass CSS immer cooler wird.
Sehen Sie sich das Repo an, das ich für dieses Projekt erstellt habe. Ich habe es auch auf Vercel bereitgestellt. Wenn Sie eines der beiden in den Voraussetzungen genannten Browser-Setups verwenden, können Sie es hier ausprobieren.
Sie können zum Spaß eine Seite erstellen, die Bilder von Katzen rendert, oder Dinge bei der Arbeit erledigen. Was halten Sie von diesen Funktionen für CSS? Wie werden Sie sie verwenden?
Das obige ist der detaillierte Inhalt vonCSS Masonry Catness. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!