Video Ekran Kayıtları 2025, Ocak

# 030: Gezinme için Sayfaları Çıkarma - CSS Hileleri

# 030: Gezinme için Sayfaları Çıkarma - CSS Hileleri

Bu sekiz üst düzey gezinme sekmesine sahibiz, ancak Ana Sayfa "çalışan" tek sekmedir. Sırf üzerinde çalışacağımız bazı sayfalarımız olması için, "

# 027: Kod Sözdizimi Vurgulama, Bölüm 1 - CSS Hileleri

# 027: Kod Sözdizimi Vurgulama, Bölüm 1 - CSS Hileleri

Hatırlayabildiğim kadarıyla, CSS Hilelerindeki kod bloğuna sözdizimi vurgulamasını uygulamak için Google Code Prettify'ı kullandım. Biliyorsun, "gibi bir satırda nerede

# 028: Kod Sözdizimi Vurgulama, Bölüm 2 - CSS Hileleri

# 028: Kod Sözdizimi Vurgulama, Bölüm 2 - CSS Hileleri

Prism.js'yi yeni kurduk ve çalıştırdık. Bu ekran video kaydında Yarın Teması adlı bir tema buluyoruz ve renklerini söz dizimine katıyoruz "

# 026: Yazı Tipografisi, 2. Bölüm - CSS Hileleri

# 026: Yazı Tipografisi, 2. Bölüm - CSS Hileleri

Başlıklar üzerinde biraz çalışma yaptık, ancak bu ekran video kaydında bunlara daha fazla değineceğiz. Başlıklar, herhangi bir sitenin çok önemli bir yönüdür. İyi iş,"

# 025: Yazı Tipografisi, 1. Bölüm - CSS Hileleri

# 025: Yazı Tipografisi, 1. Bölüm - CSS Hileleri

Artık üzerinde çalışacağımız bir blog yazısı alanımız olduğuna göre, blog yazısı tipografisine gerçekten girebiliriz. Muhtemelen sitedeki en önemli tipografi "

# 023: Tipografiyi Normalleştirmekten Çıkarma - CSS Hileleri

# 023: Tipografiyi Normalleştirmekten Çıkarma - CSS Hileleri

Sitedeki tipografinin büyük çoğunluğu için ayrı bir dosyaya (.scss) sahip olmanın çok güzel olduğunu düşünüyorum. Normalize oldukça fazla tipografiye sahip "

# 024: Typecast'te Tipografi ile Oynamak - CSS Hileleri

# 024: Typecast'te Tipografi ile Oynamak - CSS Hileleri

Typecast (bu çekim sırasında beta sürümünde), web tipografisiyle oynamak için gerçekten temiz bir web uygulamasıdır. Oyun oynamak için harika bir arayüz sağlar

# 020: Izgarayı Tamamlama ve Modülleri Kurma - CSS Hileleri

# 020: Izgarayı Tamamlama ve Modülleri Kurma - CSS Hileleri

"Izgaraları Fazla Düşünme" konseptini sürdürdüğümüzde, sadece bazı basit dolguları kullanarak ızgarada olukların oluşmasını sağlıyoruz. Dolgu numarasını saklıyoruz "

# 022: Esnek Görüntüler (Şekiller ve Figürler) - CSS Hileleri

# 022: Esnek Görüntüler (Şekiller ve Figürler) - CSS Hileleri

Bazı tipografi çalışması yapmadan önce, resimlerin makale alanı ve ızgaranın dışında patladığı can sıkıcı şeyi düzelteceğimizi düşündüm. Kullanılıyor "

# 021: Dahil Edilebilen Parçalara Ayrılma - CSS Hileleri

# 021: Dahil Edilebilen Parçalara Ayrılma - CSS Hileleri

Artık özel bir yerel alan çalıştırdığımıza göre, PHP kullanabiliriz. MAMP'deki "P", "PHP" =) içindir. PHP kullanmak, include'i kullanabileceğimiz anlamına gelir. Örneğin: "

# 018: Projemizin Pusula kullanmasını sağlama - CSS Hileleri

# 018: Projemizin Pusula kullanmasını sağlama - CSS Hileleri

CSS3 maddelerine (gradyanlar gibi) yardımcı olmak için kendi Sass @mixins'imizi yazabilirdik, ancak Compass adında zaten var olan bir Sass çerçevesi var.

# 019: Basit Bir Izgara Oluşturma - CSS Hileleri

# 019: Basit Bir Izgara Oluşturma - CSS Hileleri

Site tasarımı çok ızgara benzeri olacak şekilde şekilleniyor. Modüllerimiz bir ızgaraya çok temiz bir şekilde yerleştirilecektir. Ancak ızgaralar karmaşık ve tuhaf değil mi? Ve belki biz "

# 017: MAMP ile Yerel URL Ayarlama - CSS Hileleri

# 017: MAMP ile Yerel URL Ayarlama - CSS Hileleri

Bu süper hızlı ekran video kaydında, yerel geliştirme için kullanabileceğimiz bir URL oluşturmak için MAMP kullanıyoruz. Bu, birkaç nedenden dolayı yararlıdır: "

# 016: Sass'ta Medya Sorgularını Kullanma - CSS Hileleri

# 016: Sass'ta Medya Sorgularını Kullanma - CSS Hileleri

CSS'de @media sorguları kavramını tanıtıyoruz. Bu projede Sass kullanmanın bize sağladığı şeylerin çoğu KURU kalmaktır (kendinizi tekrar etmeyin). Yaptık"

# 015: Bir Simge Yazı Tipiyle Gezintiye Simge Ekleme - CSS Hileleri

# 015: Bir Simge Yazı Tipiyle Gezintiye Simge Ekleme - CSS Hileleri

Logo türünü biraz değiştirerek başlıyoruz, ancak ardından ana gezinmeye simgeler eklemeye başlıyoruz. Photoshop'ta gezinmeyi tasarlarken (Video "

# 014: Typekit ile Özel Yazı Tipleri - CSS Hileleri

# 014: Typekit ile Özel Yazı Tipleri - CSS Hileleri

Typekit'te v10 için yeni bir Kit kurduk. Marka bilinci oluşturmak için şimdilik Proxima Nova Soft'u ve HF&J yazı tiplerine yakın görünen diğer yazı tiplerini kullanacağız.

# 012: Üstbilgi / Logoyu CSS Oluşturma - CSS Hileleri

# 012: Üstbilgi / Logoyu CSS Oluşturma - CSS Hileleri

Şimdiye kadar gerçek web sitesi Photoshop tasarımımıza pek benzemiyor. Bu ekran video kaydında, en baştan başlayarak tam da bunu yapacağız. "

# 013: Gezinme Yapısını CSS Oluşturma - CSS Hileleri

# 013: Gezinme Yapısını CSS Oluşturma - CSS Hileleri

Başlığı "sayfanın sol kenarına dokunurken, logonun sol kenarını ve ana içerik alanını hizalamak için bazı konumlandırma hileleri kullanıyoruz"

# 011: CSS Temelimizi Normalleştirme - CSS Hileleri

# 011: CSS Temelimizi Normalleştirme - CSS Hileleri

Kullanıcı aracısı (varsayılan) CSS'yi çoğu öğeden kaldırmak genellikle iyi bir fikirdir. Bu uzun zamandır "evrensel" sıfırlamalar veya Eric gibi şeyler tarafından yapılıyor.

# 010: HTML Yazmaya Başlamak - CSS Hileleri

# 010: HTML Yazmaya Başlamak - CSS Hileleri

Photoshop mockup'ımıza bakarken, neye baktığımızı açıklamak için HTML yazmaya başlıyoruz. Elbette HTML5'i ne zaman üreterse kullanıyoruz "

# 007: Photoshopping Simgeleri ve Gezintiye Metin - CSS Hileleri

# 007: Photoshopping Simgeleri ve Gezintiye Metin - CSS Hileleri

Sadece nasıl sığacağını görmek, boyutlandırma, renkler vb. Üzerinde çalışmak için metni ana gezinmeye bırakmaya başladık. Metnin bir kısmı oldukça sıkı. "

# 009: Yerel Geliştirme Ortamımızı Kurmak - CSS Hileleri

# 009: Yerel Geliştirme Ortamımızı Kurmak - CSS Hileleri

Photoshop'ta bu tasarım için kesinlikle "bitmiş" değiliz, ancak tarayıcıda bu tasarımı oluşturmaya başlamak için yeterince çalışmamız gerekiyor. Sonra"

# 006: Ana Gezintiyi Photoshop'ta Kullanmak - CSS Hileleri

# 006: Ana Gezintiyi Photoshop'ta Kullanmak - CSS Hileleri

Sitenin üst düzey (ana) navigasyonunu tasarlamaya başladık. Masaüstü boyutundaki ekranla başlıyoruz (kuşkusuz keyfi bir genişlikte) ama "

# 005: Hafif Boyut Ekleme - CSS Hileleri

# 005: Hafif Boyut Ekleme - CSS Hileleri

"Kağıt yığını" görünümü vermek için ana başlık / markalama kutusunun altına bazı ekstra katmanlar ekliyoruz. Büyük bir metafor veya başka bir şey yok, sadece biraz görsellik katıyor "

# 008: Modül Modelini Photoshop'ta Oluşturma - CSS Hileleri

# 008: Modül Modelini Photoshop'ta Oluşturma - CSS Hileleri

Sitenin tamamı "modüllere" dayalı olacak. Her küçük şey kelimenin tam anlamıyla bir kutuda olacak (sonuçta hem görsel hem de kodda). Biz"

# 003: İçerik Stratejisi Oturumu - CSS Hileleri

# 003: İçerik Stratejisi Oturumu - CSS Hileleri

Bu, Erin Kissane ve benim aramdaki Skype görüşmesinin ses kaydı. Erin kitabı içerik stratejisi üzerine yazdı, bu yüzden ondan yardım aldığım için şanslıydım ve "

# 004: Photoshop, Arka Plan Dokusu ve Ana Markalaştırmada Başlama - CSS Hileleri

# 004: Photoshop, Arka Plan Dokusu ve Ana Markalaştırmada Başlama - CSS Hileleri

Tarayıcıda tasarım yapmak harika bir şey, ancak Photoshop ile başlamak, en çok ihtiyacım olduğunda, boş tuvale baktığımda beni en yaratıcı şekilde tutuyor. "

# 001: İçerik Envanterini Alma - CSS Hileleri

# 001: İçerik Envanterini Alma - CSS Hileleri

Hoşgeldiniz! Bu tam bir yolculuk olacak ve tüm yolculuklar gibi bu da tek bir adımla başlıyor. İlk adımımız, "

# 002: Yeniden Tasarım Hedeflerini Belirleme - CSS Hileleri

# 002: Yeniden Tasarım Hedeflerini Belirleme - CSS Hileleri

Bu yeniden tasarım, yalnızca yeniden tasarlama uğruna yeniden tasarım değildir. Bir siteyi geliştirebileceğiniz akla gelebilecek her şekilde siteyi geliştirmek istiyorum. Biri"

35: Araçlarla SVG'yi Optimize Etme - CSS Hileleri

35: Araçlarla SVG'yi Optimize Etme - CSS Hileleri

SVG'yi elle optimize etmekten zaten bahsetmiştik. Ayrıntı ve ne tür şeylerin birleştirilebileceği veya kaldırılabileceği konusunda manuel olarak seçim yapma Bunda"