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

Jaki jest sposób na tworzenie tego typu stron

0 głosów
170 wizyt
pytanie zadane 3 dni temu w HTML i CSS przez użytkownika kkiermasz Użytkownik (680 punkty)

Witam!
Poszukując inspiracji znalazłem coś fajnego, ale mam pewną zagwozdkę.
Szablon

Jaki jest sposób tworzenia stron przykładowo jak na powyższym szablonie. Każdego zdjęcie to background w dla danego diva? Jeden duży background?
Ciekawi mnie to, gdyż wydaje mi się, że te osoby na skale to inna grafika niż ten landscape.

To samo dotyczy tego skośnego oddzielenia zdjęcia i tej stopki.
Chodzi mi tylko o to jak się to rozwiązuje? Tj. jakimi metodami tworzy się coś takiego

5 odpowiedzi

+1 głos
odpowiedź 2 dni temu przez użytkownika Lupik Obywatel (1,500 punkty)
Jakis czas temu robiłem podobną stronę, która miała takowe przekrzywienia. Serdecznie polecam Canvasa do takich rozwiązań, jest responsywny, lekki i prosty w użytku. Pozdrawiam
+1 głos
odpowiedź 2 dni temu przez użytkownika hoktaur Pasjonat (15,800 punkty)
edycja 2 dni temu przez użytkownika hoktaur

Tak może wyglądać przykład:

<!DOCTYPE html>
<html lang="pl-PL"> 

<head> 
	<meta charset="utf-8">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 


	<style>
		body {
			background-color: grey;
		}
		.container {
			width: 780px;
			margin: auto;
			text-align: justify;
			position: relative;
		}
		.menu {
			text-align: center;
		}
		.menu > li{
			display: inline;
			color: white;
			border: 1px solid white;
			background-color: rgba(255, 255, 255, 0.4);
		}
		.menu > li:hover{
			
			background-color: blue;
		}
		
		.one {
			background-image: url('https://cdn.pixabay.com/photo/2012/12/16/20/59/africa-70229_960_720.jpg');
			background-size: cover;
			height: 500px;
			
		}
		.one > h1 {
			text-align: right;
			color: grey;
			text-shadow: 5px 5px 4px black;
			margin-top: 220px;
			margin-right: 100px;
		}
		
		.two {
			background-color: lightgrey;
			height: 240px;
			position: relative;
			top: -130px;
			transform: skewY(10deg);
		}
		
		.three {
			position: relative;
			background-color: lightgrey;
			height: 300px;
			position: relative;
			top: -300px;
			padding: 10px;
		}
		.three > img {
			position: relative;
			float: right;
			top: -180px;
		}
		
		
		h1 {
			font-size: 100px;
		}
		
		.bold {
			font-weight: bold;
		}

</style>

</head> 

<body>
	<div class="container">
		<div class="one">
			<ul class="menu">
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 2</li>
			</ul>
			<h1>Witamy</h1>
			
		</div>
		<div class="two"></div>
		<div class="three">
			<img src="./kwiatek.png" />
			<p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</p>
			
			<p class="bold">Obrazki pochodzą ze <a href="https://pixabay.com/pl/afryka-krajobraz-pustynia-sceneria-70229/">strony</a>: </p>
		</div>	
	</div>
	
	<script type="text/javascript">
	</script>
</body>

</html>

P. S. Wiem że nie jest responsywna, ale można to uzyskać odpowiednio ustawiając Media Queries i że można to jeszcze poprawić ale nie chciałem pisać gotowca zależało mi na pokazaniu jak za pomocą CSS to można zrobić...

... upsss jeszcze obrazek bez niego nie będzie efektu :) - wrzucić do katalogu z kodem

Powinno wyjść coś takiego:

0 głosów
odpowiedź 3 dni temu przez użytkownika Codeboy Bywalec (2,180 punkty)

Da radę to zrobić ze zwykłymi obrazkami, do tego przekrzywienia białego tła w CSS + parallax effect

komentarz 3 dni temu przez użytkownika kkiermasz Użytkownik (680 punkty)
Jest to optymalna metoda?
komentarz 3 dni temu przez użytkownika Codeboy Bywalec (2,180 punkty)
podałem Ci przykład jak to można wykonać, nie zrobię Ci zestawienia z każdym innym sposobem bo najzwyczajniej nie mam na tyle wiedzy :)
komentarz 3 dni temu przez użytkownika kkiermasz Użytkownik (680 punkty)
to ten akurat znałem, ale dzięki wielkie :D
komentarz 2 dni temu przez użytkownika Lupik Obywatel (1,500 punkty)
Tak jak pisałem wyżej, wydaje mi się że najlepszą metodą będzie canvas.
0 głosów
odpowiedź 2 dni temu przez użytkownika pablop76 Stary wyjadacz (13,120 punkty)

Witam. Często stosuje się pseudoelementy after i before

:after

–1 głos
odpowiedź 3 dni temu przez użytkownika Schizohatter Nałogowiec (29,040 punkty)
Dotychczas jak widziałem takie layouty to po prostu ta "krzywa grafika" była faktycznie krzywa (przycięta na krzywo) i zapisana w pliku. Taki plik był ładowany jako tło, a odpowiednie ustawienie elementów osiągało się przy pomocy marginesów (+/-).

Wady takiego rozwiązania mogą pojawić się na małych ekranach, ale to zależy od sposobu wykonania całości.

Z tego co widzę, to Twój przykład to właśnie grafiki powklejane na sztywno.

Podobne pytania

0 głosów
3 odpowiedzi 113 wizyt
pytanie zadane 22 listopada 2016 w JavaScript, jQuery, AJAX przez użytkownika GenerałXavi Dyskutant (8,960 punkty)
+1 głos
4 odpowiedzi 417 wizyt
0 głosów
2 odpowiedzi 119 wizyt
pytanie zadane 1 lipca 2016 w PHP, Symfony, Zend przez użytkownika rafal1997 Bywalec (2,190 punkty)
...