Czy ktoś wie gdzie szukać sposobu na to by napis "kurs javascript" był w jednym miejscu ?

pytanie zadane 10 sierpnia 2018 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

Gdzie szukać sposobu na to by napis javascript był taki jak na 1 obrazku zarówno po zmniejszeniu okna (obrazek2) i fullscreen (obrazek3) ??

2 odpowiedzi

odpowiedź 10 sierpnia 2018 przez Tomek Sochacki Ekspert (227,490 p.)

odpowiedź 10 sierpnia 2018 przez DariuszH Gaduła (3,100 p.)

<!Doctype html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Baloo+Paaji|Bowlby+One+SC|Overpass+Mono" rel="stylesheet"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
 
<div class="javascript">
    
    
    <span id="j">J</span>
    <span id="a1">a</span>
    <span id="v">v</span>
    <span id="a2">a</span>
    <span id="s">s</span>
    <span id="c">c</span>
    <span id="r">r</span>
    <span id="i">i</span>
    <span id="p">p</span>
    <span id="t">t</span>


</div>
<span id="easy"> kurs</span>

   

* { margin:0; padding:0; }
body, html { background-color: rgb(73, 201, 252);
overflow: hidden; width:100%; height:100%; }




.javascript{
    position: relative;
 padding-left:2vh;
max-width:36.5%;

height:20vh;

left:57%;
top:69vh;
font-family: 'Overpass Mono', monospace;
font-family: 'Bowlby One SC', cursive;
font-family: 'Baloo Paaji', cursive;
font-size:10vh;
color:white;
line-height: 20vh;
letter-spacing: 1vh;
text-shadow: 2px 3px 4px black;
}


#easy{

position:fixed;
right:-150%;
font-family: 'Overpass Mono', monospace;
font-family: 'Bowlby One SC', cursive;
font-family: 'Baloo Paaji', cursive;
font-size:35px;
color:white;
letter-spacing: 1vh;
text-shadow: 2px 3px 4px black;
animation:1s kurs forwards;
animation-delay: 0.3s;
z-index: 2;
}
@keyframes kurs{
from{right:-150%;}
to{right:35%;top:65vh;}



}







#j{
animation:0.8s from_up forwards;
top:0vh;
position:absolute;
}

@keyframes from_up{

from{top:-90vh;left:-130vh;}
to{top:0vh;left:0vh;}
}

#a1{
animation:0.8s a1 forwards;
top:0vh;
position:absolute;
left:7vh;
right:0vh;


}

@keyframes a1{

from{top:70vh; left:-38vh;}
to{top:0vh;}
}




#v{
animation:0.8s v forwards;
top:0vh;
position:absolute;
left:16vh;
}

@keyframes v{

from{top:220vh;left:50vh;}
to{top:0vh;}
}

#a2{
animation:0.8s a2 forwards;
top:0vh;
position:absolute;
left:25vh;
}

@keyframes a2{

from{top:-80vh;left:-12vh;}
to{top:0vh;}
}

#s{
animation:0.7s s forwards;
top:0vh;
position:absolute;
left:34vh;
}

@keyframes s{

from{top:150vh;left:-37vh;}
to{top:0vh;}
}

#c{
animation:0.81s c forwards;
top:0vh;
position:absolute;
left:42.5vh;
}

@keyframes c{

from{top:140vh; left:140vh;}
to{top:0vh;}
}

#r{
animation:0.61s r forwards;
top:0vh;
position:absolute;
left:51.2vh;
}

@keyframes r{

from{top:150vh;left:-190vh;}
to{top:0vh;}
}
#i{
animation:0.8s i forwards;
top:0vh;
position:absolute;
left:58.5vh;
}

@keyframes i{

from{top:-60vh;left:130vh;}
to{top:0vh;}
}

#p{
animation:0.8s p forwards;
top:0vh;
position:absolute;
left:64.3vh;
}

@keyframes p{

from{top:100vh;left:200vh;}
to{top:0vh;}
}

#t{
animation:0.8s t forwards;
top:0vh;
position:absolute;
left:74.2vh;
}

@keyframes t{

from{top:0vh;left:600vh;}
to{top:0vh;}
}

komentarz 10 sierpnia 2018 przez DariuszH Gaduła (3,100 p.)

Dobra już mam :) Podpowiedziałeś mi brakiem odpowiedzi, tzn nie ma jakiejś reguły, która by tak ustaliła jak chcę, tylko źle kod napisałem. Mianowicie pozbyłem się position z każdej litery :)

komentarz 10 sierpnia 2018 przez DariuszH Gaduła (3,100 p.)

Ponadto litery są w znacznikach span, którego nie ostylowałem. I trochę porządku zrobiłem :)

<!Doctype html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Baloo+Paaji|Bowlby+One+SC|Overpass+Mono" rel="stylesheet"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
 

<div id="title">
    <div id="javascript">    
        <span id="j">J</span>
        <span id="a1">a</span>
        <span id="v">v</span>
        <span id="a2">a</span>
        <span id="s">s</span>
        <span id="c">c</span>
        <span id="r">r</span>
        <span id="i">i</span>
        <span id="p">p</span>
        <span id="t">t</span>
    </div>
</div>








</body>
<html>


* { margin:0; padding:0; }
body, html { background-color: rgb(73, 201, 252);
overflow: hidden; width:100%; height:100%; }


span{

color:white;
font-size: 10vh;
text-shadow: 3px 3px  3px black;
float:left;
right:3%;
top:80vh;
font-family: 'Overpass Mono', monospace;
font-family: 'Bowlby One SC', cursive;
font-family: 'Baloo Paaji', cursive;
}

#title{
position:relative;
left:70%;
top:70vh;

}

#j{
animation:0.8s from_up forwards;
}

@keyframes from_up{
from{margin-top:-90vh;margin-left:-130vh;}
to{margin-top:0vh;margin-left:0vh;}
}


#a1{
animation:0.8s a1 forwards;
top:0vh;
}
@keyframes a1{
from{margin-top:70vh; margin-left:-38vh;}
to{margin-top:0vh;}
}




#v{
animation:0.8s v forwards;
top:0vh;
}

@keyframes v{
from{margin-top:220vh;margin-left:50vh;}
to{margin-top:0vh;}
}


#a2{
animation:0.8s a2 forwards;
top:0vh;
}

@keyframes a2{
from{margin-top:-80vh;margin-left:-12vh;}
to{margin-top:0vh;}
}


#s{
animation:0.7s s forwards;
top:0vh;
}

@keyframes s{
from{margin-top:150vh;margin-left:-37vh;}
to{margin-top:0vh;}
}

#c{
animation:0.81s c forwards;
top:0vh;
}

@keyframes c{
from{margin-top:140vh;margin-left:140vh;}
to{margin-top:0vh;}
}

#r{
animation:0.61s r forwards;
top:0vh;

}

@keyframes r{
from{margin-top:150vh;margin-left:-190vh;}
to{margin-top:0vh;}
}

#i{
animation:0.8s i forwards;
top:0vh;
}

@keyframes i{
from{margin-top:-60vh;margin-left:130vh;}
to{margin-top:0vh;}
}

#p{
animation:0.8s p forwards;
top:0vh;
}

@keyframes p{
from{margin-top:100vh;margin-left:200vh;}
to{margin-top:0vh;}
}

#t{
animation:0.8s t forwards;
top:0vh;
}

@keyframes t{
from{margin-top:0vh;margin-left:600vh;}
to{margin-top:0vh;}
}


</style>

I efekcik wygląda o niebo lepiej, a słowo nie wychodzi mi poza ekran :) Kurde to już nie pierwszy raz, gdzie zadaję pytanie a zaraz po nim sam znajduję odpowiedź :)