• 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
179 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,180 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 (19,630 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 Stary wyjadacz (10,330 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 Stary wyjadacz (10,330 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,180 p.)
Tak jak pisałem wyżej, wydaje mi się że najlepszą metodą będzie canvas.
0 głosów
odpowiedź 21 marca przez Schizohatter Nałogowiec (36,440 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.
0 głosów
odpowiedź 21 marca przez pablop76 Nałogowiec (27,280 p.)

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

:after

Podobne pytania

0 głosów
0 odpowiedzi 116 wizyt
pytanie zadane 11 listopada w JavaScript, jQuery, AJAX przez revizor451 Obywatel (1,140 p.)
0 głosów
3 odpowiedzi 115 wizyt
0 głosów
2 odpowiedzi 143 wizyt
pytanie zadane 1 lipca 2016 w PHP, Symfony, Zend przez rafal1997 Bywalec (2,940 p.)

42,361 zapytań

81,636 odpowiedzi

162,024 komentarzy

20,287 pasjonatów

Przeglądających: 105
Pasjonatów: 2 Gości: 103

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.

...