• 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

Staż IT w Comarch
0 głosów
183 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 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 2017 przez hoktaur Pasjonat (21,490 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 (11,030 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 (11,030 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 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 2017 przez Schizohatter Nałogowiec (39,360 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 2017 przez pablop76 Nałogowiec (41,700 p.)

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

:after

Podobne pytania

0 głosów
0 odpowiedzi 117 wizyt
pytanie zadane 11 listopada 2017 w JavaScript, jQuery, AJAX przez revizor451 Obywatel (1,420 p.)
0 głosów
3 odpowiedzi 115 wizyt
0 głosów
2 odpowiedzi 163 wizyt
pytanie zadane 1 lipca 2016 w PHP, Symfony, Zend przez rafal1997 Gaduła (3,110 p.)
Porady nie od parady
Forum posiada swój własny chat IRC, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.
Ciekawy innych porad? Odwiedź tę stronę!

48,520 zapytań

90,114 odpowiedzi

181,385 komentarzy

23,478 pasjonatów

Przeglądających: 109
Pasjonatów: 0 Gości: 109

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.

...