Araç çubuğuna atla
Animasyonlu başlık ve yazılar ile web tasarım

Html ve Css Kullanarak Animasyonlu Başlık ya da Paragraf Nasıl Oluşturulur

Html5 ve Css3 kullanarak animasyonlu başlık ya da paragraf nasıl oluşturulur öğrenmek istiyorsanız bu yazımızı mutlaka okumalısınız.

Google Fonts kullanarak eklemek istediğimiz font tipini seçiyoruz. İsterseniz elinizde başka font dosyaları var ise onları da elle ekleyebilirsiniz.

Google Fonts’tan değişken fontlar kullanırken net olmayan bir şey var. Tüm yazı tipini nasıl elde ederiz?

Diyelim ki “Roboto Mono” yu seçip kurduk.

Belirli bir ‘font weight’ seçmek için “Bu stili seç” i kullanırsak istediğimiz ağırlıkları alabiliriz!

İşe öncelikle CSS kodlarını ekleyerek başlayalım. Css kodları arkaplanı siyah yapacak ama siz bunu siz kendine göre güncelleyebilirsiniz.


@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@699;700&display=swap");
:root {
--lower: 100;
--upper: 700;
}
body {
min-height: 100vh;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
background: #262626;
}
h1 {
font-family: 'Roboto Mono', monospace;
font-size: 5rem;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%));
transform: translate(-50%, -50%) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%));
font-variation-settings: 'wght' var(--lower);
margin: 0;
}
h1 span {
--hue: calc((360 / 5) * var(--index));
color: hsl(var(--hue), 0%, 65%);
-webkit-animation: rise 1s infinite cubic-bezier(0.5, 0, 0.5, 1);
animation: rise 1s infinite cubic-bezier(0.5, 0, 0.5, 1);
-webkit-animation-delay: calc((var(--index) - 7) * 0.1s);
animation-delay: calc((var(--index) - 7) * 0.1s);
}
@-webkit-keyframes rise {
50% {
font-variation-settings: 'wght' var(--upper);
color: hsl(var(--hue), 80%, 65%);
}
}
@keyframes rise {
50% {
font-variation-settings: 'wght' var(--upper);
color: hsl(var(--hue), 80%, 65%);
}
}

Şimdi ise Html Kodlarımızı ekleyelim !

<h1>
<span style=”–index: 0″>T</span>
<span style=”–index: 1″>U</span>
<span style=”–index: 2″>Ğ</span>
<span style=”–index: 3″>R</span>
<span style=”–index: 4″>U</span>
<span style=”–index: 5″>L</span>
</h1>

Ve hepsi bu kadar. Web sitesini denediğinizde çok güzel animasyonları olan bir yazı elde edeceksiniz. Arkaplanı silerek istediğiniz her yerde kullanabilirsiniz.


T
U
Ğ
R
U
L

Yorum yapın