Daha önce herkes bu Instagram logosunu görmüştür. Bu logoyu şimdi de css ile yapalım.

İlk olarak bir tane div ekliyorum ve tüm tasarım bu div içerisinde olacak.

<div class="instagram"> </div>

CSS ile değişken kullanabiliyoruz artık. Bazı değişkenleri global olarak tanımlıyorum.

:root {
  --size: 50vmin;
  --white: #fff;
  --blue: #3051f1;
  --purple: #c92bb7;
  --red: #f73344;
  --orange: #fa8e37;
  --yellow: #fcdf8f;
  --yellow_to: #fbd377;
}

Eklediğim div için temel taslağı oluşturuyorum. Daha iyi ölçeklendirmeye izin verdiği için “em” kullanacağım. Kodların devamını aşağıda blok olarak veriyorum.

Sonucu aşağıda paylaştığım linkte de görebilirsiniz.

.instagram {
  font-size: var(--size);
  width: 1em;
  aspect-ratio: 1;
  background: radial-gradient(circle farthest-corner at 28% 100%, var(--yellow) 0%, var(--yellow_to) 10%, var(--orange) 22%, var(--red) 35%, transparent 65%), linear-gradient(145deg, var(--blue) 10%, var(--purple) 70%);
  border-radius: 0.2em;
  position: relative;
  display: grid;
  place-items: center;
}

.instagram:before, .instagram:after {
  content: "";
  color: var(--white);
  position: absolute;
  border-radius: inherit;
  aspect-ratio: 1;
}

.instagram:before {
  border: 0.05em solid;
  width: 65%;
}

.instagram:after {
  border-radius: 50%;
  border: 0.05em solid;
  width: 35%;
  box-shadow: 0.22em -0.22em 0 -0.18em;
}

CodePen’de çalışan halini inceleyebilirsiniz. CSS Instagram Logo (codepen.io)