Równoległobok CSS3. Kształty CSS: kurs wprowadzający

Cześć wszystkim. Dziś poruszymy dość nietypowy temat, a mianowicie przyszłość web designu, czyli kształty CSS.

Jak wiadomo, jest teraz bardzo modne, ale głównie składa się z prostokątów, co z kolei mocno ogranicza horyzonty projektantów. Do tego dochodzi zdolność adaptacji… która bardzo ogranicza kreatywność. Ale jest jeden ogromny plus - prościej jest owinąć tekst wokół prostokąta, ale trudniej sprawić, by tekst płynął wokół okrągłych lub nierównych kształtów. Bo obrazków nie da się zrobić okrągłymi.

W tym przypadku liczby biegną nam na pomoc. Popularna witryna CSS W3C opublikowała pierwszą dokumentację kształtu. Oto ten post w języku angielskim CSS Shapes Module Level 1. Ten moduł został wydany niedawno 20 czerwca. Jak dotąd jest to wersja beta, która zawiera kształty takie jak prostokąt, trójkąt, elipsa, okrąg i wielokąt.

Przyjrzyjmy się teraz bliżej zaletom CSS Shapes na przykładzie.

Na początek weźmy do tego prosty znacznik HTML, dzięki http://www.webdesignerdepot.com:

To jest przykładowy tekst

W przypadku elementów pozycjonowanych bezwzględnie nie musisz określać zerowej szerokości i wysokości.

Łącząc bordiury można uzyskać jeszcze cztery rodzaje trójkątów, co w połączeniu z tymi już wspomnianymi daje nam osiem opcji. Ich rodzaj i wymagany kod podano w tabeli. 1.

Z tabeli widać, że niewidoczne granice zajmują miejsce, weź to pod uwagę przy pozycjonowaniu elementów. Styl należy również uzupełnić o zerową szerokość i wysokość lub użyć właściwości position, jak w przykładzie 1.

Trójkąt można wykonać w innym kształcie, jeśli ustawisz inną grubość granic. Tak więc kod do tworzenia bloku pokazany na ryc. 4 pokazano w przykładzie 2.

Ryż. 4. Ostry trójkąt

Przykład 2. Ostry trójkąt

Za pomocą obramowania otrzymujemy jednokolorowe trójkąty, aby stworzyć obramowanie pokazane na ryc. 5 musisz iść na trik i położyć jeden element na drugim z lekkim przesunięciem. Ponownie pomogą nam w tym pseudoelementy: before i: after (przykład 3).

Ryż. 5. Rama z narożnikiem

Przykład 3. Nakładanie trójkątów

Ze względu na fakt, że nakładamy jeden element w jednolitym kolorze na drugi, ta metoda jest odpowiednia tylko dla wypełnień w jednolitym kolorze i nie jest odpowiednia dla gradientów lub tła.

Korzystanie z transformacji

Za pomocą transformacji możemy obrócić kwadratowy element o 45º i wyciągnąć z niego romb. Nie jest to trójkąt jako taki, więc wystającą część, której potrzebujemy, zostawiamy na widoku, a resztę chowamy za innym elementem (przykład 4).

Przykład 3. Transformacja

Wynik tego przykładu pokazano na ryc. 6.

Ryż. 6. Trójkąt z cieniem