Mój brat (14 lat) ostatnio zaczął uczyć się kodzić. Bardzo szybko znudził się porządnymi stronami, które mają jakieś funkcje, a zaczął przeglądać stronki, które nie robią nic 😉 Stąd tutorial HTML i CSS.
Głownie losuje sobie stronki za pomocą Usless Web.
Zapytał mnie, jak zrobić stronę w stylu: www.republiquedesmangues.fr (została moją inspiracją). Tak, ta strona nie ma sensu, ale jest bardzo prosta do wykonania. Także dzisiaj wpis z tutorialem dla niego, a może i ktoś jeszcze będzie miał ochotę taką stronę zrobić 🙂
Wykonanie całości to pewnie ok 30 min roboty, więc jest to bardzo szybki tutorial.
Co oto dzisiaj powstanie:
1) Tworzymy nowy projekt
Może być to nowy projekt na pulpicie czy w dowolnym miejscu na dysku. Będzie zawierał plik index.html oraz plik style.css.
Do pliku index.html
kopiujemy bazowy szablon html:
See the Pen base_html by Malgorzata Rita (@ritawanderlust) on CodePen.
Plik style.css
chwilowo jest pusty.
2) Kolorujemy tło
W pliku CSS ustawiam właściwość background-color
. U mnie będzie to jasna zieleń w kolorze: #f5ffd8. Więcej kodów kolorów można wziąć np. ze strony color-hex.
background-color: #f5ffd8;
}
See the Pen +background by Malgorzata Rita (@ritawanderlust) on CodePen.
3) Grafiki na stronę
Do naszego projektu potrzebujemy dwa obrazki – element na środek o raz promienie. W moim wypadku jest to grafika awokado i zielone promienie na przeźroczystym tle. Oczywiście, mogłby to być dowolne dwie grafiki 😉
Zapisujemy je w folderze naszego projektu:
4) Wstawiamy obrazki na stronę
W pliku index.html dodajemy grafiki na stronę przez wstawienie kodu HTML o znaczniku img, zazwyczaj wygląda to tak <img src="ścieżka/do/pliku" alt="opis"/>
. Nasza ścieżka do obrazka u mnie ./avocado.png. W body zastępuję „Your code here” pobranymi obrazkami:
<img src="./rays.png" />
<img src="./avocado.png" />
</body>
See the Pen +images by Malgorzata Rita (@ritawanderlust) on CodePen.
5) Zmiana rozmiaru obrazków
W pliku index.html obu obrazkom dodajemy klasy – awokado będzie na górze, dlatego dostanie klasę top
, a promienie będą pod spodem – klasa bottom
.
<img class="bottom" src="./rays.png" />
<img class="top" src="./avocado.png" />
</body>
W pliku style.css ustawiamy wysokość i szerokość obrazków:
width: 300px;
height: 300px;
}
.bottom {
width: 500px;
height: 500px;
}
Nasz kod na tym etapie wygląda o tak:
See the Pen +resize by Malgorzata Rita (@ritawanderlust) on CodePen.
6) Wypośrodkowanie elementu
Aby wypośrodkować element w CSS wykorzystamy właściwość position i nadamy jej wartość absolute.
Więcej o właściwości position i innych jej wartościach znajdziecie w tym filmiku
Właściwość position pozwala manipulować elementem na stronie: góra-dół (top-bottom), lewo-prawo (left-right). Wartość absolute sprawia, że element pozycjonujemy względem krawędzi jego bezpośredniego rodzica. U nas rodzicem obrazków jest element body.
Zacznijmy od awokado. Chcemy je przesunąć 50% wysokości okna przeglądarki w dół i 50% szerokości okna przeglądarki w bok – lewo. Spróbujmy. Ustawimy w CSS:
width: 300px;
height: 300px;
position:absolute;
top: 50%;
left: 50%;
}
Dziwne, nadal nasze awokado nie jest na środku. A to dlatego, że wypośrodkowaliśmy jego lewą krawędź, a nie całe awokado.
Tak naprawdę, aby wypośrodkować awokado chcemy je przesunąć w dół o 50% oraz odjąć połowę całej wysokości awokado tj. 150px (awokado ma wysokość ustawioną height: 300px;
). Na matematyce odjęcie dwóch różnych jednostek by nie zadziałało, mimo że intuicyjnie wiemy, ile to jest od 50% naszego wzrostu odjąć 15cm.
Tu z pomocą przychodzi nam funkcja calc(), która działa właśnie tak, jak przykład ze wzrostem.
Możemy użyć w CSS: top: calc(50% - 150px)
. Czyli od połowy wysokości okna przeglądarki odejmujemy połowę wysokości obrazka. Analogicznie możem przesunąć nasze awokado w lewo left: calc(50% - 150px)
:
width: 300px;
height: 300px;
position:absolute;
top: calc(50% – 150px);
left: calc(50% – 150px);
}
Teraz awokado jest dokładnie na samym środku okna przeglądarki. Udało się!
Czas analogicznie przesunąć promienie. Wiemy, że ich wysokość i szerokość jest ustawiona na 500px, połowa z tego to 250px. W związku z tym, analogicznie do przykładu z awokado klasa bottom będzie wyglądała tak:
width: 500px;
height: 500px;
position:absolute;
top: calc(50% – 250px);
left: calc(50% – 250px);
}
See the Pen +position by Malgorzata Rita (@ritawanderlust) on CodePen.
7) Obracanie promieni
Czas przygotować animację promieni. W tym celu musimy skorzystać z reguły @keyframes, która pojawiła się na blogu przy okazji tworzenia pisanek w CSSie.
Nasza animacja (nazwana spin) będzie bardzo prosta. Skorzystamy z właściwości transform, aby obracać (rotate) cały obrazek od kąt 0st do kąta pełnego tj. 360st – czyli wykonujemy pełen obrót.
W pliku style.css dopisujemy:
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Następnie na grafice – promieniach użyjemy naszej animacji o nazwie spin. Wykorzystamy właściwość animation. Podajemy nazwę animacji (name), czas trwania jednego wykonania (duration), sposób przyspieszenia (timing function) oraz liczbę powtórzeń (iteration count).
Możemywięc do klasy bottom dopisać:
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
albo wszystkie trzy ustawienia podać w jednej linii jako animation: spin 20s linear infinite
.
Stąd klasa bottom będzie wyglądała tak:
width: 500px;
height: 500px;
position:absolute;
top: calc(50% – 250px);
left: calc(50% – 250px);
animation: spin 20s linear infinite;
}
See the Pen +animation by Malgorzata Rita (@ritawanderlust) on CodePen.
Gratulacje, strona gotowa!
Pełen kod udostępniony na GitHubie: Avocado here
Co dalej?
Dalej stronę można np. opublikować w Internecie za pomocą Github pages, sprawić, że będzie publicznie dostępna.
Niedosyt kodowania? Sprawdź Tutorial: CV w HTML i CSS – krok po kroku!
Dajcie znać czy podoba wam się taki tutorial HTML i CSS (w domyśle pisany dla osoby dopiero zaczynającej przygodę z kodem).
Można prościej, bez liczenia pikseli 😉
top: 50%; left: 50%; transform: translate(-50%, -50%);
Ewentualnie flexem jeśli można olać IE
display: flex; justify-content: center; align-items: center;
ech pierwsza wersja była z flexem, ale dotarło do mnie, że nie jesteśmy na tym etapie, bym mu tłumaczyła flexbox ;D
z tym – transform: translate(-50%, -50%); – faktycznie spoczko pomysł, nawet chyba łatwiej to wytłumaczy ^^
tutorial sie udal. Wersja z jablkiem udana! 😀
Nie widać kodu na stronie bo „Serwer codepen.iocodepen.io odrzucił połączenie.”
Pobrałem pliki z linku https://ritaly.github.io/avocado_here/index.html
Może to banalne ale nie umiałem ustawić pozycji obrazków. Pomyliłem minus z myślnikiem.
Dziękuję za dobry poradnik.