Logowanie

Prosta rozwijana od A do B

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

odpowiedź 25 września 2016 przez niezalogowany

https://codepen.io/Argeento/pen/JRWQPR

komentarz 27 września 2016 przez DariuszH Gaduła (3,100 p.)

Dzięki :) Nie wiedziałem o funkcji scale i content)

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

Hosting pod prosta stronę i pod phpbb3

pytanie zadane 3 września 2017 w Sieci komputerowe, internet przez lalanablanalala Bywalec (2,110 p.)

0 głosów

2 odpowiedzi 489 wizyt

Współliniowość punktów

pytanie zadane 18 kwietnia 2023 w C i C++ przez polandonion Dyskutant (7,680 p.)

0 głosów

1 odpowiedź 703 wizyt

Walidacja mail javascript

pytanie zadane 2 grudnia 2019 w JavaScript przez Squbany221 Użytkownik (650 p.)

...