• avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar

CSS ile Google Logosu Yapımı

Bu yazımızda CSS kullanarak Google logosu yapacağız. Kodumuz 2 kısımdan oluşuyor. Kodların ne yaptığını anlatabilmek için parça parça yazacağım. Sizlerde kendiniz denerken hangi kodun ne yaptığını daha iyi anlamak için, her bir...

Başlatan: Maui - Güncelleme: 04 Eylül 2021, 21:41:04 - Gösterim: 1,188

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.

Aşağı git Sayfa1
04 Eylül 2021, 21:41:04 Son düzenlenme: 05 Eylül 2021, 14:02:11 Kerem
CSS ile Google Logosu Yapımı


Bu yazımızda CSS kullanarak Google logosu yapacağız.
Kodumuz 2 kısımdan oluşuyor. Kodların ne yaptığını anlatabilmek için parça parça yazacağım. Sizlerde kendiniz denerken hangi kodun ne yaptığını daha iyi anlamak için, her bir kod satırını yazdıktan sonra ne değiştiğine bakabilirsiniz. Hemen kodlarımızı görelim.

HTML :
Logomuzu tasarlayacağımız bir div açıp, daha sonra CSS'te kullanmak için bir class ile 'google' ismini veriyoruz.

<div class="google"></div>

Aslında tüm olay CSS kısmında. Bu kısmı da, olayları daha iyi görmeniz için parpa parça anlatacağım. 

 .google{
            margin-top: 100px;
            margin-left: 120px;
            display: block;
            width: 75px;
            height: 50px;
            position: relative;
            border-top: 50px solid #4285f4;
            border-right: 50px solid #4285f4;
            border-bottom: 50px solid #4285f4;
            border-radius: 0 0 250px 0px;
            box-sizing: content-box;
        }

Burada yaptığımız G harfinin içe doğru olan kısmı. Yani logonun sağ kısmını yaptık. Bu haliyle sonucumuzu görelim.

Geçerli bir eklenti ID'si değil.

Şimdi kalan kısım için kodlarımızı yazalım.

.google::before{
            content: '';
            display: block;
            width: 250px;
            height: 250px;
            border-top: 50px solid #ea4335;
            border-left: 50px solid #fbbc05;
            border-bottom: 50px solid #34a853;
            border-right: 50px solid transparent;
            border-radius: 200px;
            box-sizing: border-box;
            position: absolute;
            right: -50px;
            top: -150px;
        }

Kalan kısımda da G harfinin kalan üst, sol, ve alt kısımlarını yapıyoruz. Renk ve yerleştirmelerini yaptıktan sonra sonuç olarak Google logosunu elde ediyoruz.

Sonuç :

Geçerli bir eklenti ID'si değil.

EvrenselKod
Kerem imza


Deli tarafıma denk gelmeyin, zira orada ben bile hükümsüzüm...
Yukarı git Sayfa1

Benzer Konular (5)

Clicky