Perşembe 26 Ocak 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Arayüz
  3. CSS ile Logolar Part 1: Netflix
 CSS ile Logolar Part 1: Netflix
Arayüz CSS Güncel

CSS ile Logolar Part 1: Netflix

Yazar : Sevim Selin Özsoy 1 Nisan 2022 0 Comment

Bu serimizde sizlerle birlikte, CSS kullanarak markaların logolarını nasıl oluşturabileceğimizi inceleyeceğiz! Logoları yaparken, hep beraber hem CSS ile ilgili unuttuğumuz şeyleri hatırlamış olacağız hem de CSS’in ne kadar esnek olabileceğini tartmış olacağız.

İlk olarak diğer marka logolarına göre biraz daha kolay olabileceğini düşündüğüm Netflix ile başlayacağız.

Netflix Logo Wallpapers - Top Free Netflix Logo Backgrounds -  WallpaperAccess

İlk Adım: Logoyu Analiz Etmek

Logo ana 3 çizgi kullanılarak tasarlanmış. İki paralel çizginin üzerine yine aynı boyutta bir çizgi eğik olarak konulmuş ve eğik çizgi, alttaki iki çizgiyle birleştiği yerde gölge oluşturmakta.

Çizgilerin alt kısmı, üst taraflarına göre yuvarlak uçlara sahip.

Logoyu Oluşturmaya Başlamak

Oluşturduğumuz projenin içine index.html ve style.css adlı iki dosya oluşturuyoruz. Ardından .html dosyamızın içine “Emmet” kullanarak html’in ana kısmını oluşturuyoruz.

.html dosyamızın içinde body yazan kısıma class’ı netflix olan bir div oluşturuyoruz.

Ardından da logoyu oluşturacağımız style.css dosyasını link etiketini kullanarak .html dosyamıza tanıtıyoruz.

Logomuzu oluşturacağımız style.css dosyasında düzenleme yapmaya başlayabiliriz. Öncelikle logomuzun ortada durması ve arka planının siyah olması için body’ye stil vermeliyiz.

Sıra logonun iki bacağını oluşturmaya geldi. .netflix class’ı verdiğimiz div’imize sağ ve sol olmak üzere iki border tanımlayacağız.

Burada border’ların height ve width özeliklerini değiştirmemeniz önemli! Şimdi eğik olan çizgiyi önceden oluşturduğumuz çizgilerin üstüne yerleştirmek için, before selector’ını kullanarak ekleyeceğiz.

transform: skewX(21.5deg) boyutlarını değiştirmeden eğmemizi sağlıyor. Son olarak logonun alt tarafındaki yuvarlaklığı oluşturacağız.

Bütün adımları tamamladıktan sonra logomuz bu şekilde gözüküyor:

Kodun tamamına bu linkten ulaşabilirsiniz! Umarım takip etmesi keyifli bir yazı olmuştur, bir sonraki logoda görüşmek üzere!

Etiketler: CSS css logo
Önceki Yazı
Sonraki Yazı

Sevim Selin Özsoy

editor

Süleyman Demirel Üniversitesi 4. sınıf bilgisayar mühendisliği öğrencisiyim. Front-end yazılımla ve tasarımla ilgileniyorum. Aktif olarak Süleyman Demirel Üniversitesinin bilgi işlemde part-time yazılımcı ve tasarımcı olarak çalışıyorum. Aynı zamanda da Webmaster Kitchen'da sosyal medya yöneticiliğini ve tasarımcılığını yapıyorum.

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.