15 przydatnych trików CSS, które możesz przeoczyć

Jeśli przez jakiś czas byłeś programistą frontendowym, istnieje duża szansa, że ​​miałeś chwilę, kiedy próbowałeś dowiedzieć się, jak coś kodować i po pewnym czasie googli, że “jest do tego CSS”. Jeśli nie, to dobrze.

Ten post jest zbiorem takich kodów CSS, które mogą dać ci funkcje, takie jak podkręcenie elementu, nadanie możliwości podkreślenia przerywaną linią, przepłynięcie tekstu strony w specjalnym kształcie lub uzyskanie efektu paralaksy. Niektóre z nich są powszechnie obsługiwane, podczas gdy inne są w drodze do pełnej obsługi przez wszystkie przeglądarki.

1. Numerowanie pozycji i podpozycji

   Załóżmy, że masz zestaw nagłówków i podtytułów w swoim dokumencie i numerujesz je ręcznie lub za pomocą skryptu. Zamiast tego możesz użyć liczników CSS, aby to zrobić. Tutaj jest już obszerny post. A ponieważ jest to specyfikacja CSS2, można założyć, że jest ona obsługiwana przez wszystkie przeglądarki, z wyjątkiem być może IE 6.

2. Spice Up Plain Underlines

   Czasami chcemy podkreślić ładną linią przerywaną lub przerywaną zamiast jednolitej. Ponieważ nie ma na to opcji, zadowalamy się granica-dół. Ale granica-dół nie jest dobrym rozwiązaniem, jeśli tekst, który podkreślasz, jest zawijany.

   CSS3 określił nie jedną, ale trzy nowe właściwości do dekoracji tekstu kolor dekoracji tekstowej, linia tekst-dekoracja, i styl dekoracji tekstowej który może być skrócony do dobrego starego dekoracja tekstowa.

   Możesz użyć tych, aby nadać styl podkreśleniu, nadpisaniu, nawet mrugać tekstowi i nie tylko. Od kwietnia 2015 tylko Firefox obsługuje tę właściwość, ale możesz ją włączyć “eksperymentalne funkcje platformy internetowej” używać go w Chrome.

3. Cytowanie cytatu

   Po pierwsze, nie ma potrzeby przejmować się wpisywaniem poprawnych cudzysłowów dla krótkich cytatów, ponieważ jest w tym HTML: znacznik, który wskazuje cytaty wewnętrzne.

   The tag dba również o cytowanie wewnętrznych cytatów z pojedynczymi cudzysłowami. Więc gdzie jest “jest do tego „CSS”” chwila w tym?

   Powiedzmy, że nie chcesz domyślnych podwójnych cudzysłowów lub masz więcej niż jeden poziom zagnieżdżonych cudzysłowów, możesz zdefiniować swoje preferencje cytowania dla elementu cytatu za pomocą CSS przy użyciu CSS2 cytaty własność.

4. Zarządzanie niesfornymi tabelami

   Być może natknąłeś się na duży stół o różnej wielkości zawartości na komórkę, który nie chce pozostać w określonej szerokości, niezależnie od tego, co spróbujesz. Oswoj ten stół za pomocą układ tabeli właściwość (dla równej wysokości kolumny, kliknij ten link).

   Konkretnie, poprawka jest w table-layout: fixed; wartość. Po przypisaniu stałego układu tabeli tabela i szerokość komórki są określane przez szerokość tabeli lub pierwszego wiersza komórek (które mogą być zdefiniowane przez użytkownika), a nie przez zawartość. Jest to obsługiwane przez wszystkie przeglądarki.

5. Make It Sticky

   Elementy przyklejone to elementy na stronie, które nie będą przewijane z widoku. Innymi słowy przykleja się do widocznego obszaru (rzutni lub przewijanego pola). Możesz to stworzyć za pomocą CSS pozycja: lepki;.

   Działają jak względnie rozmieszczone elementy przed przewijaniem, a później jak stałe elementy po osiągnięciu progu przewijania. Na razie, tylko Firefox popiera to.

6. Pobierz swój tekst w kształcie

   Czy chcesz, aby tekst na stronie ładnie zakrzywiał obraz wyświetlany obok niego? Możesz spróbować Kształty CSS. Aby zaimplementować kształty CSS, możemy skorzystać z trzech właściwości kształt na zewnątrz, margines kształtu i próg kształtu-obrazu. Od kwietnia 2015 CSS Shapes jest obsługiwany przez przeglądarki internetowe.

7. Pola obowiązkowe

   Jeśli masz formularz, istnieje duża szansa, że ​​niektóre pola są wymagane, a inne nie. Musisz powiadomić użytkowników, która jest która. CSS jest w tym celu :wymagany :opcjonalny pseudo klasy. Wszystkie nowoczesne przeglądarki obsługują je.

8. Picky With Colors

   Jeśli nie podoba Ci się określony kolor, np. Niebieski, możemy pokolorować wybrany obszar innym kolorem i ::wybór pseudo elementem jest CSS. Jest to obsługiwane przez wszystkie nowoczesne przeglądarki.

9. Czy to sprawdziłem?

   W sytuacji, gdy zaznaczono pole wyboru, byłoby miło mieć inne wskazanie oprócz małego znacznika wyboru wewnątrz domyślnego pola wyboru, aby zaznaczyć, że element został sprawdzony.

   Istnieje CSS, który wykorzystuje więź między bezpośrednim rodzeństwem, dwoma elementami obok siebie. CSS ma sąsiadujący selektor rodzeństwa oznaczony przez plus + znak, a my możemy go użyć do kierowania etykiety obok pola wyboru. Ale co z kierowaniem zaznaczonego pola wyboru? Jest :sprawdzone do tego pseudoklasa.

10. Jak bajka

    Wtedy nie byłoby miło, gdyby pierwszy “O” w “Pewnego razu” wygląda ślicznie? Możemy sprawić, że będzie ładnie wyglądać, w końcu jest CSS. Oto gdzie :: pierwsza litera pseudo element przychodzi na ratunek. Kieruje się na pierwszą literę pierwszego wiersza elementu docelowego. Przeczytaj więcej na ten temat tutaj.

11. Chcesz wiedzieć więcej?

    Element może mieć klasę X lub dane Y lub inną wartość atrybutu. Jeśli kiedykolwiek będziemy potrzebować wyświetlić taką wartość atrybutu elementu w pobliżu, możemy użyć content: attr (X). Pobiera wartość atrybutu X elementu, a następnie możemy go pokazać obok elementu.

12. Trochę więcej na lewo

    Elementy centrujące dla początkujących CSS to niezły wyczyn. Różne elementy wymagają innego zestawu właściwości CSS, aby je wyśrodkować. Przeanalizujemy jeden z wielu przykładów dostępnych w sieci WWW, abyś mógł sobie przypomnieć, że istnieje CSS do centrowania rzeczy.

13. Ujawnij format pliku linków

    Widziałeś kiedyś mały obrazek w pobliżu linku wskazujący, czym jest ten link? PDF? czy DOC? Tak, istnieje CSS, aby to osiągnąć. The content: url () użyjemy go do wyświetlenia obrazu za linkami.

14. Trigger Parallax Effect

    Efekt paralaksy jest efektem opisującym pozornie powolny ruch tła względem pierwszego planu. Efekt ten jest popularny na stronach internetowych, które implementują przewijanie paralaksy. Istnieją różne sposoby jego implementacji, poniższy przykład działa w Firefoksie z załącznik w tle: naprawiony;.

15. Moc animacji CSS

    Prawdopodobnie nie ogromny “jest do tego CSS” moment, ponieważ wszyscy już najprawdopodobniej wiecie o animacjach CSS. Ale małe przypomnienie nie jest szkodliwe. Istnieje wiele zastosowań animacji CSS, ale tutaj jest jeden do prostego ćwiczenia kolorowania.

Odczyt: 50 przydatnych fragmentów CSS Każdy projektant powinien mieć