CSS ile sanat (Frankenstein)

CSS Cascading Style Sheets (Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları, bilinen kısa adıyla CSS), HTML’e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir işaretleme dilidir.

CSS’in öğrenilmesi biraz zor olabilir, zaman zaman hatırlanması gereken birçok özelliği vardır. Bu yazımızda CSS ile bir Frankenstein tasarlayacağız 🎃

CSS ile Frankenstein tasarlamak

Öncelikle tasarlayacağınız görselin bir taslağını kağıda çizmekle başlayın, bu detaylara inerken size yardımcı olacaktır.

View post on imgur.com

Frankenstein taslak

CSS projesini tasarlarken en hızlı ve etkili yol HTML, CSS ve Javascript kodlamamıza izin veren çevrimiçi bir düzenleyici Codepen’i veya alternatiflerinden birini kullanmaktır.

Saf bir CSS Sanatı, HTML’deki birkaç div’den oluşur. Proje şu bileşenlere göre basitleştirilebilir:

Her şekil için HTML div
Her div’e atanan CSS sınıfları
Her CSS sınıfının stilini belirleme
Yüzün tamamını içeren bir kapsayıcı div

Container

Tüm CSS resmini Container adlı bir sınıfa yerleştireceğiz Bu, yüzü buna göre hareket ettirmemize yardımcı olacaktır.

<html>
         <body>
           <div class="container">
           </div>
        </body>
    </html>

HTML

Başlamadan önce, div’lerin nasıl konumlandırıldığını bilmemiz gerekir . Örneğin, bir DIV2 altına yerleştirilmiş div1 üst üste gelecektir div1 . Bunu anlamak için div’leri katmanlar şeklinde düşünebiliriz . Resimde verildiği gibi dikdörtgen yüz birinci katman olacaktır. Let adı o 0 Katman . Bir sonraki kısım olan Katman 1, gözler, burun, ağız ve saçtan oluşacaktır. Katman 2, göz küresi, saçın üçgen şekli vb. Gibi daha fazla ayrıntıdan oluşacaktır. Burada Katman 2, Katman 1’in üzerine yerleştirilecektir.

Div’leri oluşturalım!

<html>
<body>                    
  <div class="container">
      <div class="face">    
        <div class="eyes">  
          <div class="eye-left">
            <div class="eye-ball"></div>
          </div>
          <div class="eye-right">
            <div class="eye-ball"></div>
          </div>
          <div class="nose"></div>
          <div class="mouth"></div>
        </div>
        <div class="scratch">
          <div class="a left"></div>
          <div class="a center"></div>
          <div class="a right"></div>
        </div>
        <div class="hair">
          <div class="flick1"></div>
          <div class="flick2"></div>
          <div class="flick3"></div>
          <div class="flick4"></div>
          <div class="flick5"></div>
        </div>
        <div class="nail lft">
          <div class="nail1"></div>
        </div>
        <div class="nail rgt">
          <div class="nail2"></div>
        </div>
      </div>
  </div>
</body>

</html>

CSS

İşte eğlenceli kısım geliyor! Katman katman tasarlayalım. Biz stil olacak vücut, konteyner ve yüz bu katmanda sınıfları.

body{
  background: #44626f;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container{
  text-align: center;
}
.face{
  width: 230px;
  height: 260px;
  background: #73a552;
  position: absolute;
  top: 25vh;
  left: 35vw;
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  border-bottom-left-radius: 35%;
  border-bottom-right-radius: 35%;
  z-index: 1000;
}

Burada yer vücutta, biz set arka plan rengini için #44626f, ekran için esneyebilir ayarlayacağımız böylece haklı-içerik için merkezi.

Değerleri genişliği, yüksekliği, pozisyon ve sınır yarıçapı deneme ile tespit edilebilir. Pratik yaparak bunu anlayabileceksiniz.

Katman 1

Biz gözler, göz, sol, göz sağ, yara, ağız, burun ve saç bu katmanda. Bunları CSS ile de şekillendirelim!

.eyes{
  width: 170px;
  height: 45px;
  background: #556839;
  position: absolute;
  top: 100px;
  left: 30px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
.eye-left{
  width: 55px;
  height: 35px;
  background: white;
  left: 20px;
  position: absolute;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
}
.eye-right{
  width: 55px;
  height: 35px;
  background: white;
  left: 95px;
  position: absolute;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
}
.eye-brow{
  width: 35px;
  height: 20px;
  background: #1e201f;
  left: 10px;
  position: absolute;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
}
.nose{
  width: 50px;
  height: 15px;
  border-top: 7px solid #556839;
  position: absolute;
  border-radius: 50%;
  top: 75px;
  left: 60px;
}
.mouth{
  width: 65px;
  height: 30px;
  position: absolute;

  border-top: solid 6px #546837;
  border-radius: 50%;
  top: 110px;
  left: 65px;
}
.scratch{
  width: 90px;
  height: 5px;
  background: #536936;
  position: absolute;
  top: 60px;
  left: 15px;
  border-radius: 25px;
}
.hair{
  width: 250px;
  height: 60px;
  background: black;
  position: absolute;
  left: -10px;
  top: -40px;
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
}

Bizim Frankenstein’ımız bu noktada biraz korkutucu görünüyor, Katman 2 sihrin gerçekleştiği yerdir!

Katman 2

Tüm detaylı çalışmalar burada yapıldığı için Layer 2 en önemli katmandır. Son detayları ekleyelim.

.eye-ball{
  width: 35px;
  height: 20px;
  background: #1e201f;
  left: 10px;
  position: absolute;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
}
.a{
  height: 35px;
  width: 4px;
  border-radius: 25px;
  position: absolute;
  background: #546737;
  top: -16px;
}
.left{
  left: 15px;
}
.center{
  left: 40px;
}
.right{
  left: 65px;
}
.flick1{
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  width: 70px;
  height: 50px;
  background: black;
  position: absolute;
  top: 40px;
  left: 0px;
}
.flick2{
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  width: 80px;
  height: 50px;
  background: black;
  position: absolute;
  top: 45px;
  left: 30px;
  border-radius: 15px;
}
.flick3{
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  width: 80px;
  height: 50px;
  background: black;
  position: absolute;
  top: 45px;
  left: 90px;
}
.flick4{
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  width: 80px;
  height: 50px;
  background: black;
  position: absolute;
  top: 45px;
  left: 150px;
}
.flick5{
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  width: 70px;
  height: 50px;
  background: black;
  position: absolute;
  top: 40px;
  left: 180px;
}
.nail{
  height: 30px;
  width: 30px;
  background: #979b90;
  position: absolute;
  z-index: 999;
}
.lft{
  top: 156px;
  left: -29px;
}
.rgt{
  left: 229px;
  top: 156px;
}
.nail1{
  width: 20px;
  height: 45px;
  background: #979b90;
  top: -8px;
  position: absolute;
  border-radius: 5px;
}
.nail2{
  width: 20px;
  height: 45px;
  background: #979b90;
  top: -8px;
  position: absolute;
  border-radius: 5px;
  left: 10px;
}
Saçın üçgen şekli

Saçın üçgen şekli ( hafif vuruş) Clippy kullanılarak yapılabilir.

Clippy, şekiller ve özel şekiller yapmak için kullanışlı bir araçtır. Frankenstein hazır!

Canlandıralım!

Göz kürelerini hareket ettireceğiz. Bu, animasyon özelliği ve @keyframes kullanılarak elde edilebilir.

.eye-ball{
  width: 35px;
  height: 20px;
  background: #1e201f;
  left: 10px;
  position: absolute;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  animation: roll 5s 3;
  animation-delay: 10s;
}
@keyframes roll{
  0%{
    left: 10px;
 }
  10%{
    left: 10px;
 }
  30%{
    left: 0px;
 }
  55%{
    left: 20px;
 }
  70%{
    left: 0px;
 }
  100%{
    left: 10px;
 }
}

Canlı sonuç