Klovy.pl – Twoje centrum wiedzy!
Related Articles
1. Wstęp
W dzisiejszej części artykułu zajmiemy się zaawansowanym wykorzystaniem HTML i CSS do tworzenia efektownych elementów interfejsu użytkownika. Przedstawimy techniki tworzenia przycisków, metodę flexbox i czcionki.
2. Przyciski
- Przycisk z Cieniem na Tło: Wykorzystamy technikę rzucania cienia na tło przycisku, aby nadać mu trójwymiarowości i wyróżnić na stronie.
- Interaktywny Przycisk: Zmienimy napis na przycisku oraz jego kolor po kliknięciu, aby zapewnić użytkownikowi informację zwrotną po wykonaniu akcji.
- Przycisk z Efektem Przesunięcia: Po najechaniu na przycisk, zastosujemy efekt przesunięcia diagonalnego, który nada mu dynamicznego wyglądu.
3. Flexbox
Flexbox to elastyczny model układu w CSS, który umożliwia łatwe zarządzanie rozmieszczeniem elementów w kontenerze, zarówno w jednym rzędzie, jak i kolumnie. Pozwala to na dynamiczne dostosowywanie układu strony do różnych rozmiarów ekranu i zapewnia większą kontrolę nad wyglądem elementów.
Aby używać flexboxa musimy dodać display: flex; do elementu w CSS, align-items: center; aby ułożyć na środku pod względem osi Y i justify-content: space-between, aby ułożyć elementy w równym odstępie na osi X a więc stworzymy 3 tagi <div> i wystylizujemy je w ten sposób:
Do kodu HTML dodajmy div’a o klasie ’container’ w tym divie dodajemy 3 divy o klasie ’item’
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>Teraz czas na CSS:
- w divie container dodajemy:
- jego wysokość:
height: 200px;, ponieważ jego szerokość definiować będą divy .item display: flex;orazjustify-content: space-between;ialign-items: center;, aby elementy w tym divie zachowywały się tak jak w opisie,- nadajemy kolor tła i padding,
padding: 20px; - w divie .item dodajemy:
- wysokość i szerokość,
- kolor tła i kolor tekstu
- wyśrodkowanie tekstu –
text-align: center; line-height: 100px;określa odstęp między liniami tekstu w bloku elementu
4. Stylowanie czcionek
font-family: 'Arial', sans-serif;
font-size: 24px;
font-weight: bold;
text-decoration: underline; Mamy tutaj:
- font-family – Wybór czcionki
- font-size – Rozmiar czcionki
- font-weight – Pogrubienie tekstu
- text-decoration – Podkreślenie tekstu
5. Podsumowanie
Po tym artykule powinieneś samemu korzystać z stylizowania czcionki, stylizowania (animowania) przycisków, oraz podstawowo korzystać z flexboxa. Kod znajduje się tam gdzie zawsze: https://lucjanmnm.klovy.pl/strony/webdev/
Dodatek!
Na tej stronie znajdziesz testy z CSS – https://www.w3schools.com/css/exercise.asp?filename=exercise_selectors1
Jedynym minusem jest to że strona jest angielska
