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.
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:
<div class="google"></div>
CSS:
.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;
}
CSS:
.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;
}