close
CSS

11 niezbędnych tricków CSS, które powinien znać każdy webmaster

tricki-css

Ten artykuł jest przeznaczony głównie dla początkujących webmasterów. Znajdziesz tutaj kilka bardzo przydatnych reguł, których będziesz używać w większości projektów.

1. Wyśrodkowanie w poziomie

Wyśrodkowanie elementu jest czasami trudniejsze, niż mogłoby się wydawać. Różne elementy reagują na różne reguły CSS. Poniżej znajdziesz fragmenty kodu, które pomogą Ci wyśrodkować każdy element.

Wyśrodkowanie tekstu

Wyśrodkowanie elementu blokowego

Wyśrodkowanie absolutne

2. Wyśrodkowanie w pionie

Wyśrodkowanie jednej linii

Wyśrodkowanie absolutne

3. Stany linków

Style dla różnych stanów linków są często pomijane przed webdeveloperów. Ich brak może utrudnić użytkownikowi poruszanie się po stronie dlatego warto o nich pamiętać. Pseudoklasa :link odnosi się do wszystkich linków, które nie zostały jeszcze kliknięte. Pseudoklasa :visited odnosi się do linków, które zostały już kliknięte.

 

4. Wybranie elementu bez użycia klasy lub identyfikatora

Dzieci elementu

Ta reguła doda kolor czerwony tylko tym odnośnikom, które są dziećmi znacznika footer.

Konkretny element

Ta reguła pogrubi czcionkę tylko w drugim elemencie li listy ul.

Pierwszy element danego typu

Ten kod ustawi wielkość czcionki pierwszego paragrafu znalezionego wewnątrz article.

Ostatni element danego typu

Ten kod ustawi wielkość czcionki ostatniego paragrafu znalezionego wewnątrz article.

 

5. Łatwe dopasowanie obrazka do kontenera

Czasami trzeba ustawić obrazek tak by dopasował się do szerokości kontenera, ale nie przekroczył własnych rozmiarów. Jest na to bardzo prosta reguła.

Jeśli chcesz by obrazek rozciągnął się na cały kontener to zamiast max-width użyj width.

 

6. Efekt hover

Efekt hover to efekt, który powstaje po najechaniu i zjechaniu kursorem z elementu.

1

7. box-sizing: border-box

Ta reguła rozwiązuje problem, którym jest dodanie paddingu do wielkości kontenera, zamiast umieszczenia go w środku kontenera i niezmieniania rozmiarów.

1

demonstracja działania border-box
Źródło: webdesignblog.org

 

8. Dodanie ikony jako punkt listy

Dodanie ikony Font Awesome zamiast zwykłego kółka może często urozmaicić listę. Zamiast \f058 możesz wpisać unicode dowolnej ikony. Unicode znajdziesz tutaj.

1

 

9. Wielkość liter

Wielkość liter w tekście możemy kontrolować przy pomocy text-transform.

1

 

10. Wysokość równa ekranowi

Jeśli chcesz, by sekcja posiadała wysokość równą ekranowi to możesz to zrobić używając jednostki vh.

Analogicznie jeśli chcesz rozciągnąć sekcję na połowę ekranu, to możesz napisać:

 

11. Reset stylów przeglądarki

Przeglądarki mają własne style CSS, według których wyświetlają strony. Często te style różnią się między przeglądarkami. Nam jednak zależy, by strona wyglądała identycznie na wszystkich przeglądarkach. Dlatego w swoich projektach powinieneś zawsze resetować domyślne style przeglądarki. Na tej stronie znajdziesz kod CSS, który resetuje style. Musisz go jedynie wkleić na początku swoich stylów CSS.

  • Krzysztof Kwiatkowski

    Jest jeszcze jeden ważny trick. Clear dla elementów pływających, gdy dla kontenerów damy opływanie to nie mamy wtedy określonej wysokości dla kontenera nadrzędnego, a nie muszę mówić jaki to dla początkującego problem jak mu nagle główny kontener znika z podglądu.

  • F od X

    Wyśrodkowanie absolutne – a nie lepiej
    .elementNaSrodku {
    position: absolute;
    margin-left: 0px;
    margin-right: 0px;
    left: 0;
    right: 0;
    }

    ?

  • Piotr Ścigała

    Reset? Przecież o wiele lepsza jest normalizacja!
    http://blog.end3r.com/131/normalize-css-nie-resetuj-normalizuj/

    • Myślę, że zależy to głównie od rodzaju projektu. Nowoczesne layouty nie zawsze wyświetlają dany rodzaj nagłówka w ten sam sposób na całej stronie. W tym przypadku według mnie lepiej zacząć od resetu.

      Jest to też kwestia preferencji Webmastera 🙂

    • Normalizacja? W dobie samodzielnych komponentów wszystkie style globalne są ble 😉

      • Piotr Ścigała

        Dobrze, gdy elementy da się łatwo zastosować w innym projekcie (BEM etc)

        Oprócz nich trzeba jednak jeszcze zbudować serwis (a nie same pojedyncze podstrony) – część treści będzie przecież generowana dynamicznie i na pewnym poziomie trzeba je potraktować globalnie (typografia, box-sizing itp.)

        • Czy ja wiem?

          body można potraktować jako komponent – strona wszak też jest komponentem. Typografia może być również zamknięta w komponencie (chociaż to ciut naciągane).

          Zresztą: komponenty mogą przecież mieć różną typografię – od fontu, po światło itd.

          • Piotr Ścigała

            W sumie ciekawe podejście do tematu 😀

            Z tym zróżnicowaniem typografii lepiej wg mnie nie przesadzić, żeby całościowo serwis był spójny, a nie zbiorem przypadkowo rozmieszczonych komponentów, które twórca akurat miał gotowe na dysku 😀

            + przy większej ilości web-fontów może stać się to bardzo kosztowny zabieg

          • Akurat osobiście jestem raczej wyznawcą „native font stack” 😉

            Może uściślę o co mi chodziło z typografią: ostatnio myślę w kategoriach atomic designu, więc dla mnie typografia stanowi atom. Atom, który powinien wchodzić w skład KAŻDEGO większego organizmu (komponentu). Owszem, typografia może być mixinem albo configiem i będzie taka sama dla wszystkich komponentów w danej witrynie, niemniej umieszczenie tych stylów we wszystkich komponentach pozwala na o wiele większą elastyczność.