Perkara kecil di laman web peribadi saya

Baru -baru ini, saya memberikan laman web peribadi saya Refresh - projek solo yang menyeronokkan! Ia adalah saluran kreatif saya, ruang untuk ekspresi diri dan eksperimen. Ini bukan pembaikpulihan lengkap, lebih seperti cat segar. Mari kita meneroka beberapa teknik menarik yang saya gunakan.

Tipografi dengan fon Hoefler

Keluarga Font Inkwell adalah hebat! Saya suka mencampurkan berat, serif, sans-serifs, dan gaya permodalan. Walaupun saya menggunakan Inkwell dalam reka bentuk terdahulu, saya rasa ia agak suka bermain untuk blog post blog. Gaya penulisan saya adalah kasual, tetapi tidak semestinya, dan sifat riang Inkwell tidak sesuai dengan topik yang lebih serius. Sebelum ini, saya berpasangan dengan sans yang ideal, tetapi gabungan itu terasa.

Kali ini, saya memilih Whitney untuk salinan badan. Ia mengekalkan rasa ringan tetapi berfungsi dengan baik dengan kandungan yang lebih mudah.

Menggayakan blogroll dengan sass

Zebra-Striping Jadual adalah mudah:

 tr: nth-child (walaupun) {
  latar belakang warna: var (-warna-1);
}
tr: nth-child (ganjil) {
  latar belakang warna: var (-color-2);
}

Tetapi bagaimana dengan berbasikal melalui empat warna? The :nth-child Selector, dengan offset, mengendalikan ini dengan kemas. Berikut adalah contoh sass untuk item senarai:

 li {
  &: nth-child (4n) a {
    Warna: $ biru;
  }
  &: nth-anak (4n 1) a {
    Warna: $ kuning;
  }
  &: nth-child (4n 2) a {
    Warna: $ merah;
  }
  &: nth-child (4n 3) a {
    Warna: $ ungu;
  }
}

Pendekatan ini mencipta blogroll berwarna. Saya menggunakan Sass kerana kehadirannya yang ada dalam projek itu; CodeKit mengendalikan kompilasi dengan mudah. Dan ya, blogrolls sejuk lagi!

Embeds youtube yang cekap

Saya menggunakan teknik YouTube klik-ke-beban yang bijak. Daripada membenamkan iframe YouTube penuh, yang memuat banyak sumber, saya menggunakan pemegang tempat imej statik. Ini meningkatkan prestasi dengan ketara sambil mengekalkan pengalaman pengguna yang sama.

<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: Apa yang salah? - Edisi Wisecrack" width="560"></iframe>

Jenis Pos tersuai dan struktur data

Saya seorang peguam bela yang kuat untuk data berstruktur. Di WordPress, ini sering melibatkan jenis pos tersuai yang digabungkan dengan plugin seperti bidang adat maju. Ini membolehkan pengendalian data yang fleksibel dan memudahkan pengubahsuaian tapak masa depan.

Generator Bio Dinamik

Bahagian bio saya tidak kompleks: saya mencipta 18<div> Elemen (3 panjang <em>2 gaya</em> 3 jenis kod) dan gunakan JavaScript untuk beralih di antara mereka. Rentetan kelas dikira berdasarkan pilihan pengguna, mendedahkan bio yang sepadan sambil menyembunyikan orang lain.<pre class="brush:php;toolbar:false"> $ (&quot;. Bio-pilihan input&quot;). (&quot;perubahan&quot;, fungsi () { var lengthclass = &quot;.bio-&quot; $ (&quot;input [name = length]: diperiksa&quot;). attr (&quot;id&quot;); var styleclass = &quot;.bio-&quot; $ (&quot;input [name = style]: diperiksa&quot;). attr (&quot;id&quot;); var codeClass = &quot;.bio-&quot; $ (&quot;input [name = code]: diperiksa&quot;). attr (&quot;id&quot;); var selector = codeclass styleclass lengthclass; $ (&quot;. Bio&quot;). Sembunyikan (); $ (pemilih) .show (); });</pre> <p> Saya menggunakan jQuery kerana ia telah diintegrasikan ke dalam laman web ini (bersama -sama dengan Fitvids). Penulisan semula masa depan mungkin melibatkan membuang jQuery dan menyelaraskan pilihan bio.</p> <h3 id="ztext-js-dan-tajuk-animasi"> ztext.js dan tajuk animasi</h3> <p> Header menggunakan ztext.js, menambah sentuhan bakat Webby. Tahap animasi ini mungkin kurang sesuai untuk tapak trafik tinggi, tetapi ia berfungsi dengan baik untuk tapak dengan kekerapan pelawat yang lebih rendah.</p> <h3 id="Latar-Belakang-SVG-dan-Kesan-Footer"> Latar Belakang SVG dan Kesan Footer</h3> <p> Saya menggunakan tapak Latar Belakang SVG yang dikemas kini untuk membuat latar belakang. Saya memilih untuk <code>background-attachment: fixed , dan termasuk kesan slaid keluar pada desktop. Kesan footer mungkin memerlukan perbaikan; Ia lebih berkesan dengan latar belakang yang dinamik.

Gaya pautan yang konsisten dengan penapis

Bahagian yang berbeza menggunakan pelbagai warna sorotan, dan saya mengaitkan pautan seksyen ke warna masing -masing. Walaupun ini mungkin dibahaskan (warna pautan yang konsisten sering disukai), saya dapati ia menarik secara visual. filter: brightness(120%); Trick memastikan gaya berlegar dan fokus yang konsisten merentasi semua warna, memudahkan gaya.

 A: Fokus, .Button: Fokus,
A: Hover, .button: hover {
  Penapis: Kecerahan (120%);
}

Ini adalah kemas kini yang agak cepat, sebahagian besarnya diilhamkan oleh cabaran codepen. Walau bagaimanapun, seperti biasa, satu perubahan kecil membawa kepada yang lain, dan saya akhirnya membuat pengubahsuaian yang lebih penting daripada yang dirancang pada awalnya!