Vor kurzem habe ich meiner pers?nlichen Website eine Aktualisierung gegeben - ein lustiges Solo -Projekt! Es ist mein kreativer Outlet, ein Raum für Selbstausdruck und Experimentieren. Dies war keine vollst?ndige überholung, eher wie ein frischer Farbschicht. Erforschen wir einige der interessanten Techniken, die ich verwendet habe.

Typografie mit Hoefler -Schriftarten

Die Familie Inkwell Font ist fantastisch! Ich liebe es, Gewichte, Serife, Sans-Serifs und Kapitalisierungsstile zu mischen. W?hrend ich Inkwell im vorherigen Design verwendet habe, war es für einen Blog -Post -K?rpertext etwas zu spielerisch. Mein Schreibstil ist l?ssig, aber nicht immer, und Inkwells fr?hliche Natur passte nicht zu ernsteren Themen. Zuvor habe ich es mit idealen Sans gepaart, aber die Kombination fühlte sich aus.

Diesmal habe ich Whitney für die K?rperkopie ausgew?hlt. Es hat ein unbeschwertes Gefühl, funktioniert aber gut mit unkomplizierteren Inhalten.

Stylen einer Blogroll mit Sass

Zebra-Striping einer Tabelle ist einfach:

 TR: N-te-Kind (sogar) {
  Hintergrundfarbe: var (-color-1);
}
TR: N-te-Kind (ungerade) {
  Hintergrundfarbe: var (-color-2);
}

Aber was ist mit dem Radfahren durch vier Farben? Der :nth-child -Selektor mit Offsets verarbeitet dies ordentlich. Hier ist ein SASS -Beispiel für Listenelemente:

 li {
  &: N-te-Kind (4n) a {{
    Farbe: $ blau;
  }
  &: N-te-Kind (4n 1) a {{
    Farbe: $ gelb;
  }
  &: N-te-Kind (4n 2) a {{
    Farbe: $ rot;
  }
  &: N-te-Kind (4n 3) a {{
    Farbe: $ lila;
  }
}

Dieser Ansatz erzeugte den farbigen Blogroll. Ich habe SASS wegen seiner vorhandenen Pr?senz im Projekt verwendet. Codekit hat die Zusammenstellung mühelos behandelt. Und ja, Blogrolls sind wieder cool!

Effiziente YouTube -Einbettungen

Ich habe eine clevere Klick-Load-YouTube-Technik verwendet. Anstatt einen vollst?ndigen YouTube -Iframe einzubetten, der viele Ressourcen l?dt, habe ich einen statischen Image -Platzhalter verwendet. Dies verbessert die Leistung erheblich, w?hrend eine ?hnliche Benutzererfahrung aufrechterhalten wird.

<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Y8Wp3dafaMQ" srcdoc="*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}<a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'>?</a>" title="Der dunkle Ritter steigt: Was ist schief gelaufen? - Wisecrack Edition" width="560"></iframe>

Benutzerdefinierte Post -Typen und Datenstruktur

Ich bin ein starker Verfechter strukturierter Daten. In WordPress umfasst dies h?ufig benutzerdefinierte Post -Typen in Kombination mit einem Plugin wie erweiterten benutzerdefinierten Feldern. Dies erm?glicht eine flexible Datenbehandlung und vereinfacht zukünftige Modifikationen von Site.

Dynamischer Biogenerator

Mein Bioabschnitt ist nicht komplex: Ich habe 18 erstellt<div> Elemente (3 L?ngen <em>2 Styles</em> 3 -Code -Typen) und verwenden JavaScript, um zwischen ihnen zu wechseln. Eine Klassenzeichenfolge wird basierend auf der Benutzerauswahl berechnet, wodurch die entsprechende Biografie angezeigt wird, w?hrend Sie andere verstecken.<pre class="brush:php;toolbar:false"> $ (&quot;. Bio-Choices Eingabe&quot;). On (&quot;Change&quot;, function () { var lengthClass = &quot;.bio-&quot; $ (&quot;input [name = l?nge]: checked&quot;). attr (&quot;id&quot;); var styleclass = &quot;.bio-&quot; $ (&quot;input [name = style]: checked&quot;). attr (&quot;id&quot;); var coceclass = &quot;.bio-&quot; $ (&quot;input [name = code]: checked&quot;). attr (&quot;id&quot;); var selector = lengthClass styleclass codeclass; $ (&quot;. bio&quot;). hide (); $ (Selector) .show (); });</pre> <p> Ich habe JQuery verwendet, weil es bereits in die Website integriert war (zusammen mit Fitvids). Ein zukünftiges Umschreiben k?nnte das Entfernen von JQuery und die Straffung der Biooptionen beinhalten.</p> <h3 id="Ztext-js-und-animierte-Header"> Ztext.js und animierte Header</h3> <p> Der Header verwendet Ztext.js und fügt einen Hauch von Webby Flair hinzu. Diese Animationsstufe ist m?glicherweise weniger für hochverkehrsbedingte Websites geeignet, funktioniert jedoch gut für eine Site mit geringerer Besucherfrequenz.</p> <h3 id="SVG-Hintergründe-und-Fu?zeileneffekte"> SVG -Hintergründe und Fu?zeileneffekte</h3> <p> Ich habe die aktualisierte SVG -Hintergrund -Site verwendet, um den Hintergrund zu erstellen. Ich entschied mich für <code>background-attachment: fixed und habe einen Ausrutschen-Fu?zeile-Effekt auf den Desktop aufgenommen. Der Fu?zeile -Effekt k?nnte eine Verfeinerung erfordern. Es ist wirksamer mit einem dynamischen Hintergrund.

Konsistentes Link -Styling mit Filtern

Verschiedene Abschnitte verwenden unterschiedliche Highlight -Farben, und ich habe den Abschnitt Links zu ihren jeweiligen Farben verknüpft. Dies mag zwar umstritten sein (konsequente Verbindungsfarben werden oft bevorzugt), aber ich finde es visuell ansprechend. Der filter: brightness(120%); Trick sorgt für konsequente Schwebe- und Fokusstile in allen Farben und vereinfachte das Styling.

 A: Fokus,. Button: Fokus,
A: Hover, .Button: Hover {
  Filter: Helligkeit (120%);
}

Dies war ein relativ schnelles Update, das gr??tenteils von einer Codepen -Herausforderung inspiriert war. Wie immer führte eine kleine Ver?nderung jedoch zu einer anderen und ich nahm schlie?lich wichtigere Modifikationen vor als ursprünglich geplant!