Modernistyczna tabela cen produktów z użyciem CSS3


29 października 2012 / Michał Kortas


Nowy tydzień zaczniemy od zaprojektowania modernistycznej i dobrze prezentującej się tabelki cen. Praktyka stosowania takiej formy prezentacji naszych produktów jest chyba najbardziej czytelna dla naszych potencjalnych klientów zainteresowanych ofertą. W naszym przykładzie posłużymy się tabelą, która zestawiać będzie parametry kont hostingowych. Oczywiście to, do czego jej użyjecie zależy tylko i wyłącznie od Was. W tutorialu nie będziemy korzystać z programów graficznych – wszystko wykonamy w CSS3. Na etapie końcowym, tabela cen wyglądać ma identycznie jak ta, którą pokazałem na samym początku. Wszyscy gotowi? A więc do dzieła!

HTML’owa struktura tabelki

Oczywiście zacząć musimy od przygotowania naszego zestawienia w formie HTML‚owej. Z góry przyjąłem, że w tabeli uwzględnię trzy produkty. Na samej górze określę ich nazwę, potem podam cenę, opiszę parametry poszczególnych kont hostingowych i na samym dole umieszczę przycisk, który w założeniu pozwoli na ich zakup. Kod html odpowiedzialny za strukturę tabeli jest następujący:

To, co w tej chwili otrzymaliśmy, w niczym nie przypomina naszego założenia, dlatego czas zająć się stylowaniem tabelki w CSS3.

Stylowanie tabelki w CSS3

Wyróżnienie kolumn

Zacznijmy od nadania kolumnom stałych wymiarów, oraz umieszczenia naszych trzech produktów obok siebie. Już teraz przyjąłem, że każdy produkt będzie szeroki na 200px.

Zestawienie zaczyna nabierać kształtów.

Nazwy produktów w nagłówkach

Jak na pewno zauważyliście, nazwy produktów otoczyłem znacznikami <h3>. Dla lepszego efektu dołączymy do arkusza nowy font – Ubuntu Condensed. Importujemy go z witryny Google Fonts. Własnie tym krojem wyróżnimy nagłówki. Zaktualizujmy nasz arkusz CSS.

Dobrze, nasza tabela wygląda teraz mniej więcej w taki oto sposób.

Tło dla kolumn

Tutaj sprawa jest prosta. Nadajemy kolor tła kolumnom z naszymi produktami. W tym celu parametry dla klasy .produkt rozszerzamy o zwykły background.

Efekt otrzymany:

Dobrze widoczna cena

Myślę, że aby cena była dobrze widoczna pośród listy innych parametrów, musimy ją odpowiednio potraktować. W tym kroku DIV‚owi z nią nadamy owalny kształt i kilka innych ulepszeń wizualnych.

Tak wygląda tabelka na tę chwilę:

Aby div przyjmował owalną postać, musimy nadać mu zaokrąglenia równe połowie wysokości (wraz z obramowaniem). W moim przypadku wysokość wynosiła 100px + łącznie 20px na obramowanie (po 10px na top i bottom), dlatego wartość dla border-radius to 60px.

Aby stworzyć cień wewnętrzny wykorzystałem parametr inset, który odpowiada właśnie za „rzucanie” cienia do wewnątrz elementu.

Lista z opisem produktu

Aby ostylować listę parametrów, skorzystamy z tzw. efektu zebry. Dzięki temu każdy wiersz będzie dobrze widoczny, kontrastując ze swoimi dwoma sąsiadami.

Więcej o wykorzystanym efekcie zebry możecie przeczytać w artykule już wcześniej opublikowanym na łamach wortalu.

Czytaj > Tabelka „zebra” – przy użyciu tylko CSS.

A oto efekt, który otrzymałem.

Przycisk „Kup produkt!”

Ten element również powinien być dobrze wyróżniony, więc nadamy mu bardziej rzucający się w oczy kolor. Nie przestraszcie się sporą ilością kodu – najwięcej zajmują w nim deklaracje gradientów. Swoje gradienty wygenerować możecie za pomocą narzędzia ColorZilla.

Nasza tabelka wygląda już prawie jak powinna.

Stylowanie aktywnego elementu

Czas nadać inne barwy produktowi, na którym akurat spoczywa nasz kursor. To nic trudnego – wykorzystamy pseudoklasę :hover i zaaplikujemy kontrastowe kolory i efekt cienia zewnętrznego.

Spójrzmy na naszą tabelkę.

Wprowadzamy efekty przejścia

Wszystko już wygląda tak, jak założyliśmy na początku. Dla urozmaicenia wprowadzimy jeszcze jednak niewielkie efekty przejścia dla niektórych elementów. Oczywiście wszystko za pomocą CSS3.

Aby sprawdzić, jak prezentują się efekty przejścia, musicie odpalić demo online, do którego link znajduje się na końcu tego artykułu.

Zakończenie

Mam nadzieję, że tutorial napisałem w sposób zrozumiały. Wszelkie pytania dotyczące spraw technicznych proszę kierować do nas na wortalowym forum. Cały listing kodu CSS przedstawiam poniżej.

Zobacz DEMO | Pobierz pliki źródłowe



11 odpowiedzi na “Modernistyczna tabela cen produktów z użyciem CSS3”

  1. Cline pisze:

    Bardzo podoba mi się taka mała oferta produktów :) niby nic a cieszy oko długo zajmuje stworzenie ci czegoś takiego od zera ?

    • Można powiedzieć, że stworzenie tej tabelki zajęło mi jakieś 2 godziny, wraz z pisaniem artykułu. Także gdybym miał poświęcić czas tylko i wyłącznie na kodowanie, to myślę, że będzie to około godziny :-)

  2. matdamian pisze:

    Bardzo fajna tabelka. A jak do tego podpiąć pod „Kup pakiet!” adres mailowy?

  3. MIB pisze:

    Bardzo fajny artykuł.

    Dziękuje.

  4. Sebastian Jakubiec pisze:

    Olbrzymi plus dla Ciebie, że nie rozsypuje się pod IE. Choć (i to nie uwaga wobec Ciebie) jak to zwykle, IE rozczarowuje…

  5. Michał pisze:

    Jak zrobić tak żeby dzięki temu krótkiemu menu zrobić na 14 pozycji?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *