10 niesamowitych sztuczek CSS do przekształcenia układów stron internetowych

Każdy, kto ma doświadczenie w projektowaniu stron internetowych, niezależnie od tego, czy korzystałeś z kreatorów witryn typu „zrób to sam”, czy też stworzyłeś witrynę od zera, prawdopodobnie słyszał już o CSS. To niezwykle potężne narzędzie może służyć do przekształcania układów stron internetowych, dając Ci możliwość przejęcia kontroli nad witryną i osiągnięcia twórczej wizji. Ale jak wykorzystać kaskadowe arkusze stylów, aby uwolnić potencjał swojej następnej witryny?

W tym przewodniku znajdziesz tylko szczegółowe informacje o właściwościach CSS, które zostały użyte do utworzenia nagłówka widocznego na powyższym obrazku. Możesz znaleźć ten projekt tutaj na CodePen, dając Ci szansę na samodzielne wypróbowanie.

Manipulacja obrazem CSS

Pierwszym krokiem, jaki musimy wykonać, aby zbudować naszą sekcję nagłówka, jest dodanie obrazów do strony. Aby osiągnąć ten cel, możesz skorzystać z wielu metod, więc omówiliśmy najpopularniejsze, wraz z kilkoma sztuczkami, które pomogą Ci manipulować obrazami.

1. Obraz tła CSS

Chcemy mieć pełnoekranowy obraz tła dla naszego nagłówka, a właściwość CSS background-image jest idealna. Najpierw musimy stworzyć kontener dla naszego obrazu (i pozostałych elementów w nagłówku).

Zaczęliśmy od dodania tagu div z „header” jako jego klasą, a następnie ustawienia jego wysokość do 100vh i jej szerokość do 100vw; to daje nam pole, które ma dokładnie taki sam rozmiar jak rzutnia. Dodaliśmy również regułę CSS dla treści strony, z jej przepełnienie ustawione na ukryte i jej marginesy ustawione na 0px.

Gdy kontener jest na swoim miejscu, możemy dodać obraz tła, a do osiągnięcia tego celu potrzebne są trzy różne reguły CSS. Pierwszy, obraz tła, wymaga adresu URL, który będzie działał jako źródło obrazu tła, a do tego celu użyliśmy przydatnego katalogu Unsplash. Musimy też ustawić rozmiar tła do pokrycia i pozycja tła do dołu, ale możesz poeksperymentować z nimi, aby uzyskać najlepsze wyniki.

2. Tryb mieszania tła CSS

Tryby mieszania CSS umożliwiają mieszanie obrazów i tekstu, podobnie jak funkcja mieszania w oprogramowaniu takim jak Adobe Photoshop. Aby tryby mieszania działały z naszym obrazem tła, ustawiamy kolor tła do półprzezroczystej bieli przed dodaniem trybu mieszania, którego chcieliśmy użyć.

Podążając za tym, tryb mieszania w tle został ustawiony na miękkie światło, co pozwala nam zmiękczyć obraz.

3. Ścieżka klipu CSS

W naszej następnej sztuczce użyjemy reguły zwanej clip-path. Używając tagów HTML img, możesz ustawić ścieżkę, która ukryje części obrazów, z którymi pracujesz. Możesz użyć do tego ogólnych kształtów, ale możesz również użyć aplikacji do generowania SVG, aby stworzyć bardziej skomplikowany projekt.

Dodaliśmy tag div z "flex_image_box", aby działał jako pojemnik na trzy obrazy, używając właściwości display CSS, aby przekształcić go w flexbox (porozmawiamy o tym później). Wewnątrz znacznika div dodano trzy znaczniki img, z identyfikatorami ustawionymi jako „img1”, „img2” i „img3”. Ustawienie szerokość każdego obrazu do 600px, Jesteśmy zdolni do pozostaw właściwość wysokości pustą bez zmiany proporcji obrazów; teraz nadszedł czas, aby dodać nasz clip-path!

Aby utworzyć nasze trzy trójkąty, użyliśmy tej samej ścieżki przycinania wielokąta dla img1 i img3, z odwróconą wersją dla img2. Musieliśmy również pobawić się pozycjonowaniem naszego kontenera flex-box, aby upewnić się, że obrazy znajdują się we właściwej pozycji na ekranie. Nasze zasady clip-path można zobaczyć poniżej.

4. Krycie CSS

Krycie określa poziom przezroczystości dowolnego elementu HTML. Ustawiliśmy krycie naszych obrazów do 90%, dzięki czemu są lekko nieprzezroczyste, dzięki czemu ładnie stapiają się z tłem.

CSS Responsywny tekst i obrazy

Zbadaliśmy już sztukę tworzenie oszałamiających responsywnych stron internetowych z wykorzystaniem HTML, CSS i JavaScript w przeszłości, ale możemy budować na zasadach, które już rozumiesz, zapewniając głębszy wgląd w umiejętności potrzebne do opanowania układu witryny.

1. CSS Responsive/Relatywne jednostki

Jednostki CSS, takie jak px, pt i cm, są jednostkami bezwzględnymi, a to oznacza, że ​​przeglądarka internetowa wyrenderuje je w tym samym rozmiarze, bez względu na szerokość i wysokość okna, które zajmują. Jednostki względne są różne, co powoduje, że wysokości i długości odnoszą się do innych miar, takich jak okno przeglądarki lub element nadrzędny. Poniższe jednostki względne są powszechnie używane i są niezbędne do responsywnego projektowania stron internetowych.

• em: Ta jednostka jest zwykle używana z tekstem. Odnosi się do rozmiaru czcionki bieżącego elementu, co daje 4em cztery razy większy rozmiar niż ustawiony rozmiar czcionki.
• Rem: Podobnie jak em, rem odnosi się do rozmiaru czcionki elementu; element główny w hierarchii służy do definiowania rozmiaru wyjściowego.
• vw/vh: Określając szerokość i wysokość na podstawie rozmiaru widocznego obszaru, 2vw równa się 2% szerokości przeglądarki, a 2vh równa się 2% wysokości przeglądarki.
• %: Jednostka % oblicza wymiary na podstawie rozmiaru elementu nadrzędnego.
• vmin/vmax: te jednostki generują wymiary odpowiadające 1% najmniejszych lub największych wymiarów widocznego obszaru, zapewniając elementom możliwość bezpośredniego reagowania na rozmiar okna przeglądarki.

2. Rozmiar czcionki CSS

Tę właściwość można ustawić przy użyciu wartości domyślnych, które są wstępnie zdefiniowane przez główny arkusz stylów witryny lub przeglądarkę internetową użytkownika. Wartości te obejmują medium, xx-small, x-small, small, large, x-large i xx-large, przy czym medium jest ustawione jako domyślne dla każdego tekstu, który nie zawiera znacznika CSS rozmiaru czcionki. Alternatywnie, wartości względne mogą być stosowane podczas korzystania z właściwości CSS font-size, a to jest metoda, której użyliśmy, aby zapewnić, że tekst w naszej sekcji nagłówka ma odpowiedni rozmiar dla każdego rzutnia.

Dodaliśmy dwa tagi nagłówka do naszego kodu HTML, dzięki czemu możemy dodać tekst do projektu. Jeden to główny duży nagłówek, a drugi to podnagłówek i oba używają jednostek względnych.

Związane z: Jak zmienić rozmiar czcionki HTML w CSS?

3. Szerokość i wysokość CSS

Wszystkie elementy HTML są dostarczane z wymiarami wysokości i szerokości, niezależnie od tego, czy są to tagi div, img, a, czy innego typu. Te wymiary mogą być automatycznie ustawiane na wartości domyślne, ale mogą być również dyktowane przez projektantów stron internetowych przy użyciu poprawnych reguł; użyliśmy obu tych metod dla tego nagłówka.

W obrazie tła zostały użyte jednostki responsywne, z wysokością ustawioną na 100vh i szerokością ustawioną na 100vw, ale użyliśmy również jednostek bezwzględnych dla naszych trzech obrazów. Warto zbadać i poeksperymentować z jednostkami szerokości i wysokości CSS, z opcjami takimi jak „dziedziczenie” zapewniającymi oznacza przyjęcie wymiarów elementu nadrzędnego i istnieje wiele innych sztuczek, których możesz użyć.

4. Tryb mieszania CSS

CSS mix-blend-mode jest bardzo podobny do trybu mieszania w tle, tylko może być zastosowany do dowolnego elementu, a nie wyłącznie do tła. Użyliśmy tej właściwości w naszym nagłówku H1, aby dodać teksturę i uczynić projekt ciekawszym. Zaczęliśmy od ustawienia naszego kolor tekstu na czarny, a następnie ustawiając mix-blend-mode do nakładki.

Warto zapoznać się z różnymi opcjami mieszania, które masz do czynienia z tekstem, ponieważ tła z unikalnymi profilami kolorów będą różnie reagować na używane ustawienia.

5. Przekształcenie tekstu CSS

CSS text-transform to sprytna właściwość, która umożliwia projektantom zmianę wielkości liter w tekście na swoich stronach internetowych bez wpływu na sposób, w jaki wyszukiwarki go czytają. Na przykład mamy ustaw transformację tekstu na wielkie litery w naszym nagłówku H1, czyniąc każdą literę wielką, bez względu na to, jak wprowadzimy ją do naszego kodu HTML.

Właściwości przepełnienia CSS

HTML może często wydawać się sztywną strukturą, która wyznacza ścisłe granice dla treści na twoich stronach internetowych, ale nie ma to miejsca, gdy używane są właściwości przepełnienia.

Przepełnienie CSS i przepełnienie tekstu

Overflow i text-overflow to bardzo podobne właściwości CSS. Przepełnienie można zastosować do dowolnego elementu, zapewniając kontrolę nad zawartością, która może ominąć jego granice. Przepełnienie tekstu jest podobne, ale dotyczy tylko tekstu i daje możliwość dodania dodatkowych parametrów do reguł. W tym projekcie użyliśmy tylko overflow (użyliśmy go do ograniczenia rozmiaru treści naszej strony), ale możesz przeczytać o text-overflow na Szkoły W3 stronie internetowej.

Używanie CSS w Twoich układach internetowych

CSS jest niesamowicie potężnym narzędziem, które umożliwia projektantom stron internetowych i programistom tworzenie oszałamiających stron internetowych za pomocą kodu. Zachęcamy do spojrzenia na CodePen, który udostępniliśmy na początku artykułu, ponieważ da ci to jeszcze głębszy wgląd w działanie wszystkich tych narzędzi. Dodatkowo możesz grać główką, którą stworzyliśmy, aby dodać własne wykończenie.

8 podstawowych wskazówek i sztuczek CSS, które powinien znać każdy programista

Czy używasz tych kluczowych metod CSS do szybkiego przepływu pracy i pięknego projektowania stron internetowych?

Czytaj dalej

O autorze