Video Screencast 2025, Februari
Ilustrasi Nick memiliki tiga lapisan berbeda untuk kepalanya. Mereka hanyalah variasi yang sedikit berbeda. Kami dapat menukar gambar dengan animasi "
Saat saya mengerjakan desain ini, jQuery 1.8 dirilis. Ini hanyalah video singkat untuk mengandalkan fakta bahwa hal semacam ini terjadi saat Anda mengembangkan situs "
Kami memiliki tajuk galeri dasar di tempatnya, tetapi tidak ada orang biru kecil yang Erica taruh di ilustrasi aslinya. Kami telah membicarakannya di "
Kami baru saja mendapatkan tajuk khusus untuk Galeri, jadi sementara kami berada di, mari terus menambahkan tajuk khusus lainnya. yang ini dilakukan oleh "
Ada tujuh area utama situs yang berbeda di luar beranda. Jadi, saya menyewa tujuh ilustrator berbeda untuk membuat desain. Ini yang pertama kami "
Hingga saat ini, kami telah membuat perubahan kode secara lokal tanpa menggunakan kontrol versi apa pun. Dengan meningkatnya kompleksitas situs ini, itu menjadi "
Kami memiliki awal yang baik dalam desain responsif. Menu pada ukuran layar terkecil dipecah menjadi kotak 2x4. Ini pas di layar, tapi "
Kami menambahkan beberapa responsivitas ke grid yang telah kami siapkan untuk Galeri. Pada layar terluas, kami mengaturnya di empat kolom. Lalu kami mulai menambahkan "
Di mana kami mencari tahu masalah yang kami hadapi dengan membuat tata letak kolom dimuat dengan baik. Perbaikannya adalah menghapus CSS yang membuat "
Kami mulai menggali tata letak area Galeri, yang merupakan sesuatu yang ada di pikiran saya sejak awal proses desain ulang ini. Kebanyakan"
Kami memiliki tata letak kisi untuk Galeri. Sayangnya pemuatannya agak mendadak dan miring. Ini karena kolom CSS3 dirancang untuk "
Kami telah menghabiskan sedikit waktu untuk mematikan halaman sehingga navigasi kami berfungsi (Video # 030) dan Anda dapat mengklik di sekitar situs, tetapi apa yang ada di sub "
Ada tradisi panjang jajak pendapat tentang CSS-Tricks. Mereka menyenangkan, mengumpulkan data penting yang baik, dan meningkatkan koneksi orang ke situs. Keterlibatan FTW! "
Kami tinggalkan dengan widget polling yang benar-benar layak. Tipografinya bersih dan semuanya dapat digunakan dengan sempurna. Namun, itu tidak terlalu menarik atau menyenangkan. Kita"
Modul teratas di sidebar utama situs adalah milik Treehouse, sebagai sponsor utama CSS-Tricks. Berdasarkan percakapan saya dengan Ryan Carson, "
Desain pencarian berfungsi dengan baik sampai kita mencapai ukuran istirahat "bayi beruang" (ponsel kecil) kita. Kami harus melakukan sesuatu yang berbeda di sana. Kami membuat beberapa ruang "
Untuk pertama kalinya dalam seri ini, kami akan menambahkan beberapa hal baru ke desain secara langsung dengan bekerja di browser (tidak dimulai di Photoshop "
Menekan browser desktop yang sangat sempit dapat memberi Anda gambaran yang tidak jelas tentang cara kerja desain responsif, tetapi ini bukan representasi yang akurat dari "
Iklan yang kami pasang sangat bagus untuk layar berukuran besar / desktop, tetapi mulai gagal cukup cepat di layar yang lebih kecil. Kami sudah memiliki beberapa breakpoint "
Kami telah membuat tampilan tombol dalam keadaan biasa, tetapi tombol 3D seperti itu meminta status "didorong". Yang kami lakukan adalah menambahkan warna yang lebih gelap ke "
Kami memulai dengan maksud untuk beralih ke HTML & CSS untuk Iklan Rumah Pohon Teratas yang baru saja kami rancang, tetapi tentu saja keluar dari jalur segera setelah kami mulai "
Kami memiliki markup untuk iklan Treehouse di bagian atas halaman, tetapi kami memiliki beberapa pekerjaan gaya yang harus dilakukan. Kami mulai dengan grafik pohon itu sendiri. Kami "
Kami telah meninggalkan banyak ruang terbuka di header. Sejak awal, saya tahu ini akan menjadi sponsor utama CSS-Tricks, Treehouse. Di dalam"
Kami memiliki sedikit pekerjaan yang harus dilakukan untuk menyelesaikan area pencarian. Kami teralihkan sesaat karena saya perhatikan kami tidak menambahkan tiga dimensi "
Kami melanjutkan dari bagian terakhir yang kami tinggalkan di Video # 034 dan terus membangun area pencarian. Kali ini kami berfokus pada keadaan "terbuka" dari penelusuran, membangun "
Kami mengambil sedikit istirahat dari mengerjakan penelusuran untuk menyelesaikan sedikit masalah yang mengganggu. "FOUT" menjadi "Flash of Unstyled Text". Ini adalah fenomena dimana @ font-face "
Sekarang kita telah melakukan photoshop tentang apa yang ingin kita capai dengan area pencarian, kita mulai membangunnya dengan HTML dan CSS. Kami sudah memiliki font ikon kami "
Ada banyak konten di CSS-Tricks. Itulah salah satu hal yang membuat desainnya sedikit menantang. Meskipun kami dapat tetap bersih dengan desainnya, kami "
Kami mulai dengan bermain-main dengan modul posting blog kami, mengotak-atik spasi. Kami juga menambahkan kotak kecil berwarna di kiri atas modul, "
Dalam video super cepat ini, kami menambahkan semua CSS yang diperlukan untuk memastikan item halaman saat ini di navigasi utama disorot saat halaman itu "