html css bilmiyorum çok özür dileyerek yardım edermisiniz ?

01-11-2020, 20:57:46

merhaba arkadaşlar html ve css pek bilmiyorum yapmak istediğim index. html sayfasının küçülmesi durumunda değişken yazının değerlerinin değişmesi o kadar ?
sadece sayfanın boyutu değişince değerlerin değişmesi misal 500 pixelden küçükse şu değerlere geçsin animasyonu oraya bağlayamadım.

(((

html kodları

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>    
 
    <body>
<h1 class="anim1">DEGİSKEN YAZI</h1>
<span class="anim1">Kucuk bilgiler büyük adımların baslangicidir</span>
    </body>
    </html>

css kodu

@font-face{
font-family: 'Voto';
src: url('Voto.woff2') format('woff2');

}

html{
font-family: 'Voto', sans-serif;
padding: 80px;

}

h1 {
   
    font-variation-settings: "wght" 130, "wdth" 185, "opsz" 72;
    font-size: 100px;
    margin: 0;
}


span {

    font-variation-settings: "wght" 0, "wdth" 0, "opsz" 0;
    font-size: 40px;
    text-transform: uppercase;
}

.anim1{
animation: anim1 2s infinite alternate;

}

@keyframes anim1{

from{

    font-variation-settings: "wght" 0, "wdth" 0, "opsz" 0;
}
to{

    font-variation-settings: "wght" 130, "wdth" 185, "opsz" 72;
}

}

01-11-2020, 21:13:55

#2

soxiety_

<h1 class="anim1">DEGİSKEN YAZI</h1>

<h1 class="mobile-visible">500 pxden küçük ekrana gelecek yazı</h1>

.anim {
    display: block;
}
.mobile-visible {
   display:none;
}

@media screen and (max-width: 500px) {
    .anim {
        display: none;
    }
    .mobile-visible {
        display: block;
    }
}

01-11-2020, 21:35:52

#3

fsahinoglu

soxiety_ adlı üyeden alıntı: mesajı görüntüle

<h1 class="anim1">DEGİSKEN YAZI</h1>

<h1 class="mobile-visible">500 pxden küçük ekrana gelecek yazı</h1>

.anim {
    display: block;
}
.mobile-visible {
   display:none;
}

@media screen and (max-width: 500px) {
    .anim {
        display: none;
    }
    .mobile-visible {
        display: block;
    }
}

sayfayı sağa sola küçültüp büyüttüğümde yazı aktif olmadı

neden acaba

01-11-2020, 21:36:57

#4

soxiety_

localde çalısmıyorsanız site ismi alabilirmiyim kontrol edeyim. yada media içindeki stillere !importan ekleyin. mesela display:block !important; gibi.

01-11-2020, 21:41:20

#5

fsahinoglu

soxiety_ adlı üyeden alıntı: mesajı görüntüle

localde çalısmıyorsanız site ismi alabilirmiyim kontrol edeyim. yada media içindeki stillere !importan ekleyin. mesela display:block !important; gibi.

localde çalışıyorum değişken font için bir tez yazacağım amacım fontun ekran değişikliğine göre verdiği refleks.

https://dosya.co/82hg4kaa0t3y/vfont.rar.html

01-11-2020, 22:21:43

#6

thealiyasar

soxiety_ adlı üyeden alıntı: mesajı görüntüle

<h1 class="anim1">DEGİSKEN YAZI</h1>

<h1 class="mobile-visible">500 pxden küçük ekrana gelecek yazı</h1>

.anim {
    display: block;
}
.mobile-visible {
   display:none;
}

@media screen and (max-width: 500px) {
    .anim {
        display: none;
    }
    .mobile-visible {
        display: block;
    }
}

ek olarak @media only screen olacak.

02-11-2020, 08:24:30

#7

fsahinoglu

Birdilimask adlı üyeden alıntı: mesajı görüntüle

ek olarak @media only screen olacak.

peki sayfayı mauslan küçültme veya büyültme yaparken "wdth" o değeri alması işlemi yapmak istediğimde

h1 {

font-variation-settings: "wght" 185, "wdth" 150, "opsz" 12;
font-size: 100px;
margin: 0;
}

"wdth" 150, 150 yazan yere sayfanın genişliğine göre değer almasını nasıl sağlayabilirz . width yazdım ama olmadı