Video Ekran Kayıtları 2025, Ocak

Yorum tasarımı çok basit görünebilir. Ve budur! Ama bence bu durumda basit etkili. Yorumlar, CSS Hilelerinin çok önemli bir parçası "

Photoshop'u burada incelemeye ve yorum alanını tasarlamaya başlıyoruz. En üstten başlıyoruz, yani bireysel yorumların kendileri ("

Sahne arkasında yaptığım bazı homurdanma işlerine bakarak, yapılması gereken bazı şeyleri detaylandırarak başlıyoruz. "Geri kalanına eklemek gibi"

Sitenin Parçacıklar alanının ana sayfasını oluşturmaya çok yaklaştık. Hemen, ince ayarlamalar yapmaya ve daha fazla şey yapmaya başlıyoruz "

Parçacıklar alanı için "tamamlandı" tasarımıyla - şimdi biraz etkileşime geçebiliriz (okuyun: JavaScript). "Sayfasındaki bağlantılar için süper topal bir rollover ekliyoruz"

Parçacıklar alanının ana sayfası için artık çalışabileceğimiz bir Photoshop tasarımımız var. Eskisinden çok daha fazla göz atılabilir, ancak gökkuşağını koruyor "

Snippet alanına dalma zamanı! Yani, onun asıl içerik alanı. Başlığı zaten yerleştirdik. Parçacıklar alanı oldukça popüler. "

Bu ekran görüntüsünde Almanak bölümünü tamamlıyoruz. Almanak'ta oldukça açık bir hiyerarşi var. Gidiyor: Ana Sayfa> Almanak Ana Sayfası> Özellik veya Seçici> "

Burada biraz ileri atlıyoruz. Bu oldukça kapsamlı bir ekran video kaydı dizisi, ancak yaklaşık 40 saat ve tabii ki bu gerçek proje "

Zaten yerel bir etki alanında (v10.whatup) yerel olarak çalışıyoruz. Şimdi WordPress'e geçmeye başlama zamanı. Yerel olarak çalışmaya devam edeceğiz "

Bu sayfa çıktısında ihtiyacımız olan tüm içeriğe sahibiz ve başlığı yerinde tutuyoruz. Şimdi, içeriğe girdiğimiz tasarıma CSS eklemeye başlayabiliriz "

WordPress'te çalışmaya başladığımızda, yerel olarak çalışmak için canlı veritabanının tam bir kopyasını almak en iyisi olacaktır. Bazı web sitelerinde "

Artık Almanak'ın ana sayfasında doğru içeriği elde etmek için mücadele ettiğimize göre, CSS ile bazı gerçek stilleri inceleyebiliriz. Gitmeye karar verdik "

Bu ekran video kaydında, altbilgiye hakim olan turuncu renkli "Photostar" ı ele alıyoruz. Yıldızı Photoshop'ta ayrı bir dosyada oluşturuyoruz, böylece "

Alamanc'ın kafa vuruşu bu sefer Giovanni Difeterici'den geldi. Başlamak için zaten oluşturduğumuz birçok tekniği kullanıyoruz "

Videolar bölümü için özel başlık resmi bu kez Alyssa Nassner'dan geldi. Photoshop dosyasını düzenlemek için biraz zaman harcıyoruz ve "

Altbilgiyi oluşturmanın bu son ekran görüntüsünde, CodePen ve ShopTalk alanlarının olduğu alt altbilgi üzerinde çalışıyoruz. HTML'yi değiştirmeliyiz a "

Bu ekran video kaydında, altbilginin üst kısmındaki bağlantıların altındaki satırlara odaklanıyoruz. Hangi şeylerin olması gerektiğini bulmaya çalışıyoruz "

Parçacıkların başı bu sefer Reagan Ray tarafından geldi. Bu sefer Photoshop'ta biraz zaman harcadığımızdan emin olmak için işleri biraz karıştırıyoruz. "

Altbilgi için HTML yapısı yerinde olduğunda, bu altbilgiyi Photoshop'ta tasarladığımız gibi şekillendirmeye ve almaya başlamak için ihtiyacımız olan şey var. "

Bu, onu gerçekten oluşturmaya geçmeden önce, özellikle altbilgi hakkında yapacağımız son Photoshop çalışmasıdır. Bu ekran video kaydında biz "

Photoshop'ta alt bilgi için bir tasarım oluşturmaya çalışıyoruz. Hızlı hatırlatma: Photoshop'ta çalışıyorum çünkü atlamadan önce orada kendimi daha yaratıcı hissediyorum "

Bu ekran video kaydında, en alttaki altbilgiyi diğer en büyük iki projem olan CodePen'e bağlantılarla düzenleyerek biraz daha Photoshoppin işine giriyoruz. "

Altbilgi olan büyük yolculuğa çıkıyoruz! CSS-Tricks her zaman büyük bir süslü alt bilgiye sahipti ve bu tasarım da bir istisna olmayacak. Tamamen değil "

Photoshop'ta kullanıma hazır altbilgi tasarımımızla, onu statik HTML ve CSS modelimiz içinde oluşturmaya başlayabiliriz. İlk adım vermektir "

Siteye entegre edilecek başka bir BSA bölgemiz var. Bu biraz daha kolay olmalı çünkü zaten JavaScript'i kullanıyoruz ve sadece "

BuySellAds bölgelerimizin nasıl görünmesini istediğimize dair bir modelimiz var, o yüzden onu gerçekten oluşturmaya başlayalım. BuySellAds web sitesi ihtiyacımız olan kodu sağlıyor "

Şu anda gümrük Forumları başlığımızda eksik olan tek şey aslında "Forumlar" yazan kısımdır! Nick "anlamına gelen bir işaret tutan bir eli gösterdi"

Artık tam olarak hangi bölgelerde çalıştığımızı bildiğimize göre, Photoshop'a geri dönüyoruz ve bu reklam bölgelerinin nasıl görünmesini istediğimizle alay ediyoruz. Bir emsalimiz var "

Bildiğiniz gibi, CSS Hilelerindeki bazı reklamlar, ana Treehouse sponsoru gibi "kendi kendine yönetilir". Bunu üstlendim çünkü sadece bir "