10 (więcej) CSS Tricks You Prawdopodobnie pominięte

Istnieje wiele fragmentów kodu CSS, które programiści stron internetowych mogą wykorzystać do osiągnięcia określonych wyników, a następnie dostępne są sztuczki CSS, które można wykorzystać do wyrównywania treści w pionie. Ponieważ CSS jest ciągle rozwijającą się jednostką, raz po raz natkniemy się na fajne sztuczki CSS, które dobrze się bawią.

W dzisiejszym poście przedstawiam cię 10 dodatkowych atrybutów i sztuczek CSS, których możesz nie znać.

1. Napisz w pionie

Nazywany jest atrybut CSS tryb pisania który akceptuje jedną z tych trzech wartości; poziomy-tb, pionowo-rl i pionowo-lr.

poziomy-tb jest domyślne i powoduje typowy przepływ tekstu od lewej do prawej w elemencie.

The pionowy-* wartości są jednak dla pionowego przepływu bloków, powodując, że tekst będzie zapisywany od góry do dołu przez przeglądarki. W pionowo-rl, nowe linie są dodawane na lewo od poprzednich i odwrotnie pionowo-lr.

Jest to przydatne dla wyświetlanie języków takich jak chiński i japoński które są zazwyczaj pisane od góry do dołu, a także gdy chcesz wyświetlać tekst pionowo, aby zapisać poziomą przestrzeń, jak w nagłówkach tabel.

Uwaga: Jeśli chcesz kontrolować kierunki poszczególnych liter, możesz użyć orientacji tekstu, obracając je pionowo lub na boki, zgodnie z potrzebami.

 -tryb pisania dla webkitów: vertical-rl; -ms-writing-mode: tb-rl; tryb zapisu: vertical-rl; 

2. Użyj ponownie wartości kolorów

Słowo kluczowe currentColor niesie wartość kolor atrybut i może być używany w innych atrybutach, które akceptują wartości koloru tło.

div background: linear-gradient (90deg, currentColor 50%, black 50%);… kolor: # FFD700; / * currentColor is # FFD700 * / 

3. Mieszaj tła

Element może mieć więcej niż jedno tło (kolor tła i wiele obrazów tła). The tryb mieszania tła łączy je wszystkie razem w danym trybie mieszania. Obecnie dostępnych jest 16 trybów mieszania.

tryb mieszania tła: różnica; 

4. Mieszaj elementy

Mix-Blend-Mode łączy zawartość i tła nakładających się elementów. Chrome nie obsługuje wszystkich trybów, nawet jeśli Firefox tak.

mix-blend-mode: color; 

Wziąłem dwa elementy img pokazujący obraz róży i a przęsło z graficznym tłem, ułożyłem je w stos i zastosowałem kilka trybów mix-blend.

5. Ignoruj ​​zdarzenia wskaźnika

Możesz sprawić, że element będzie niepomny na żadne zdarzenie wskaźnika, używając pojedynczego atrybutu o nazwie wydarzenia wskaźnikowe. Dając wydarzenia wskaźnikowe wartość Żaden w elemencie zapobiega to byciu celem dla zdarzeń wskaźnika. Dołączone wsparcie IE11 +.

W poniższej wersji demonstracyjnej znajduje się pole wyboru pod dwoma obrazami ułożonymi jeden nad drugim. Oba obrazy są niesione zdarzenia-wskaźniki: brak, pozwalając nam kliknąć pole wyboru zakopane pod nimi. Na podstawie zaznaczonego stanu pola wyboru wyświetlany jest żądany obraz, a drugi ukryty.

6. Udekoruj dzielone pudełka

Zazwyczaj, gdy pudełko jest dzielone (np. Gdy element śródliniowy jest podzielony na linie), krawędzie podzielonych części są pozbawione stylów pudełek i wyglądają na plasterki. Aby tego uniknąć, możesz użyć box-decoration-break: klon.

Teraz za przykładem i wczesnym przypomnieniem „Boże Narodzenie na horyzoncie” znajduje się lista reniferów Świętego Mikołaja wpisana w jednym przęsło! Ho! Ho! Ho!

Uwaga: Nawet jeśli nowoczesne IE wspiera pudełko-dekoracja-przerwa, na krawędzi granicy podzielonej części renderowanie nie jest płynne, a tło wygląda na pokrojone. Ale to czyni box-shadow ładnie, dlatego użyłem cieni pudełek zarówno dla obramowania, jak i tła. Brak jest również poziomego wypełnienia krawędzi w IE, które można wypełnić spacjami.

7. Zwiń elementy tabeli

widoczność: upadek jest atrybutem tworzonym tylko dla elementów tabeli, takich jak wiersze i kolumny. Jeśli zostanie użyty na czymkolwiek innym, będzie się zachowywał widoczność: ukryta. Chrom, choć traktuje to jak ukryty nawet dla elementów stołu.

Kiedy przypisujesz widoczność: upadek na elemencie tabeli jest ukryty, a jego przestrzeń jest wypełniana przez pobliską zawartość - jak to, jak będzie się zachowywał podczas używania Nie wyświetla się zamiast.

Ale w przeciwieństwie do Nie wyświetla się który modyfikuje układ tabeli po usunięciu spacji, układ pozostaje taki sam widoczność: upadek. Tutaj możesz zobaczyć, jak to działa bardziej szczegółowo.

8. Utwórz kolumny

Możesz utworzyć układ kolumn dla swojej zawartości za pomocą kolumny atrybut. Pozwala określić liczbę kolumn (liczba kolumn) i jak każda szerokość kolumny (szerokość kolumny) mają być renderowane w elemencie.

Jeśli treść jest inna niż tekst, na przykład obraz, musisz pamiętać o jego szerokości odpowiadającej kolumnie. W poniższym przykładzie użyłem tylko liczba kolumn aby określić, ile kolumn chcę.

-webkit-column-count: 2; -moz-column-count: 2; liczba kolumn: 2; 

9. Zmień rozmiar elementów

Można zmienić rozmiar elementu (pionowo, poziomo lub oba) za pomocą atrybutu CSS3 Zmień rozmiar . Możliwość zmiany rozmiaru w textarea można wyłączyć za pomocą tego samego.

resize: vertical; resize: horizontal; resize: oba; resize: brak; 

10. Twórz wzory

Dla pojedynczego elementu może występować wiele gradientów CSS3 (zarówno liniowych, jak i promieniowych), które mogą być nakładane na siebie w celu utworzenia wzorów. To pozwala nam tworzyć ładne tła dla elementów bez użycia zewnętrznych obrazów. Udoskonalenie go może wymagać trochę praktyki.