Kilka przydatnych znaczników CSS, które warto mieć w zanadrzu

Znalazłeś się kiedyś w sytuacji, gdy Twój kod CSS zaczęły wypełniać pokręcone selektory długości dwóch linii? Konieczność częstego wynajdowania mało eleganckich rozwiązań, może oznaczać, że już czas odświeżyć sobie znaczniki CSS.

Waloryzacja strony internetowej

Pokombinuj z tłami

Tło to element, który bardzo mocno wpływa na odbiór strony – może go poprawić lub zepsuć. Tło może być:

• jednokolorowe (jasne, ciemne albo w kolorze motywu strony)
• gradientowe
• składające się z pasków lub innych wzorków
• abstrakcyjne
• z fotografii
• w formie filmu

Wydaje mi się, że na nowoczesnych stronach, stosowane są obecnie jednokolorowe, delikatne tła.

Pobaw się szerokością strony

Gdy na stronie miałeś sam tekst, prawdopodobnie umieściłeś go w wyśrodkowanym kontenerze o wybranej szerokości. Niektóre sekcje (jak galeria zdjęć czy prostokąty ze zdjęciami w środku), będą wyglądały jednak lepiej, jeśli zajmą całą szerokość strony.

Nie popełnij błędu, polegającego na umieszczeniu w sekcji na „full-width” zwykłego tekstu – linijka będzie wtedy zbyt długa i nikt go nie przeczyta.

Jak zaprojektować atrakcyjną stronę, nie będąc grafikiem?

Definicja programisty front-end stała się obecnie tak szeroka, że w ofertach pracy zaczęto rozdzielać ją na coraz węższe kategorie. W niektórych firmach, poszukiwany jest programista JS, czyli osoba, która świetnie radzi sobie ze wszystkim, co związane z Javascriptem, wie, jak podłączyć się do bazy danych i wyciągać z niej dane i ogólnie, ma doświadczenie w programowaniu. Taką osobę można określić mianem bardziej technicznej, niż zwykły front-endowiec, zajmujący się głównie dłubaniem w CSS i HTML, którego można na potrzeby tego artykułu, nazwać po prostu front-end deweloperem. Jeszcze inne zadania w pracy ma designer czy grafik, który przygotowuje layout, „cięty” później przez front-end dewelopera.

Bulma.io - framework CSS z wesołymi kolorkami

Nie samym Bootstrapem front-endowiec żyje. Frameworki CSS pojawiają się rzadziej, niż te do JS (czyli co drugi dzień :), dlatego można dość łatwo, opanować podstawy nowych projektów i wykorzystać je do tworzenia własnych layoutów.
Bulma to dynamicznie rozwijany framework oparty na modelu flexbox. Pierwsze, co rzuca się w oczy po przejrzeniu jego funkcji, to żywe, wesołe kolory podstawowych elementów. Dodajmy zatem do naszej strony trochę życia.

Projekt na dziś #1

See the Pen LLdMOM by Kamil (@KamilNaja) on CodePen.

Dziś prosta animacja, przy użyciu samego CSS. Włącz na Codepen na pełnym ekranie.