Neugestaltung eines kartenbasierten Tumblr-Layouts mit CSS-Netz

Dieses Tutorial zeigt, wie ein reaktionsschnelles, gitterbasiertes Kartenlayout erstellt wird, das von einem Tumblr-Design unter Verwendung von CSS-Raster inspiriert ist und einen Fallback für ältere Browser mit Floats mit Floats erstellt. Wir werden ein Layout mit einer Header -Karte und mehreren Themenkarten erstellen, die jeweils ein Bild und einen Titel enthalten.

Das endgültige Design wird vollständig reaktionsschnell sein und sich an verschiedene Bildschirmgrößen anpassen und gleichzeitig eine konsistente visuelle Anziehungskraft beibehalten. Die Funktionalität der Auswahl von Themen wird in diesem Tutorial nicht implementiert. Wir konzentrieren uns ausschließlich auf das visuelle Netzlayout.

Schlüsselmerkmale:

<li> CSS -Gitter: Die primäre Layout -Engine für Reaktionsfähigkeit und Flexibilität. <li> Float Fallback: sorgt für die Kompatibilität mit älteren Browsern, die kein CSS -Gitter unterstützen. <li> SASS: Wird zum effizienten Styling mit Variablen und Mischungen verwendet. <li> Interaktive Elemente: Schwebe- und Fokusffekte für eine verbesserte Benutzererfahrung. <li> Barrierefreiheit: Tastaturnavigation wird berücksichtigt. <li> Browserkompatibilität: befasst sich mit potenziellen Problemen mit Funktionen wie und object-fit. :focus-within

Markup -Struktur:

Die HTML besteht aus einer nicht ordnungsgemäßen Liste ( <p> </p>) mit der Klasse "Grid", die Listenelemente enthält ( <code><ul></ul> ), die einzelne Karten darstellen. Jede Themenkarte (<li>) enthält einen Link (<li class="card">), der den Titel (<a></a>) und das Bild ( <img src="https://img.php.cn/" alt="Neugestaltung einwickelt Ein kartenbasiertes Tumblr-Layout mit CSS-Raster "> <code><h2></h2> & lt;!-Weitere Themenkarten-& gt; <img src="https://img.php.cn/" alt="Redesigning a Card-based Tumblr Layout with CSS Grid "> <!-- More topic cards -->

Layout -Implementierung (CSS -Gitter):

Das CSS -Gitterlayout wird unter Verwendung von SASS -Variablen zur Wartbarkeit und Reaktionsfähigkeit definiert:

<code class="language-scss">$item-size: 210px;
$col-gutter: 10px;
$vp-gutter: $col-gutter;
$max-cols: 5;

.grid {
  display: grid;
  grid-gap: $col-gutter;
  padding: 0 $vp-gutter;
  grid-template-columns: repeat(auto-fill, $item-size);
  grid-auto-rows: $item-size;
  max-width: grid-width($max-cols); // Function defined below
  justify-content: center;
  margin: 40px auto;
}

@function grid-width($num-cols) {
  @return $num-cols * $item-size + ($num-cols - 1) * $col-gutter;
}

// Media queries (Sass mixin) to handle header card spanning
@mixin when-n-cols($n) {
  @media screen and (min-width: #{grid-width($n) + 2 * $vp-gutter + $scrollbar-size}) {
    @content;
  }
}

@include when-n-cols(2) {
  .grid .header {
    grid-row: span 2;
    grid-column: span 2;
  }
}

// ... (Styling for cards and header) ...</code>

Kartenstyling:

Das CSS stilft die Karten und stellt sicher, dass die Bilder den gesamten Kartenbereich mit object-fit: cover abdecken, und fügt eine radiale Gradientenüberlagerung für einen verbesserten Kontrast hinzu. Interaktive Schwebe- und Fokusffekte werden unter Verwendung von transform: scale() und CSS -Übergängen implementiert. Für Browser, der :focus-within Unterstützung fehlt, ist ein Fallback -Umriss bereitgestellt.

float fallback:

Für Browser ohne CSS -Rasterunterstützung wird ein Fallback -Layout mit Floats implementiert. Dies gewährleistet ein ähnliches visuelles Erscheinungsbild und ein ähnliches Verhalten. Das Float -Layout verwendet Medienabfragen, um die Anzahl der Spalten basierend auf der Bildschirmgröße anzupassen. Die @supports -Regel stellt sicher, dass das Float -Layout nur dann gilt, wenn CSS -Gitter nicht unterstützt wird.

Dieser detaillierte Umriss bietet ein umfassendes Verständnis des Ansatzes des Tutorials. Der vollständige Code, einschließlich Sass -Mixins und Funktionen, wäre zu umfangreich, um hier einzuschließen. Die bereitgestellten Snippets veranschaulichen jedoch die Kernkonzepte und -Techniken, die beim Aufbau dieses Responsive -Kartenlayouts verwendet werden. Das Verweisen auf das ursprüngliche CodePen -Beispiel würde die vollständige Implementierung liefern.

Das obige ist der detaillierte Inhalt vonNeugestaltung eines kartenbasierten Tumblr-Layouts mit CSS-Netz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!