• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Prosta rozwijana od A do B

0 głosów
565 wizyt
pytanie zadane 25 września 2016 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

Cześć Wam. Czy wie ktoś jak zrobić prostą pionową, która się rysuje od punktu A do punktu B ?  

komentarz 26 września 2016 przez String Gaduła (4,520 p.)
Prosta od punktu A do punktu B będzie odcinkiem, a nie prosta:D
1
komentarz 27 września 2016 przez DariuszH Gaduła (3,100 p.)
Zgadza się, Mój błąd. :) Nie mniej jednak odcinek jest częścią prostej :)

2 odpowiedzi

+2 głosów
odpowiedź 25 września 2016 przez niezalogowany
komentarz 27 września 2016 przez DariuszH Gaduła (3,100 p.)
Dzięki :) Nie wiedziałem o funkcji scale i content)
0 głosów
odpowiedź 25 września 2016 przez Tomekku Bywalec (2,830 p.)
http://stackoverflow.com/questions/7512877/how-can-we-draw-a-vertical-line-in-the-webpage
w HTML'u możesz sobie ustawić jej długość, a w CSS ustawisz pozycję :D
komentarz 25 września 2016 przez DariuszH Gaduła (3,100 p.)
To i to mam. Mnie interesuje rozwinięcie. Tak jakby wężyk się wydłużał :)
komentarz 25 września 2016 przez Tomekku Bywalec (2,830 p.)
Aaaa :D czyli chodzi o coś takiego? http://www.w3schools.com/tags/canvas_lineto.asp
komentarz 25 września 2016 przez DariuszH Gaduła (3,100 p.)
Nie ma czegoś na zasadzie @keyframes ? javascript też może być, ale uzywam w tej chwili bibliotek jquery (i też tam szukam rozwiązania). Bardzo prosto jest zrobić poziomo od do linię animowaną, natomiast nie mam pojęcia, jak zrobić w pionie od do linię animowaną. :)
komentarz 25 września 2016 przez Tomekku Bywalec (2,830 p.)
Hmmm, a co myślisz o takim haxie, że robisz linię poziomą i w CSS dajesz transform: rotate(90deg); ? (szczerze nie mam pojęcia, czy to zadziała XD)
komentarz 25 września 2016 przez DariuszH Gaduła (3,100 p.)
To już jest w kodzie :) Zastanawiam się nad animacją. Pion w tym przypadku jest traktowany jako [width+rotacja(90deg)] i gdy dodaję w @keyframes początkową "from" 0 width a "to" równą długości linii to nie ma bata nie animuje od do,tylko jakby od środka do A i do B się rozwija. Głowię się nad tym jak cholera :)  Jedno wyjście jest. Mianowicie, można zrobić element span lub kwadracik o kolorze tła co się będzie przesuwał po nieukrytej prostej pionowej, ale przy tym roboty dużo i zrobię tylko burdel dodając kolejne elementy div :)
komentarz 25 września 2016 przez Tomekku Bywalec (2,830 p.)
A możesz podrzucić kod? :D
komentarz 25 września 2016 przez DariuszH Gaduła (3,100 p.)
<!DOCTYPE html>
<HTML>
<HEAD>
<META charset="UTF8">
<link rel="Stylesheet" type="text/css" href="index.css" />
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Caption|Sigmar+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Days+One|Source+Code+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald|Raleway" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  
</HEAD>








<BODY>
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->



	<div class="main">
	
		<div class="surname">Dariusz Hozer </div>
		<div class="portfolio">portfolio</div>
		<div class="text1"></div>
		<div class="straight"></div>
		<div class="straight1"></div>
		<div class="straight2"></div>

	</div>
	
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	
	
	<div class="centrum"></div>
	
	
	
	

  
  
  
  
  
  
  
  
  
  
  
</div>
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

<div class="down">

	
</div>




</BODY>
</HTML>


body{
	
	margin:0px;
	width:100%;
}

.main{
	
    top: 0;
    left: 0;
    right: 0;
	bottom:0;
	width:100%;
	height:55vh;
	background-repeat:no-repeat;
	background-color:black;
	background-size: 100% 100%;	
	
	
}


.surname{
	float:left;
	margin-left:2vh;
	margin-top:2vh;

	font-family: 'Oswald', sans-serif;
	font-size:2.5vh;
	color:white;

}

.portfolio{
	float:left;
	margin-top:3.9vh;
	margin-left:0.3vh;
	font-family: 'Oswald', sans-serif;
	font-size:2vh;
	font-family: 'Oswald', sans-serif;
	font-family: 'Raleway', sans-serif;
	color:#00ffff;
	
}

.straight{
	
width:13.1vh;
height:0.25vh;

background-color:white;	
position:relative;
top:6.61vh;
left:2vh;
z-index:1;
display:none;

	
}



.straight1{
	
width:20vh;
height:0.25vh;
transform:rotate(90deg);
background-color:white;	
position:relative;
top:16.5vh;
left:4.9vh;
display:none;
}






.straight2{
	
width:20vh;
height:0.25vh;

background-color:white;	
position:relative;
top:26.1vh;
left:14.8vh;
display:none;

	
}









  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

.centrum{
	
	width:100%;
	height:350vh;
	background-repeat:no-repeat;
	background-color:white;
	background-size:100% 100%;
    
}





















.down{
	
	width:100%;
	height:19vh;
	background-color:black;
	background-size: 100% 100%;	
	background-repeat:no repeat;

}


 

komentarz 25 września 2016 przez DariuszH Gaduła (3,100 p.)
Kodzik proszę. Ale ja zadałem pytanie ogólne nie dotyczące wpasowywania elementów. Tylko Jak po uruchomieniu przeglądarki zrobić, by pionowa linia się od góry do dołu rozwinęła :)

Podobne pytania

0 głosów
1 odpowiedź 301 wizyt
0 głosów
2 odpowiedzi 489 wizyt
pytanie zadane 18 kwietnia 2023 w C i C++ przez polandonion Dyskutant (7,680 p.)
0 głosów
1 odpowiedź 703 wizyt
pytanie zadane 2 grudnia 2019 w JavaScript przez Squbany221 Użytkownik (650 p.)

93,605 zapytań

142,530 odpowiedzi

322,999 komentarzy

63,095 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Kursy INF.02 i INF.03
...