Jak tworzyć niesamowite efekty z kształtami CSS

Sep 17, 2025

Jak

Deweloperzy Frontend mają tendencję do myślenia w prostokątach; Prostokąty wewnątrz prostokątów wewnątrz prostokątów wewnątrz prostokątów. Możemy zatrudniać sztuczki z granicami, aby zrobić kółko lub trójkąty, ale naprawdę są wciąż prostokątne pudełka w przebraniu. Cóż, to ma się zmienić CSS. Kształty, A. W3C. Zalecenie kandydata, które zmieni sposób, w jaki myślisz.

Oferta świąteczna: Zaoszczędź do 47% na subskrypcji magazynu Net

Kształty CSS umożliwiają tworzenie kształtów geometrycznych za pomocą funkcji kształtu: koło (), elipsa (), wstawka () i wielokąta () i zastosować je do elementów lub efektów, takich jak przycinanie i filtry. Co więcej, kształty mogą wpływać na przepływ treści, umożliwiając starannie zawijanie tekstu wokół funkcji, takich jak okrągłe awatary.

Być może najpotężniejsza funkcja kształtu jest wielokąt (), ponieważ pozwala tworzyć złożone arbitralne kształty za pomocą nieograniczonych punktów zdefiniowanych za pomocą koordynujących pary. Jeśli użyłeś Svg. , to będzie cię znane.

W tym samouczku będziemy używać wielokątów z właściwością ścieżki klipu, aby wyciąć kształt geometryczny z naszego tekstu, aby widoczne jest tylko obszarze zamkniętego w wielokąźmie. Dodamy również proste przejścia, aby wprowadzić efekt na życie. Możesz złapać kod dla każdego kroku w tym repo Github, tutaj .

01. Zacznij od HTML

Po pierwsze, przygotujmymy się do naszego HTML. Potrzebujemy tylko & lt; div & gt; , nasza .spinacz Klasa i nasz tekst, ale jak będziemy korzystać z pseudo-elementów do tego efektu, również dodamy atrybut o tej samej wartości co tekst, abyśmy mogli przeczytać go do CSS, a nie twardego kodowania.

Następnie chcemy, aby wypełnić ekran i wyrównać tekst Dead Center - możemy użyć niektórych Flexbox. magia do tego. Stylmy i rozmiar tekst.

 .Clip {
// Ekran wypełnienia.
pozycja: absolutna;
Top: 0;
Po lewej: 0;
Szerokość: 100%;
Wysokość: 100%;
// wyrównanie
Wyświetlacz: Flex; // Użyj flex do wyrównania
Justify-Content: Center; // Wyrównanie poziome.
Wyrównuj przedmioty: Centrum; // Wyrównanie pionowe
// stylizacja tekstowa
Czcionka-rodzina: "Praca Sans", Arial, Helvetica, Sans-Serif; // Praca SANS jest dostępna z czcionek Google
Czcionka: 800;
Rozmiar czcionki: 8Rem;
Tekst-Wyrównuj: Centrum;
Transformacja tekstowa: wielkie litery;
}

02. Dodaj trochę stylu

Teraz możemy stylować ::przed i ::po Pseudo-elementy, z każdą warstwą na górze tekstu. Domyślnie, ::po będzie miał najwyższy indeks z. Przydatny attr () Selektor przeczyta wartość naszego treści danych atrybut.

Pseudo-elementy udostępniają pozycję i właściwości flexbox, dzięki czemu możemy lekko zrefleksorować nasze CSS i wykorzystać moc SCSS, aby zachować schludnie w przybliżeniu stylów. Stylizacja czcionek zostanie odziedziczona. Używamy ... Aby oznaczyć właściwości, które już objęliśmy.

 .Clip {
...
// położenie siebie (& amp;) i pseudo-elementy (przed / po)
& amp ;,
& amp ;: wcześniej,
& amp; :: po {
  pozycja: absolutna;
  Top: 0;
  Po lewej: 0;
  Szerokość: 100%;
  Wysokość: 100%;
  Wyświetlacz: Flex; // Użyj flex do wyrównania
  Justify-Content: Center; // Wyrównanie poziome.
  Wyrównuj przedmioty: Centrum; // Wyrównanie pionowe
}
& amp ;: wcześniej,
& amp; :: po {
  Treść: attr (treść danych); // Użyj wartości atrybutu jako treści
}
}

Wynik w przeglądarce powinien wyglądać identyczny, ponieważ pseudo-elementy siedzą bezpośrednio na tekście. Możesz zmodyfikować swoje style Devtools. zobaczyć, jak są warstwowe.

03. Ustaw tła i kolory

Czas dać każdą warstwę innego koloru i tła - chodźmy na pogrubione, na trendzie, neonowe kolory, które predefiniowaliśmy jako zmienne. Możemy również zmusić tekst do zawijania na wielu liniach za pomocą sztuczki przyczepnej CSS, zamiast dodawać je w HTML.

Jest to pomocne, ponieważ w przeciwnym razie będziemy musieli użyć dwóch różnych rodzajów przerw linii: & lt; br & gt; w środku & lt; div & gt; a tym bardziej niejasne \ZA w atrybucie.

 .Clip {
...
& amp ;,
& amp ;: wcześniej,
& amp; :: po {
  Wyściółka: 0 50%;
  Boksizacja: Border-Box;
}
& amp ;: przed {
  Kolor: $ biały;
  Tło: $ różowy;
}
& amp; :: po {
  Kolor: $ różowy;
  Tło: $ Blue;
}
}

Padding Trick pracuje, podając tekst poziomą zerową, wymuszając przeglądarkę, aby owinąć każde słowo na nową linię.

04. Załóż tekst

Czas na interesujący bit - jesteśmy gotowi do zaczywania przycinania naszego tekstu. Zamierzamy stworzyć przekątną klip, krojenie ekranu na dwa trójkąty z dołu w lewo do góry.

The. ::przed Pseudo-Element będzie widoczny tylko w lewym górnym trójkącie i ::po Pseudo-element będzie widoczny tylko w trójkącie prawnym. Oto kod, aby osiągnąć to:

 .Clip {
...
& amp ;: przed {
  ścieżka klipu: wielokąt (0 0, 100% 0, 0 100%, 0 100%);
}
& amp; :: po {
  Clip-Path: Wielokąt (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

Stwarza to wielokąty z czterema punktami. Każdy punkt jest opisany przez parę koordynującej; Po prostu wartość X (od lewej do prawej) i Y (do góry do dołu). Wartość może być absolutna (na przykład: px) lub krewna (na przykład:%). Punkty odnoszą się do górnej w lewo, więc punkty 100% 100% są w prawym dolnym rogu.

Wyobraź sobie linie łączące każdy z punktów w kolejności, w jakiej są wymienione, aby utworzyć kształty. w ::przed Wielokąt zaczyna się w lewym górnym rogu (0 0) , porusza się po ekranie na prawy prawy (100% 0) , a potem do dołu w lewo (0 100%) .

Mam nadzieję, że teraz zobaczysz swój obcięty tekst. Zmień rozmiar przeglądarki, a zobaczysz odpowiednio przycinanie.

Jeśli używasz Chrome, prawdopodobnie zobaczysz kilka reprezentacji podczas zmiany rozmiaru, spowodowane przez warstwy kompozytowe Chrome. Niestety, ponieważ demo jest pełny ekran, zalecany Will-cish: Transform nieruchomość i. Transform: Tłumacz (0) Hack Nie należy tego naprawić. Jeśli jednak przełączysz .spinacz do Pozycja: Naprawiono; to działa.

 Klip {
& amp ;,
& amp ;: wcześniej,
& amp; :: po {
  Pozycja: Naprawiono;
}
}

Pamiętaj, że Chrome próbuje być pomocny, a ten obejście będzie miał wpływ na wydajność. Pamiętaj, aby profilować wydajność podczas wykonywania takich rzeczy w produkcji.

05. Dodaj przejścia.

Teraz, gdy mamy nasz obcięty tekst, przynieśmy do życia z pewnymi przejściami. Dobrą wiadomością jest to, że możesz po prostu przejść klip-ścieżka właściwość, aby przeglądarka wykonuje całą ciężką pracę. Włączmy przejścia na elementy pseudo, a następnie zdefiniuj cztery różne państwa do przejścia między.

Stan 1: Jest to stan początkowy, więc stworzmy trzy inne

Dodaj każdy blok na dole CSS, dzięki czemu można zobaczyć, jak wygląda.

Stan 2: Odsuń się lekko trójkąty, aby odsłonić tło

To będzie wyglądać trochę jak flaga Republiki Konga. Usuwanie 20 procent z czubka każdego trójkąta wielokąta zrobi sztuczkę.

Stan 3: Morph trójkąty w prostokąty

Jest to podobne do francuskiego tricolor, w odwrotnym.

Co z tą czwartą parą koordynowaną? Cóż, to jest miejsce przydatne. Okazuje się, że przejście klip-ścieżka Działa tylko wtedy, gdy używana funkcja kształtu jest taka sama (tak wielokąt, wielokąt), a liczba stosowanych punktów jest taka sama - przeglądarka przejdzie do każdego indywidualnego punktu. Dlatego mamy to czwarty ukryty punkt - pozwala nam płynnie przejść z trójkąta do prostokąta, po prostu ujawnimy, że czwarty punkt, kiedy go potrzebujemy.

 .Clip {
& amp ;: przed {
  ścieżka klipu: wielokąt (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp; :: po {
  Clip-Path: Wielokąt (100% 0, 100% 100%, 60% 100%, 60% 0);
}
}

Stan 4: Przekręć te wielokąty

Trzymając się motywu naszego flagi, przypominałby to "Wymagam holownika" w świecie sygnalizacji flagi morskiej.

Tutaj skręcamy wielokątów, więc przekraczają w środku i tworzą dwa trójkąty każda. Jest to wtedy, gdy przejścia mogą pomóc ci zrozumieć para koordynujące. Naprawdę spowalniając przejście, możesz zobaczyć, jak każdy punkt porusza się na ekranie do nowej pozycji, a zaczniesz rozumieć, jak zamawianie par wpływa na przejście. Właściwie daje ci dużo kontroli nad przejściem.

 .Clip {
& amp ;: przed {
  ścieżka klipu: wielokąt (100% 0, 0 0, 100% 100%, 0 100%);
}
& amp; :: po {
  ścieżka klipu: wielokąt (100% 0, 100% 100%, 0 0, 0 100%);
}
}

Zakończyć

Wszyscy jesteśmy ustawiani, ale nie jesteśmy jeszcze w stanie zmienić stanów, co oznacza, że nie można zobaczyć przejść w akcji. Istnieje wiele sposobów, aby to osiągnąć, więc to zależy od ciebie. W Repo i Codepen użyłem 100-procentowego rozwiązania javascript z ukrytymi przyciskami radiowymi i selektorem ~ ogólnym rodzeństwa - spójrz. Możesz także sprawdzić ten kodeks tutorial tutaj .

Ten artykuł pierwotnie pojawił się w wydaniu 298 netto , Magazyn dla profesjonalnych projektantów stron internetowych i programistów - oferujących najnowsze nowe trendy internetowe, technologie i techniki. Kup problem 298 lub Subskrybuj netto tutaj .

Specjalna oferta świąteczna: Zaoszczędź do 47% na subskrypcji do sieci Dla ciebie lub przyjaciela na Boże Narodzenie. To ograniczona oferta, więc poruszaj się szybko ...

Powiązane artykuły:

28 Znakomite przykłady CSS
Jak utworzyć układ piramidy z kształtami CSS
CSS Tricks, aby zrewolucjonizować układy internetowe

Jak tworzyć niesamowite efekty z kształtami CSS

01. Zacznij od HTML

02. Dodaj trochę stylu

03. Ustaw tła i kolory

04. Załóż tekst

05. Dodaj przejścia.

Zakończyć

Jak - Najpopularniejsze artykuły

Jak dodać czcionki w Photoshopie

Mapa ilustracja: Przewodnik krok po kroku

Jak rozwiązać skróconą konstrukcję

Jak tworzyć tekst usterki i efekty obrazu w CSS

10 Niesamowite rzeczy, które możesz zrobić z warstwami

Jak przygotować plik do drukowania

Jak skonfigurować tematyce witryny z zmiennymi CSS

Jak zilustrować oczy zwierzęcych

Kategorie