CSS ile Güneş Tutulması

CSS3 ile tasarlanmış ilgi çekici yapımları incelemeye devam ediyoruz. Bugün ‘Eclipse’, yani tutulma isimli çalışmayı sizlerle paylaşıyor olacağız.

Yuvarlak cisimlere verilen beyaz, sarı, kahverengi ve kırmızı gölgelerin hareket ettirilmesi sonucunda oluşan bu teknik hem çok yaratıcı hem de çok şık. Evet, büyük ihtimal her web sayfasında yer alabilecek türden bir tasarım değil ama CSS ve biraz pratik zeka ile web tarafında neler yapılabileceğini gösteren örnek bir çalışma.

Örneği görüntüleyerek başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

---

CSS3 ile güneş tutulması efekti nasıl yapılır?

Öncelikle üzerinde perde ve renkli gölgeler oluşturacağımız birkaç katmana ihtiyaç duyacağız. Sonrasında da tanımlayacağımız animasyonu tüm öğelerle belirli gecikmelerle ilişkilendireceğiz. Burada da renk geçişleri ve siyah perde bize güneş ile dünyanın arasına girmiş bir ay görüntüsü verecek. Eğer orjinal paylaşımı görmek isterseniz de Christiaan Laarman‘ın CodePen linkine buradan erişebilirsiniz. Hazırsanız başlayalım.

---

HTML Kodları

Christiaan’ın tasarımına ek olarak sadece bir section ekleme gereği duyduk. Böylece ilgili CSS kodları sayfanızdaki diğer division elemanlarını tetiklemez.

<section class="tutulma">
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
<div></div>
</section>

---

CSS Kodları

İlk olarak arkaplan renginizi siyah yapın.

body {
  background-color: black;
  margin: 50px;
}

Şimdi de tutulmayı oluşturacak ve maskeleyecek öğeleri tasarlayalım.

section.tutulma > div {
  left: calc(50% - 100px);
  top: 100px;
  position: relative;
  background-color: black;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  box-shadow: 0px 0px 50px white;
}
section.tutulma > div:nth-child(2) {
  width: 200px;
  height: 200px;
  top: -100px;
  left: calc(50% - 100px);
  text-align: center;
  opacity: .8;
  border: 1px solid white;
}

İçerideki öğelerin de genel tanımlarını yapalım.

section.tutulma > div div {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  filter: blur(50px);
  -webkit-filter: blur(50px);
  position: absolute;
  top: 0%;
  left: 0%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

Dört ayrı renk tipini yansıtacak tutulma ışıklarını oluşturalım.

section.tutulma > div div:nth-child(1) {
  background-color: red;
  -webkit-animation: eclipse 4s;
  -webkit-animation-delay: 4.8s;
  animation: tutulma 4s;
  animation-delay: 4.8s;
}
section.tutulma > div div:nth-child(2) {
  background-color: brown;
  -webkit-animation: eclipse 3s;
  -webkit-animation-delay: 0s;
  animation: tutulma 3s;
  animation-delay: 0s;
}
section.tutulma > div div:nth-child(3) {
  background-color: white;
  -webkit-animation: eclipse 6s;
  -webkit-animation-delay: 3.2s;
  animation: tutulma 6s;
  animation-delay: 3.2s;
}
section.tutulma > div div:nth-child(4) {
  background-color: yellow;
  -webkit-animation: eclipse 5s;
  -webkit-animation-delay: 1.6s;
  animation: tutulma 5s;
  animation-delay: 1.6s;
}

Son olarak tutulma adını verdiğimiz animasyonu hazırlayalım.

@-webkit-keyframes tutulma {
  0%, 100% {top: 0%;left: 0%;}
  25% {top: 25%;left: 50%;}
  50% {top: 50%;left: 50%;}
  75% {top: 25%;left: 0%;}
}
@keyframes tutulma {
  0%, 100% {top: 0%;left: 0%;}
  25% {top: 25%;left: 50%;}
  50% {top: 50%;left: 50%;}
  75% {top: 25%;left: 0%;}
}

Böylece hızlı ve akılcı bir yöntemle bir güneş tutulması tasarımı oluşturduk.

İyi çalışmalar.