• 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

VPS Starter Arubacloud
0 głosów
432 wizyt
pytanie zadane 20 marca 2017 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 2017 przez niezalogowany
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 2017 przez pablop76 VIP (123,060 p.)

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

:after

+1 głos
odpowiedź 21 marca 2017 przez hoktaur Pasjonat (22,250 p.)
edycja 21 marca 2017 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 2017 przez Codeboy Stary wyjadacz (12,120 p.)

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

komentarz 21 marca 2017 przez kkiermasz Użytkownik (680 p.)
Jest to optymalna metoda?
komentarz 21 marca 2017 przez Codeboy Stary wyjadacz (12,120 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 2017 przez kkiermasz Użytkownik (680 p.)
to ten akurat znałem, ale dzięki wielkie :D
komentarz 21 marca 2017 przez niezalogowany
Tak jak pisałem wyżej, wydaje mi się że najlepszą metodą będzie canvas.
0 głosów
odpowiedź 21 marca 2017 przez Schizohatter Nałogowiec (39,600 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
0 odpowiedzi 178 wizyt
pytanie zadane 11 listopada 2017 w JavaScript przez revizor451 Obywatel (1,930 p.)
0 głosów
3 odpowiedzi 198 wizyt
pytanie zadane 22 listopada 2016 w JavaScript przez niezalogowany
0 głosów
4 odpowiedzi 200 wizyt
pytanie zadane 9 stycznia 2020 w HTML i CSS przez Hardwell Dyskutant (8,960 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...