baner

Lekcja 65

Projektowanie stron

 
Object: fit, position. Masking.

Do czego można to wykorzystać?
  1. object-fit:
    • Zastosowanie: Służy do określenia, jak zawartość elementu (np. obrazek lub wideo) powinna być dopasowana do kontenera.
    • Przykład: Jeśli masz obrazek o różnych proporcjach niż kontener, możesz użyć object-fit: cover;, aby obrazek wypełnił cały kontener, przycięty do odpowiednich proporcji.
  2. object-position:
    • Zastosowanie: Umożliwia precyzyjne ustawienie pozycji zawartości w kontenerze, gdy używasz object-fit.
    • Przykład: Możesz ustawić obrazek w centrum kontenera za pomocą object-position: center; lub przesunąć go w dowolne miejsce, np. object-position: top right;.
  3. Masking:
    • Zastosowanie: Pozwala na ukrywanie części elementu za pomocą maski, co może być użyteczne do tworzenia efektów graficznych.
    • Przykład: Możesz użyć mask-image do nałożenia maski na obrazek, np. mask-image: url(mask.png);, aby tylko określone części obrazka były widoczne.
  4. Przykład

cw 650

  • Utwórz dokument cw650.html oraz cw650.css
  • Wszystkie ustawienia stylu przenieś i zapisz w pliku zewnętrznym
  • Zaimplementuj kod z przykładu

    kod html

  • Obrazek / obrazy wykorzystywany/e w ćwiczeniu umieść w folderze IMG
  • Dodaj proste animacje do obrazków, aby projekt był bardziej interaktywny.
  • Dodaj cień wewnętrzyny do elementów z obrazkami
  • Dodaj zaokrąglenia narożników obrazków w taki sposób, aby lewy górny i prawy dolny narożniki miały mniejszy promień krzywizny, a prawy górny i lewy dolny większy (np. 15px i 50px)
  • Dla widoku strony w wersji dla dużego wyświetlacza (monitor desktopowy) dodaj panel lewy, w którym umieścisz ułożone w pionie kolejne litery wyrazów "RADOM 2025" w rozmiarze takim, aby starały się wypełnić całą dostępną wysokość
  • Dodaj do projektu sekcję nagłówkową o treści: Wykonał: Imię Nazwisko - klasa. Sekcja powinna zajmować całą szerokość okna przeglądarki. Dodaj do sekcji styl tak, aby pasował do całego projektu. Wykorzystaj czcionkę bezszeryfową.
  • Przy obu krawędziach sekcji nagłówkowej wstaw po jednym niewielkim animowanym obrazku, odsunięte od lewgo i prawgo boku o 50px.
  • Dodaj do projektu sekcję stopki tak, aby zajmował 5% wykosości okna wyświetlacza. Jako content umieść w niej konstrukcję pozwalającą po kliknięciu uruchomić lokalny program pocztowy, a wiadomość powinna być przekierowana na Twój adres email.
  • Zmodyfikuj styl tak, aby otrzymać efekt podobny jak na załączonym obrazie.

 

Pytania i odpowiedzi: