• 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
176 wizyt
pytanie zadane 20 marca w HTML i CSS przez kkiermasz Użytkownik (680 p.)

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ź 21 marca przez Raptor Bywalec (2,080 p.)
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ź 21 marca przez hoktaur Pasjonat (18,310 p.)
edycja 21 marca przez 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ź 20 marca przez Codeboy Mądrala (6,490 p.)

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

komentarz 21 marca przez kkiermasz Użytkownik (680 p.)
Jest to optymalna metoda?
komentarz 21 marca przez Codeboy Mądrala (6,490 p.)
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 21 marca przez kkiermasz Użytkownik (680 p.)
to ten akurat znałem, ale dzięki wielkie :D
komentarz 21 marca przez Raptor Bywalec (2,080 p.)
Tak jak pisałem wyżej, wydaje mi się że najlepszą metodą będzie canvas.
0 głosów
odpowiedź 21 marca przez pablop76 Pasjonat (23,060 p.)

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

:after

–1 głos
odpowiedź 21 marca przez Schizohatter Nałogowiec (29,180 p.)
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 115 wizyt
+1 głos
4 odpowiedzi 487 wizyt
0 głosów
2 odpowiedzi 131 wizyt
pytanie zadane 1 lipca 2016 w PHP, Symfony, Zend przez rafal1997 Bywalec (2,560 p.)

37,120 zapytań

74,188 odpowiedzi

143,728 komentarzy

17,152 pasjonatów

Przeglądających: 191
Pasjonatów: 16 Gości: 175

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...