Récemment, j'ai donné à mon site Web personnel un actualisation - un projet solo amusant! C'est mon débouché créatif, un espace pour l'expression de soi et l'expérimentation. Ce n'était pas une refonte complète, plus comme une nouvelle couche de peinture. Explorons certaines des techniques intéressantes que j'ai utilisées.

Typographie avec des polices de Hoefler

La famille Inkwell Font est fantastique! J'adore mélanger des poids, des serifs, des sans-serifs et des styles de capitalisation. Bien que j'utilise Inkwell dans le design précédent, je sentais que c'était un peu trop ludique pour le texte du corps des articles de blog. Mon style d'écriture est décontracté, mais pas toujours, et la nature joviale d'Inkwell ne convenait pas à des sujets plus sérieux. Auparavant, je l'ai associé à des SAN idéaux, mais la combinaison s'est sentie.

Cette fois, j'ai choisi Whitney pour la copie corporelle. Il maintient une sensation légère mais fonctionne bien avec un contenu plus simple.

Styliser un blogroll avec SASS

La coupe zèbre d'une table est simple:

 tr: nth-child (même) {
  Color en arrière-plan: var (- Color-1);
}
tr: nth-child (Odd) {
  Color d'arrière-plan: var (- color-2);
}

Mais qu'en est-il du vélo à travers quatre couleurs? Le sélecteur :nth-child , avec des décalages, le gère soigneusement. Voici un exemple SASS pour les éléments de liste:

 li {
  &: nth-child (4n) a {
    Couleur: $ bleu;
  }
  &: nth-child (4n 1) a {
    Couleur: $ jaune;
  }
  &: nth-child (4n 2) a {
    Couleur: $ rouge;
  }
  &: nth-child (4n 3) a {
    Couleur: $ violet;
  }
}

Cette approche a créé le blogroll colorisé. J'ai utilisé SASS en raison de sa présence existante dans le projet; Codekit a géré la compilation sans effort. Et oui, les blogrolls sont à nouveau cool!

Efficacez les intégres YouTube

J'ai utilisé une technique YouTube de clic-chargement intelligente. Au lieu d'incorporer un iframe YouTube complet, qui charge de nombreuses ressources, j'ai utilisé un espace réservé d'image statique. Cela améliore considérablement les performances tout en maintenant une expérience utilisateur similaire.

<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="The Dark Knight Rises: Qu'est-ce qui ne va pas? - édition Wisecrack" width="560"></iframe>

Types de publication et structure de données personnalisés

Je suis un ardent défenseur des données structurées. Dans WordPress, cela implique souvent des types de publication personnalisés combinés à un plugin comme des champs personnalisés avancés. Cela permet une manipulation flexible des données et simplifie les modifications futures du site.

Bio-générateur dynamique

Ma section bio n'est pas complexe: j'ai créé 18<div> éléments (3 longueurs <em>2 styles</em> 3 types de code) et utilisez JavaScript pour basculer entre eux. Une cha?ne de classe est calculée sur la base des sélections d'utilisateurs, révélant la biographie correspondante tout en cachant d'autres.<pre class="brush:php;toolbar:false"> $ (&quot;. Bio-Choices Input&quot;). sur (&quot;Change&quot;, fonction () { var longueurclass = &quot;.bio-&quot; $ (&quot;input [name = longueur]: vérifié&quot;). att (&quot;id&quot;); var styleclass = &quot;.bio-&quot; $ (&quot;input [name = style]: vérifié&quot;). attr (&quot;id&quot;); var codeclass = &quot;.bio-&quot; $ (&quot;input [name = code]: vérifié&quot;). attr (&quot;id&quot;); Var Selector = LongsClass StyleClass CodeClass; $ (&quot;. bio&quot;). hide (); $ (sélecteur) .show (); });</pre> <p> J'ai utilisé jQuery car il était déjà intégré au site (avec Fitvids). Une réécriture future pourrait impliquer de retirer JQuery et de rationaliser les options BIO.</p> <h3 id="ztext-js-et-en-têtes-animés"> ztext.js et en-têtes animés</h3> <p> L'en-tête utilise ztext.js, ajoutant une touche de flair webby. Ce niveau d'animation peut être moins adapté aux sites à fort trafic, mais il fonctionne bien pour un site avec une fréquence des visiteurs plus faible.</p> <h3 id="Défenses-SVG-et-effets-de-pied-de-page"> Défenses SVG et effets de pied de page</h3> <p> J'ai utilisé le site des arrière-plans SVG mis à jour pour créer l'arrière-plan. J'ai opté pour <code>background-attachment: fixed et inclus un effet de pied de page à glissière sur le bureau. L'effet de pied de page peut nécessiter un raffinement; C'est plus impactant avec un fond dynamique.

Style de liaison cohérent avec les filtres

Différentes sections utilisent des couleurs de surbrillance variables, et j'ai lié des liens de section vers leurs couleurs respectives. Bien que cela puisse être discutable (les couleurs de liaison cohérentes sont souvent préférées), je trouve que c'est visuellement attrayant. Le filter: brightness(120%); Trick assure des styles de volants et de mise au point cohérents dans toutes les couleurs, simplifiant le style.

 R: Focus, .Button: Focus,
A: Hover, .Button: Hover {
  Filtre: luminosité (120%);
}

Il s'agissait d'une mise à jour relativement rapide, largement inspirée par un défi Codepen. Cependant, comme toujours, un petit changement a conduit à un autre, et j'ai fini par apporter des modifications plus importantes que prévu initialement!