baner

Lekcja 64

Projektowanie stron

 
Image - Styling, Filters, Shape

Kilka wskazówek - po co?
  • Stylizacja:
    • Zwiększanie atrakcyjności wizualnej: Nadaj obrazowi określony klimat, np. vintage, nowoczesny lub marzycielski.
    • Dopasowanie do motywu: Do prezentacji, blogów lub mediów społecznościowych stylizacja pomaga zjednoczyć wizualne elementy z ogólną estetyką.
    • Dodanie głębi: Używaj stylów, aby wyróżnić obraz, np. dodając teksturę, cienie lub efekty świetlne.
  • Filtry:
    • Korekta kolorów: Filtry mogą dostosować jasność, kontrast lub nasycenie, aby obraz bardziej się wyróżniał lub wyglądał naturalniej.
    • Tworzenie nastroju: Filtr monochromatyczny dla poważnego tonu, ciepłe filtry dla nostalgii, zimne filtry dla futurystycznego efektu.
    • Szybkie poprawki: Natychmiastowe poprawianie średniej jakości zdjęcia bez szczegółowej edycji.
  • Kształt:
    • Kadrowanie i ramki: Skupiaj uwagę na kluczowym obiekcie, zmieniając kształt lub wycinając zbędne części.
    • Kreatywne prezentacje: Używaj kształtów, takich jak koła lub wielokąty, aby obrazy lepiej pasowały do projektów lub układów.
    • Dostosowane układy: Dopasuj obrazy do konkretnych przestrzeni lub celów (np. okrągły obrazek profilowy lub baner).
  • Przykłady

cw 630

  • Utwórz dokument cw630.html oraz cw630.css
  • Wszystkie ustawienia stylu zapisz w pliku zewnętrznym
  • Zaimplementuj kod z załączonych plików

    kod html kod css

  • Zmodyfikuj styl tak, aby otrzymać efekt podobny jak na załączonym obrazie.
  • Dostosuj projekt strony do wyświetlania na urządzeniu przenośnym (smartfon) i stacjonarnym (desktop)
  • Dodaj do dokumentu obszar stopki, w którym centralnie w linii umieścisz dwa odnośniki w postaci przycisków do ćwiczeń z lekcji 57 oraz 60.
  • Dodaj do dokumentu obszar nagłówka, w którym umieścisz wycentrowany tekst: "Radom 2025" pisany czcionką Sunshiney (Google Fonts) w rozmiarze trzy razy większym od domyslnego rozmiaru czcionki przeglądrki

cw 631

  • Utwórz dokument cw631.html oraz cw631.css
  • Wszystkie ustawienia stylu zapisz w pliku zewnętrznym
  • Zaimplementuj kod z załączonych plików

    kod html kod css

  • Zmodyfikuj kod CSS w taki sposób, aby dla każdego obrazu w galerii po najechaniu na niego wskaźnikiem myszy widoczny był inny filtr CSS
  • Dodatkowo spraw, aby również po najechaniu wskaźnikiem myszy pojawił się element (element domyślnie nie jest widoczny), który bedzie zawierał napis informujący jaki filtr został zastosowany. Element powinien być widoczny na tle obrazka z galerii, podobnie jak w przykładzie z ćwiczenia 630.

 

Pytania i odpowiedzi: