Video Ekran Kayıtları 2025, Ocak
Nick'in illüstrasyonunda kafalar için üç farklı katman vardı. Sadece biraz farklı varyasyonlardır. Görüntüleri bir animasyonla değiştirebiliriz "
Bu tasarım üzerinde çalışırken jQuery 1.8 yayınlandı. Bu, siteleri geliştirirken bu tür şeylerin olacağına güvenmek için hızlı bir videodur "
Temel galeri başlığımız yerinde, ancak Erica'nın orijinal resme koyduğu küçük mavi insanlar eksik. Bunun hakkında konuşmuştuk "
Galerinin özel başlığını yeni yerleştirdik, bu yüzden biz oradayken, başka bir özel başlık eklemeye devam edelim. bu "tarafından yapıldı
Sitenin ana sayfanın ötesinde yedi farklı ana alanı vardır. Bu yüzden, tasarımlar yapması için yedi farklı illüstratör tuttum. Bu biziz "
Şimdiye kadar, herhangi bir sürüm kontrolü kullanmadan yerel olarak kod değişiklikleri yapıyoruz. Bu sitenin karmaşıklığı arttıkça, "
Duyarlı tasarıma iyi bir başlangıç yaptık. En küçük ekran boyutlarındaki menü 2x4 ızgaraya bölünür. Ekrana çok iyi uyuyor ama "
Galeri için kurduğumuz ızgaraya biraz duyarlılık katıyoruz. En geniş ekranlarda, dört sütuna ayarladık. Sonra eklemeye başlarız "
Sütun düzeninin güzel bir şekilde yüklenmesini sağlamakta yaşadığımız sorunları çözdük. Düzeltme, "
Bu yeniden tasarım sürecinin başlangıcından beri aklımda olan Galeri alanının düzenini incelemeye başlıyoruz. Çoğunlukla "
Galerinin ızgara düzenine sahibiz. Maalesef yüklenmesi biraz ani ve riskli. Bunun nedeni, CSS3 sütunlarının "
Gezinmemizin çalışması (Video # 030) ve siteyi tıklayabilirsiniz, ancak bu altta ne var?
CSS Hileleri konusunda uzun bir anket geleneği vardır. Eğlencelidirler, iyi önemli veriler toplarlar ve insanların siteyle olan bağlantısını arttırırlar. Nişan FTW! "
Tamamen iyi bir anket aracıyla ayrıldık. Tipografi temiz ve her şey mükemmel şekilde kullanılabilir. Ancak, tam olarak zorlayıcı ya da eğlenceli değildi. Biz"
Sitenin ana kenar çubuğundaki üst modül, CSS Tricks'in ana sponsoru olan Treehouse'a aittir. Ryan Carson ile yaptığım bir sohbete dayanarak, "
Arama tasarımı, "bebek ayı" (küçük mobil) boyut aralığımıza gelene kadar iyi çalışıyor. Orada farklı bir şey yapmalıyız. Biraz yer açıyoruz "
Sanırım bu seride ilk defa, doğrudan tarayıcıda çalışarak tasarıma bazı yeni şeyler ekleyeceğiz (Photoshop'ta başlamıyoruz ")
Bir masaüstü tarayıcısını çok dar bir şekilde daraltmak, size duyarlı bir tasarımın nasıl çalıştığına dair belirsiz bir fikir verebilir, ancak bu, "
Elimizdeki reklam, büyük / masaüstü boyutlu ekranlar için harikadır, ancak daha küçük ekranlarda oldukça hızlı bir şekilde başarısız olmaya başlar. Zaten bazı kesme noktalarımız var "
Normal durumunda bir düğmenin görünümünü yarattık, ancak bunun gibi bir 3B düğme "basılmış" bir durum için yalvarıyor. Yaptığımız şey daha koyu bir renk eklemektir "
Yeni tasarladığımız En İyi Ağaç Evi Reklamını HTML ve CSS Oluşturmaya atlamak amacıyla yola çıkıyoruz, ancak elbette başlar başlamaz raydan çıkıyoruz "
Sayfanın üst kısmında Treehouse reklamı için işaretleme var, ancak yapmamız gereken bazı şekillendirme işlerimiz var. Ağaç grafiğinin kendisiyle başlıyoruz. Biz "
Başlıkta büyük miktarda açık alan bıraktık. En başından beri, bunun CSS-Tricks'in ana sponsoru Treehouse için olacağını biliyordum. Bunda"
Arama alanını bitirmek için biraz daha işimiz var. Üç boyutlu olanı eklemediğimizi fark ettiğimde, sadece bir saniyeliğine yanılgıya düşüyoruz "
Video # 034'te kaldığımız yerden devam ediyoruz ve arama alanını oluşturmaya devam ediyoruz. Bu sefer aramanın "açık" durumuna, inşa etmeye odaklanıyoruz
Küçük bir sıkıntıyı çözmek için aramaya biraz ara verdik. "FOUT", "Stilsiz Metin Flaşı" anlamına gelir. @ Font-face "
Artık arama alanıyla başarmayı umduğumuz şeyi Photoshop yaptığımıza göre, onu HTML ve CSS ile oluşturmaya başladık. Zaten simge yazı tipimiz var "
CSS Hileleri hakkında çok fazla içerik var. Tasarımını biraz zorlaştıran şeylerden biri de bu. Tasarımla temiz kalsak da "
Blog yazısı modülümüzle oynayarak başlıyoruz, boşluklarla uğraşıyoruz. Ayrıca modülün sol üst kısmındaki küçük renkli kareyi de ekliyoruz, "
Bu süper hızlı videoda, ana gezinmedeki geçerli sayfa öğesinin o sayfa "olduğunda vurgulanmasını sağlamak için gereken tüm CSS'yi ekledik"