Custom Search
Szkolenia informatyczne: biuro, technologie internetowe, egzaminy technik
CENA - OFERTA: Jesteś zainteresowany/na kursem – zapraszam do kontaktu ze mną, szczegóły: www.poswojsku.pl .
Responsywna strona z podmienianymi tłami przewijaniem tła CSS scroll
Responsywna strona z podmienianymi tłami przewijaniem tła CSS
RESPONSYWNA MOBILNA STRONA INTERNETOWA
Co powoduje, że strona internetowa jest responsywna? Hmm. Pewno jakieś czary. A jeżeli nie czary, to co? A tak w ogóle to co to jest ta responsywna strona internetowa? Nie dość, że responsywna, to jeszcze na dodatek przystosowana do urządzeń mobilnych?
Responsywna strona internetowa, to taka strona internetowa, która zmienia się wraz ze zmianą rozdzielczości ekranu na którym jest wyświetlana. Popatrz! Ruszasz wielkością ekranu (zwiększasz – zmniejszasz okno przeglądarki), a strona w dalszym ciągu zajmuje całą szerokość ekranu. Dzięki czemu, jak wrzucisz jej adres do optymalizatorów google’a zobaczysz, że ta strona jest responsywna i jest „mobile friendly” czyli przystosowana do urządzeń mobilnych.
Mobilność strony internetowej i responsywność strony internetowej jest uzyskiwana na dwóch poziomach. Pierwszy poziom to tzw. viewport, drugi to tzw. zapytania o media.
VIEWPORT A RESPONSYWNA MOBILNA STRONA INTERNETOWA
Viewport to taki poziom, który umożliwia nam zachowanie responsywności. Co to jest viewport? Viewport oznacza odniesienie do okna przeglądarki. W naszym przypadku wartość atrybutu content określa szerokość okna przeglądarki jako ekranu telefonu. Innymi słowy, nakazujemy przeglądarkom urządzeń mobilnych, które często zmniejszają strony, aby tego po prostu nie robiły, tylko używały rzeczywistego rozmiaru ekranu. Ale to jest dopiero pierwszy poziom responsywności. Co dalej? Spójrz na plik css.
W pliku css mam tak naprawdę trzy części. Pierwsza część to jest to kod przeznaczony dla standardowej wielkości ekranów, czyli dużych ekranów. Potem mamy kod dla ekranów, no w moim przypadku, dla których maksymalna szerokość to 1080 px. Jak porównasz kod ten, który jest u góry pliku i ten który jest pod max width 1080, zobaczysz że są nieco inne parametry. Parametry, które powodują że na mniejszych ekranach jest dopasowanie tekstu i obrazków do tych ekranów. I wreszcie mamy kod media maksymalnie dla ekranów o maksymalnej szerokości 769, czyli przesyłamy kolejny arkusz styli w momencie, kiedy nasza strona jest odtwarzana na urządzeniu, które ma tego typu szerokość. Oczywiście tym wszystkim zarządza html i przeglądarka www na bazie plików css, ale można także wymusić odpowiednie zachowanie poprzez badanie strony, dynamiczne badanie szerokości strony wykorzystując do tego JavaScript, co pokażę w jednym z kolejnych szkoleń.
Responsywna strona z podmienianymi tłami przewijaniem tła HTML
Witaj serdecznie w kolejnej części serii szkoleń, w których pokazuję jak zrobić responsywne, mobilne strony internetowe. Co najmniej raz na tydzień kolejny poradnik. Dla przypomnienia: wykonujemy stronę z podmienianymi tłami, taką prostą: HTML5 + CSS3, ale responsywną i przyjazną dla urządzeń mobilnych. Zobacz działający wzór www.pol-fashion.eu.
KOD CSS - div.image
Class image w pliku css jest to taki kawałek kodu, który mówi nam o tym (div image zawarte w div), że (dla @media (min-width: 1080px) ):
wysokość jest określona na 800 px
szerokość określona na 100%, czyli na cały ekran
background-repeat: no-repeat; czyli obrazek nie powtarza się - tłem jest tylko jeden obrazek
background-position: center; czyli obrazek jest wyśrodkowany
background-attachment: fixed; co oznacza fixed a co oznacza background-size: contain;
Background-attachment określa nam sposób zachowania się obrazu tła w przypadku przewijania strony. Obraz albo może przemieszczać się wraz z zawartością strony albo też pozostać w miejscu. Za pomocą wartości fixed właściwości background-attachment możemy ustawić, że dany obrazek się nie przewija. Dokładnie tak jest u nas. Nie przewija się z daną zawartością tła.
Z kolei background-size to taki element, który umożliwia nam zmniejszenie, powiększenie czy zniekształcenie obrazu tła. Możemy tutaj użyć wartości w pikselach, jednostkach em lub też użyć dwóch słów kluczowych: contain i cover. My użyliśmy contain, który powoduje dostosowanie obrazu tła do rozmiaru elementu z zachowaniem proporcji. Dzięki temu nasza strona będzie responsywna i dzięki temu nasza strona będzie przystosowana do urządzeń mobilnych, bo obrazki w bardzo fajny, prosty sposób będą się ładowały tak, aby się dopasować do wielkości ekranu, na którym będą wyświetlane.
Czyż nie jest to proste? Powiedz sam ewentualnie sama. Jak już mówiłem bardzo się cieszę, jeśli moje porady czytają także dziewczyny. Zerknij na całość kodu CSS.
/*
* poswojsku.pl sp. z o.o. (https://www.poswojsku.eu)
* Copyright 2011-2016 poswojsku Darek Gołębiowski, Inc.
* Licensed under MIT 2017
*/
/* Reset CSS */
html,
body,
div,
span,
h1,
h2,
p,
a{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
opacity: 0.95;
box-shadow: 1px 1px 2px grey, 0 0 1em grey, 0 0 0.2em grey;
}
#nawigacja {
font-size: 1.3em;
font-weight: bold;
color: #fff;
padding: 0%;
}
#mainNav {
clear: both;
font-family: "Verdana", Courier, monospace;
background: rgb(28, 3, 3);
position: fixed;
top: 100px;
left: 20px;
padding: 30px 3px 10px 3px;
margin: 0;
border-radius: 0% 0% 9px 9px;
box-shadow: 1px 1px 2px grey, 0 0 1em grey, 0 0 0.2em grey;
z-index: 999;
list-style: none;
cursor: pointer;
display: inline;
opacity: 0.8;
width: 97%;
}
#mainNav li {
float: right;
width: 9em;
z-index: 900;
padding: 3px;
margin: 1px 1px 1px 10px;
}
#mainNav a {
color: rgba(255, 255, 255, 1);
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 1px;
display: block;
}
#mainNav a:hover {
font-weight: bold;
color: red;
padding: 1px;
}
/* Menu responsywne */
.menuResponsywne {
display: none;
}
div.image {
height: 800px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: contain;
box-shadow: 1px 1px 2px grey, 0 0 1em grey, 0 0 0.2em grey;
}
#sliderPage1,
#sliderPage2,
#sliderPage3,
#sliderPage4,
#sliderPage5 {
width: 80%;
text-align: center;
font-size: 2.5em;
height: 95%;
border-radius: 5%;
margin: 8% auto 2% auto;
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
}
#sliderPage1 p,
#sliderPage2 p,
#sliderPage3 p,
#sliderPage4 p,
#sliderPage5 p {
padding: 8px 2px 4px 2px;
max-height: 94%;
color: rgba(0, 0, 55, 1);
font-size: 0.9em;
}
#divFooter {
overflow: hidden;
width: 100%;
min-height: 50px;
position: fixed;
bottom: 0;
margin: 15px 0px 0px 0px;
background-color: #1E1D20;
opacity: 0.7;
}
.div_dg {
clear: both;
margin-top: 1%;
overflow: hidden;
}
.lewy {
float: left;
width: 47%;
margin: 0.2%;
padding: 0.2%;
}
.prawy {
float: right;
width: 47%;
margin: 0.2%;
padding: 0.2%;
}
.prawy img {
border-radius: 10%;
max-width: 100%;
}
@media (max-width: 1080px) {
#nawigacja {
font-size: 1.7em;
font-weight: bold;
color: #fff;
padding: 0%;
}
#mainNav {
clear: both;
font-family: "Verdana", Courier, monospace;
background: rgba(0, 0, 0, 1);
position: fixed;
top: 50px;
left: 50px;
padding: 10px 5px 10px 5px;
margin: 0;
border-radius: 2%;
box-shadow: 1px 1px 2px grey, 0 0 1em grey, 0 0 0.2em grey;
z-index: 999;
list-style: none;
cursor: pointer;
display: inline;
opacity: 0.5;
}
#mainNav li {
float: right;
width: 9em;
z-index: 900;
padding: 10px;
margin: 1px 1px 1px 10px;
}
#mainNav a {
color: rgba(255, 255, 255, 1);
font-size: 0.7em;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 1px;
display: block;
}
#mainNav a:hover {
font-weight: bold;
color: red;
padding: 1px;
}
}
@media all and (max-width: 769px) {
.menuResponsywne {
display: inline;
right: 5%;
top: 4%;
position: fixed;
z-index: 900;
cursor: pointer;
}
#nawigacja {
font-size: 1.2em;
font-weight: bold;
color: #fff;
padding: 0%;
}
#mainNav {
display: inline;
left: 15%;
top: 10%;
cursor: pointer;
position: fixed;
margin: 0;
padding: 5% 0 0 0;
list-style: none;
overflow: hidden;
width: 0px;
height: 0px;
z-index: 9900;
background: black;
opacity: 0.3;
border-radius: 5%;
}
#mainNav li {
width: 9em;
z-index: 900;
padding: 10px;
margin: 1px 1px 1px 10px;
}
#mainNav a {
color: rgba(135, 20, 12, 1);
font-size: 0.9em;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 1px;
display: block;
}
#mainNav a:hover {
font-weight: bold;
color: red;
padding: 1px;
background-color: navajowhite;
border-radius: 5%;
}
div.image {
height: 370px;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: contain;
}
#sliderPage1,
#sliderPage2,
#sliderPage3,
#sliderPage4,
#sliderPage5 {
width: 80%;
text-align: center;
font-size: 2em;
height: 95%;
border-radius: 5%;
margin: 0% auto 0% auto;
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
}
.lewy {
float: left;
width: 95%;
margin: 0.2%;
padding: 0.2%;
}
.prawy {
float: right;
width: 95%;
margin: 0.2%;
padding: 0.2%;
}
}
Zobacz w menu podobne artykuły do: Responsywna strona z podmienianymi tłami przewijaniem tła CSS
Polski
MENU TEMATYCZNE
portale poswojsku utrzymywane są z reklam, więc nie marudź kiedy reklamy co nieco psują Twoje samopoczucie ;)
Chcesz zareklamować się na poswojsku- śmiało! napisz do nas
mail: marketing
poswojsku.eu
Obecnie 2023 nie prowadzimy żadnych szkoleń płatnych on-line. Ale możesz się zapisać na super fajne :) szkolenia stacjonarne - zerknij na wykaz na naszej oficjalnej stronie www.poswojsku.pl
