Kleine Dinge auf meiner persönlichen Seite

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.<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Nach dem Login kopieren</div></div> <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!

Das obige ist der detaillierte Inhalt vonKleine Dinge auf meiner persönlichen Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!