Strona dla grafika

14 marca, 2012 w kategoriach: Web developing, HTML, xHTML, Zaawansowane opcje

1
7,769 2
Dane:
  • Czas pracy: ciężko określić ale kilka ładnych godzin
  • Poziom: Średnio zaawansowany
Opis:

Strona wykonana krok po kroku przy użyciu niektórych cech standardów html5 i css3

Pliki do pobrania

Pokaż/Ukryj wszystko

Cięcie PSD i kodowanie do HTML & CSS

Layout mojej produkcji służy jedynie celom naukowo/poglądowym. Nie zezwalam na jego wykorzystywanie w celach zarobkowych.

Zacznę może od tego co nam będzie potrzebne.

Na pewno program do tworzenia kodu, ja będę używał notepad++ ale każdy inny się nada.

Przeglądarka najlepiej mieć wszystkie zainstalowane, bo jak się okazuje standard css3 w każdej przeglądarce opisany jest inna funkcją co trochę utrudnia pracę. Ja będę pokazywał głównie na Chrome i Firefox.

To chyba wszystko najwyżej na bieżąco będę przypominał i wskazywał czego brakuje.

W tym kroku pokaże może jeszcze jak będzie wyglądać nasza strona, a prezentuje się ona mniej więcej tak:

Alt 2

Strona do podejrzenia tutaj

foto


Wydawnictwo Strefa Kursów

Utwórzmy nowy dokument w notepad++ i zapiszmy go jako index.html w nowym folderze.

pierwszą zaskakującą rzeczą w szkielecie dokumentu jest jego pierwsza linijka tzw. doctype mówiący przeglądarce jakim językiem napisana jest strona. W końcu doczekaliśmy się czasów gdzie mieści się on w jednej linijce i możemy go zapamiętać:D wygląda następująco:

<!DOCTYPE html>

zróbmy podstawowy szkielet naszej strony.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Fotografia</title>
</head>
<body>

</body>
</html>

Mamy tutaj sekcję head odpowiadająca za nagłówek strony i sekcje body w której będzie sie znajdowała cał treść naszej strony. Znacznik meta charset=utf-8 przypomnę odpowiada za kodowanie znaków w naszym dokumencie.

Utwórzmy sobie teraz plik stylu naszej strony, tworzymy nowy dokument w programie i zapisujemy go jako style.css w folderze css znajdującym się w głównym katalogu naszej strony.
Alt 3
Dodajmy może od razu w sekcji head link do pliku css wygląda on następująco

<link rel="stylesheet" type="text/css" href="css/style.css" />

cały nasz kod wygląda następująco:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Fotografia</title>
</head>
<body>

</body>
</html>

W css3 aby uzyskać obraz dopasowujący się do wymiarów naszego monitora wystarczy wpisać prosty kod, bez użycia java scriptu czy innych sztuczek.

w zakładce style.css wpisujemy następujący kod

html {
background: url(images/2.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /*chrome*/
-moz-background-size: cover; /*firefox*/
-o-background-size: cover; /*opera*/
background-size: cover;
}

W tym przypadku możemy ustawić nasz background image na znaczniku html.

Pierwsza linijka kodu mówi przeglądarce gdzie znajduje się o obraz i jak ma być wyświetlany natomiast każda następna odwołuje się do innej przeglądarki i mówi jej co ma zrobić, w tym przypadku pokryć cała stronę.

Podejrzyjmy pod przeglądarką wybieramy polecenie Run z górnego menu i Launch in chrome
Alt 4

Udało się, a użyliśmy dosłownie 5 linijek czystego css

Zbudujmy proste menu

sekcja body

<body>
<div id="menu">
<ul>
<li><a href="#">O MNIE</a></li>
<li><a href="#">STUDIO</a></li>
<li><a href="#">PORTERY</a></li>
<li><a href="#">WESELA</a></li>
<li><a href="#">KONTAKT</a></li>
</ul>

</body>

Stworzyliśmy prostą listę wypunktowaną z odnośnikami do poszczególnych stron, puki co zamiast adresu strony wstawiliśmy #.
Nie wygląda to za specjalnie do tego ledwo widać niebieskie napisy na naszym tle, dodajmy trochę stylów.
Zmienimy kolor, rodzaj czcionki i pozbędziemy się wypunktowania

#menu a {
color: #fff;
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
}

#menu li {
list-style: none;
}

Już lepiej, dodajmy jeszcze poziomą belkę i rozmieśćmy na niej nasze menu

#menu {
width: 100%;
height: 75px; /*wysokość naszego paska menu*/
position: absolute;
background-color: rgba(0,0,0,0.7); /*kolor podany w rgb po przecinku wartość opacity*/
margin-top: 25px; /*odsunięcie od góry*/
left:0; /*przyciąga do lewej krawędzi nie mamy odstępu*/
}

#menu a { /*w zasadzie cały styl odpowiada za czcionkę i jej wyświetlanie*/
line-height: 75px;
color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
display: inline;
text-align: center;
margin-left: 2px;
}

#menu li {
float: left;
list-style: none; /*usuwa wypunktowanie*/
padding-left: 15px;
line-height: 75px;
}

#menu ul {
margin: 0;
margin-left: 650px; /*wartość odsunięcia naszego menu*/
height: 75px;
}

Menu można przesuwać w zależności od upodobań zależy jak kto lubi, w tym momencie myślę że tak może zostać. co do stylu opacity w przeglądarce IE nam nie działa. Cóż jak to z IE bywa na niej większość rzeczy nie działa, na szczęście popularność tej przeglądarki stopniowo maleje. Dla dociekliwych spróbujemy to poprawić, osobiście bym zostawił bo nie lubię tej przeglądarki i nie używam.

dopisujemy wyjątek w sekcji head w naszym pliku index.thml i zadziała nam pod IE

<!--[if IE]>

<style type="text/css">

#menu a {
color: #FFF;
filter:alpha(opacity=100);
opacity: 1;
position: relative;
}
#menu {
background-color: #000;
filter:alpha(opacity=70);
opacity: 0.7;
}
</style>

<![endif]-->

Dodajmy stopkę, do naszego kodu

<div id="footer>
<span class="footer">Copyright © 2012 Designed by klimak.</span>
</div>

Trochę styli

#footer {
width:100%;
height: 30px;
position:absolute;
background-color:#000;
left:0; /*przyciąga do lewej*/
bottom:0; /*przyciąga do spodu*/
color: #FFF; /*kolor czcionki*/
font-family: Tahoma, Geneva, sans-serif;
line-height: 30px;
font-size: 12px;
font-weight:bolder;
}

.footer {
padding-left:50px; /*odsunięcie od lewej*/
}

podejrzyjmy jak prezentuje się nasza strona

Alt 5

A tu cały kod jaki do tej pory stworzyliśmy

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Fotografia</title>
<!--[if IE]>

<style type="text/css">

#menu a {
color: #FFF;
filter:alpha(opacity=100);
opacity: 1;
position: relative;
}
#menu {
background-color: #000;
filter:alpha(opacity=70);
opacity: 0.7;
}
</style>

<![endif]-->
</head>
<body>
<div id="menu">
<ul>
<li><a href="omnie.html">O MNIE</a></li>
<li><a href="#">STUDIO</a></li>
<li><a href="#">PORTERY</a></li>
<li><a href="#">WESELA</a></li>
<li><a href="kontakt.html">KONTAKT</a></li>
</ul>
</div>

<div id="footer">
<span class="footer">Copyright &copy; 2012 Designed by klimak.</span>
</div>
</body>
</html>

style.css

html {
background: url(images/2.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /*chrome*/
-moz-background-size: cover; /* mozilla*/
-o-background-size: cover; /*opera*/
background-size: cover;
}

#menu {
width: 100%;
height: 75px;
position: absolute;
background-color: rgba(0,0,0,0.7);

margin-top: 25px;
left:0;
}

#menu a {
line-height: 75px;
color: #FFF;

font-family: Tahoma, Geneva, sans-serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
display: inline;
text-align: center;
margin-left: 2px;
}

#menu li {
float: left;
list-style: none;
padding-left: 15px;
line-height: 75px;
}

#menu ul {
margin: 0;
margin-left: 650px;
height: 75px;
}

#footer {
width:100%;
height: 30px;
position:absolute;
background-color:#000000;
left:0;
bottom:0;
color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
line-height: 30px;
font-size: 12px;
font-weight:bolder;
}

.footer {
padding-left:50px;
}

uzupełnijmy nasze menu o adresy stron, zakładając że tak będą się nazywały nasze zakładki

<div id="menu">
<ul>
<li><a href="omnie.html">O MNIE</a></li>
<li><a href="studio.html">STUDIO</a></li>
<li><a href="portrety.html">PORTRETY</a></li>
<li><a href="wesela.html">WESELA</a></li>
<li><a href="kontakt.html">KONTAKT</a></li>
</ul>
</div>

zapiszmy plik index, a następnie wybieramy plik>zapisz jako i zapisujemy pod nazwą omnie.html. tworzy nam się nowy plik na którym będziemy pracować, pamiętajmy aby znajdował się on w głównym katalogu naszej strony.

dodajmy trochę kodu, boxa content zawierającego tytuł i tekst przykładowy ze strony lipsum.com

<div id="content">
<span class="tab">O mnie</span>
<span id="text"><h3>Lorem Ipsum</h3>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</span>
</div>

popracujmy nad stylami, gdyż w surowym stanie nam na pewno nie odpowiada.

style

#content {
background:#FFFFFF;
width: 650px;
height: 400px;
position:absolute;
margin:25%; /* położenie naszego boxa*/

}

.tab {
width:600px;
height: 50px;
background-color:#000;
display:inline-block; /*odpowiada za wypełnienie całego pola, a nie tylko wokół tekstu*/
color: #fff;
padding-left:50px; /* odstęp od lewej krawędzi*/
line-height: 50px; /*wysokość pola w którym jest nasza czcionka*/
font-family:Tahoma, Geneva, sans-serif;
font-size:20px;
font-weight: normal;
}

#text {
float: left;
padding: 25px; /*odstęp między tekstem a bokiem naszego boxa*/
color: #000;
font-family:Tahoma, Geneva, sans-serif;
font-size:18px;
font-weight: normal;
}

prezentuje się to już całkiem przywozicie
Alt 7

gdzieś mi umknęło po drodze zrobienie loga, nie będzie to jakieś wyszukane logo bo nic nie przygotowałem ale widziałem gdzieś, kiedyś takie proste bez użycia grafiki zobaczymy co wyjdzie.

Zamysł mam taki aby mieściło się ono na wysokości paska menu, i było linkiem do strony index.html.

kod musimy dodać na obu podstronach index.html oraz omnie.html

<div>
<span class="foto"><a href="index.html">[o]</span><span class="logotext"><strong>Studio Fotograficzne</strong></br>
Jan Kowalski</a></span>
</div>

style co do styli to zmienimy czcionki, i pobawimy się ich wartościami oraz odpowiednio ustawimy nasze logo, będziemy musieli też zmienić wygląd linku zagnieżdżonego w naszym boxie

#logo .foto {
color: #fff;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
font-size:48px;
line-height: 75px;
position:absolute;
margin-top: 20px;
margin-left: 50px;
}

#logo .logotext {
font-family:Tahoma, Geneva, sans-serif;
color: #FFF;
font-size:16px;
margin-top: 39px;
position:absolute;
margin-left: 150px;

}

#logo a {
text-decoration: none;
color: #fff;
}

nie jest może za oszałamiające ale nie mam obecnie inwencji na jakieś lepsze.
Alt 8

Zaprojektujemy prosty formularz kontaktowy, dodamy pola w kodzie, ostylujemy formularze i spróbujemy uruchomić nasz formularz za pomocą php. Od razu wspomnę że php nie jest moją mocną stroną ale spróbujemy to jakoś przebrnąć.

Tak jak wcześniej tworzymy nową stronę kontakt.html

W naszym kodzie, w boxie content dodajemy następujące linijki kodu

<div id="content">
<span class="tab">Kontakt</span>
<form method="post" action="index.php">

<label>Imię i Nazwisko</label>
<input name="name" placeholder="Wpisz Imię i Nazwisko">

<label>Email</label>
<input name="email" type="email" placeholder="Wprowadź email">

<label>Wiadomość</label>
<textarea name="message" placeholder="Wpisz swoją wiadomość"></textarea>

<button name="submit" value="Submit" type="submit" formmethod="post" formaction="index.php">Wyślij</button>

</form>
</div>

style

form {
width:459px;
margin:0 auto;
}

label {
display:block;
margin-top:20px;
letter-spacing:2px;
}

input, textarea {
width:350px;
height:22px;
background:#efefef;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
position: relative;
}

input:focus, textarea:focus {
border:1px solid #97d6eb;
}

textarea {
height:113px;
font-family:Arial, Helvetica, sans-serif;
background:url(images/textarea-bg.jpg) right no-repeat #efefef;
}

button {
background-color: #000;
color: #fff;
width:127px;
height:38px;
border-radius: 5px;
margin-top:20px;
cursor:pointer;
margin-bottom:25px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size: 18px;
}

button:hover {
opacity:0.9;
}

usunąłem wysokość w #content gdyż okazała się zbędna i zmieniłem position na absolut

#content {
background:#FFFFFF;
width: 650px;
position:absolute;
margin:25%;
}

do tagu html dodałem linijkę

html{
height:960px;
}

Zauważyłem również dziwne krzaczki zamiast polskich końcówek więc zmieniłem znacznik charset we wszystkich plikach html na:

<meta charset=iso-8859-2 />

cóż znaczki nie zniknęły a przynajmniej nie wszędzie ale to jakoś rozgryzę jeszcze

A teraz skrypt php, ściągnięty kiedyś chyba z darmowych skryptów albo coś takiego jeśli odkopię wstawię link

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: Demo'; /*tu zmienić*/
$to = 'contact@contact.com'; /*tu zmienić*/
$subject = 'Hello'; /*tu zmienić*/
$human = $_POST['human'];

$body = "From: $name E-Mail: $email Message: $message";

if ($_POST['submit'] && $human == '4') {
if (mail ($to, $subject, $body, $from)) {
echo '<p>Twoja wiadomość została wysłana!</p>';
} else {
echo '<p>Coś poszlo nie tak, spróbuj jeszcze raz!</p>';
}
} else if ($_POST['submit'] && $human != '4') {
echo '<p>twoja odpowiedź jest błędna!</p>';
}
?>

Działa sprawdzałem na serwerze, nie jest jakiś wyszukany ale to tylko przykład jak może wyglądać

Alt 9

Na samym początku powiem jak bardzo denerwuje mnie przeglądarka IE i przez nią postanowiłem w.klepać kod tylko dla Chrome, jak już będę miał chwilkę wklepie dla pozostałych

Zakładki ze zdjęciami wyglądają w moim założeniu mniej więcej tak samo podstawiamy inne zdjęcia tylko tak więc zrobię to na przykładzie zakładki wesela.html

Przygotowałem sobie 2 zestawy zdjęć miniatury 150×150 pikseli i zdjęcia duże o stałej szerokości 800px.

W katalogu css stworzyłem folder galeria a w nim dwa foldery full i mini

będą nam potrzebne też strzałki dlatego w folderze css/images znajdziecie strzałki.png

Sam kod jest dość prosty, bo jest to nic innego jak lista w której mamy informację o zdjęciach i nawigacji. W każdym tagu li mamy info o małym i dużym zdjęciu oraz przyciskach nawigacyjnych

Kod

<div id="content">
<span class="tab">Wesela</span>

<section "align:center;">
<ul class="lb-album">
<li>
<a href="#image-1">
<img src="css/galeria/mini/1.jpg" alt="image01">
<span>tytuł</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="css/galeria/full/1.jpg" alt="image01" />
<div>
<a href="#image-10" class="lb-prev">Prev</a>
<a href="#image-2" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">Close</a>
</div>
</li>
<li>
<a href="#image-2">
<img src="css/galeria/mini/2.jpg" alt="image02">
<span>tytuł</span>
</a>
<div class="lb-overlay" id="image-2">
<img src="css/galeria/full/2.jpg" alt="image02" />
<div>
<a href="#image-1" class="lb-prev">Prev</a>
<a href="#image-3" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">Close</a>
</div>
</li>
<li>
<a href="#image-3">
<img src="css/galeria/mini/3.jpg" alt="image03">
<span>tytuł</span>
</a>
<div class="lb-overlay" id="image-3">
<img src="css/galeria/full/3.jpg" alt="image03" />
<div>
<a href="#image-2" class="lb-prev">Prev</a>
<a href="#image-4" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">Close</a>
</div>
</li>
<li>
<a href="#image-4">
<img src="css/galeria/mini/4.jpg" alt="image04">
<span>tytuł</span>
</a>
<div class="lb-overlay" id="image-4">
<img src="css/galeria/full/4.jpg" alt="image04" />
<div>
<a href="#image-3" class="lb-prev">Prev</a>
<a href="#image-5" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">Close</a>
</div>
</li>
<li>
<a href="#image-5">
<img src="css/galeria/mini/5.jpg" alt="image05">
<span>tytuł</span>
</a>
<div class="lb-overlay" id="image-5">
<img src="css/galeria/full/5.jpg" alt="image05" />
<div>
<a href="#image-4" class="lb-prev">Prev</a>
<a href="#image-6" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">Close</a>
</div>
</li>
<li>
<a href="#image-6">
<img src="css/galeria/mini/6.jpg" alt="image06">
<span>tytuł</span>
</a>
<div class="lb-overlay" id="image-6">
<img src="css/galeria/full/6.jpg" alt="image06" />
<div>
<a href="#image-5" class="lb-prev">Prev</a>
<a href="#image-7" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">Close</a>
</div>
</li>

</ul>
</section>

</div>

Tu nie będę się rozpisywał o stylach ale proszę patrzeć na podpowiedzi w stylach ponizej

style


section { margin: 25px; } .lb-album /*wygląd i położenie albumu nic szczególnego na razie*/ { font-family: Tahoma, Geneva, sans-serif; list-style:none; } .lb-album li { float: left; margin: 5px; /*odstęp między zdjęciami*/ position: relative; } .lb-album li > a, .lb-album li > a img { display: block; } .lb-album li > a { width: 150px; /*wygląd okienka z mini zdjęciem*/ height: 150px; position: relative; padding: 5px; background: #000; margin-bottom: 25px; } .lb-album li > a span { position: absolute; /*wygląd i położenie okienka które pojawia się nad miniaturą po najechaniu na zdjęcie*/ width: 150px; height: 150px; top: 5px; left: 5px; text-align: center; line-height: 150px; color: rgba(0,0,0,0.8); font-size: 24px; opacity: 0; background: rgba(234,237,238,0.8); -webkit-transition: opacity 0.3s linear; /*opcje wyświetlania tego okna*/ transition: opacity 0.3s linear; } .lb-album li > a:hover span { opacity: 1; } .lb-overlay /*Wygląd podglądu dużego zdjęcia*/ { width: 0px; height: 0px; position: fixed; overflow: hidden; left: 0px; top: 0px; padding: 0px; z-index: 99; text-align: center; background: rgb(0,0,0); /*tło i gradient pod zdjęciem*/ background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.56) 0%,rgba(0,0,0,1) 100%); background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.56) 0%,rgba(0,0,0,1) 100%); } .lb-overlay > div /*położenie strzałek nawigacyjnych*/ { position: relative; color: rgba(27,54,81,0.8); margin: 40px auto 0px auto; } .lb-overlay a.lb-close /*położenie przyciku Close*/ { background: rgba(255,255,255,0.9); z-index: 1001; color: #000; position: absolute; top: 43px; left: 50%; font-size: 18px; text-align: center; width: 75px; height: 27px; overflow: hidden; margin-left: -40px; line-height: 27px; font-weight: bold; opacity: 0; } .lb-overlay img /*wygląd i opcje wyświetlania dużego zdjęcia*/ { max-height: 100%; position: relative; border: 5px solid white; opacity: 0; -webkit-transition: opacity 0.5s linear; transition: opacity 0.5s linear; } .lb-prev, .lb-next /*położenie przycisków nawigacyjnych*/ { text-indent: -9000px; position: absolute; top: -32px; width: 24px; height: 25px; left: 50%; opacity: 0.8; } .lb-prev:hover, .lb-next:hover { opacity: 1; } .lb-prev { margin-left: -30px; background: transparent url(images/arrows.png) no-repeat top left; } .lb-next { margin-left: 6px; background: transparent url(images/arrows.png) no-repeat top right; } .lb-overlay:target /*położenie dużego zdjecia po wyswietleniu*/ { width: auto; height: auto; bottom: 0px; right: 0px; padding: 80px 100px 120px 100px; } .lb-overlay:target img, .lb-overlay:target a.lb-close { opacity: 1; } x:-o-prefocus, .lb-overlay img { height: 100%; }

Nie jest to może totalny odpowiednik lightboxa ale użytek można z tego jakiś zrobić

Alt 10

Alt 11

Tak sobie pomyślałem że na stronie tytułowej można by zrobić pokaz slajdów, powiedzmy kilka najlepszych prac, którymi chcieli byśmy się pochwalić. Przygotowałem kilka zdjęć z serwisu Pixmac.com znajdziesz je w folderze ze strona możesz oczywiście użyć swoich.

przygotujmy szkielet w kodzie, będzie to zwykła lista zdjęć.

<ul class="slideshow">
<li><span>Image 1</span></li>
<li><span>Image 2</span></li>
<li><span>Image 3</span></li>
<li><span>Image 4</span></li>
<li><span>Image 5</span></li>
<li><span>Image 6</span></li>
</ul>

teraz najciekawsze, style które pobudza do życia nasze zdjęcia.

nadajmy jakieś style dla naszej listy, rozmieśćmy ją na ekranie, a dodatkowo użyjemy pseudo elementu :after aby umieścić wzorek nad naszym zdjęciem.

.slideshow,
.slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.slideshow:after {
content: '';
background: transparent url(images/pattern.png) repeat top left;
}

czas na nasze pole span będzie pokrywało cały ekran, wypozycjonujemy go absolutnie ale należy pamiętać aby było przeźroczyste

.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}

nasza animacja będzie trwała 36s mamy 6 zdjęć więc po 6 sekund na każde zdjęcie, przypiszmy teraz zdjęcia do naszej listy i czas w jakim się będą poszczególne zdjęcia wyświetlały. Opis jest niby pod wszystkie przeglądarki ale mój IE stawi opory nie wiem czemu.

.slideshow li:nth-child(1) span {
background-image: url(images/1.jpg)
}
.slideshow li:nth-child(2) span {
background-image: url(images/2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
background-image: url(images/3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.slideshow li:nth-child(4) span {
background-image: url(images/4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.slideshow li:nth-child(5) span {
background-image: url(images/5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.slideshow li:nth-child(6) span {
background-image: url(images/6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}

skupmy się teraz na naszej animacji, w każdym spanie mamy zdjęcie które chcemy żeby pojawiało się i znikało stopniowo. Pobawimy się parametrem opacity dla tego zdjęcia.

nasza animacja będzie trwała 36s. biorąc pod uwagę że 2 zdjęcie pokazuje się w 6 sekundzie musimy określić procentowo ile to jest te 6s. dzielimy 6 przez 36 i mnożymy przez 100%, otrzymujemy 16,6% ale zaokrąglimy to do 17%. nasze 2 zdjęcie będzie miało opacity równe 1 na 17% ale chcąc zastosować efekt fadein/fadeout musimy dodać mu jeszcze jedną klatkę mniej więcej po środku 8% aby nasza animacja była płynna tak samo przy 25% chcemy żeby nasze zdjęcie już zniknęło. nie wiem czy dobrze to tłumaczę ale pobaw się opcjami a będziesz wiedział o co mi chodzi mniej więcej.

@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}

tak w tym momencie wygląda nasza praca.

Alt 12

Zapomniałem chyba nadmienić że w stylach nie potrzebujemy już tego zapisu, bo efekt slideshow ustawiłem na wszystkich podstronach.

html {
background: url(images/2.jpg) no-repeat center center fixed;
-webkit-background-size: cover; /*chrome*/
-moz-background-size: cover; /* mozilla*/
-o-background-size: cover; /*opera*/
background-size: cover;
height: 1200px;
}

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dyskusja (2 wypowiedzi)

Dodaj odpowiedź
  • Odpowiem na pierwsze pytanie, w zasadzie na zdanie :) To ma być strona dla grafika, fotografa który chce się pochwalić swoimi najlepszymi pracami więc nie będzie wrzucał zdjęć w rozdzielczości 800×600 stąd tez brak płynności na słabszych komputerach ale coś za coś.

    znacznik br fakt coś mi nie pasowało w nim ale nie wiedziałem co dzięki za nakierowanie :P

    Co do logo każdy ma swoją technikę tworzenia stron to czy lepiej tak czy tak zawsze pozostaje kwestią sporną :) PS. Zauważyłem to już przy ostylowywaniu że mogłem to inaczej zbudować ale doszedł bym do tego samego wyglądu więc uważam że obie wersje są dobre.

Dodaj komentarz