3 kroki, które pozwolą upiększyć Twój szablon Allegro

16 grudnia 2016

„Nowy rok, nowy Ty!” – z takimi lub podobnymi nagłówkami można spotkać się w aktualnie nie raz – na waszych facebookowych newsfeedach, twitterowych timeline’ach czy podczas drobnego guilty pleasure w postaci przeglądania pisemek typu „Pani domu” lub „Życie na gorąco”. Początek roku to najlepszy okres, aby coś zmienić.

Pomyśl o swoim biznesie. Pomyśl o swoim szablonie wykorzystywanym w serwisie Allegro. Chęć zmiany pojawiła się w Twojej głowie? Spokojnie, przychodzę do Ciebie z 3 prostymi trikami, które pozwolą tchnąć życie w wygląd Twoich ofert na najpopularniejszym w Polsce serwisie aukcyjnym!

Na wstępie zaznaczam, że musisz znać HTML oraz CSS na poziomie podstawowym. Wiesz czym różni się klasa od taga? Atrybut od właściwości CSS? Bez tej wiedzy edycja kodu może zakończyć się katastrofą.

1. Podstawowa dekoracja linków

Chyba najprostszą i najbardziej pożądaną rzeczą jest ciekawa dekoracja linków w szablonie Allegro. Standardowe podkreślenie przejadło się już chyba każdemu użytkownikowi Internetu. Dzięki wprowadzeniu Kaskadowych Arkuszy Stylów w wersji 3, przeglądarki internetowe uzyskały dostęp do często zaskakujących trików i animacji jakie możemy nałożyć na elementy HTML. Jednym z nich jest właściwość transition, która ma już całkiem niezłe wsparcie.

Obsługa właściwości transition w przeglądarkach

Co ona pozwala? Na płynne przejście pomiędzy dwoma różnymi stanami właściwości CSS, np. wysokością elementu, jego przezroczystości czy koloru tła! Dziś interfejsy systemów operacyjnych są przepełnione animacjami. Dlaczego nie pokusić się o przeniesienie ich do Allegro?

W tym przykładzie wykorzystamy stan :hover dla elementu, czyli ten po najechaniu na element kursorem myszy.

Zacznijmy od płynnej zmiany koloru tła linku.

Kod HTML to prosty tag z nadaną klasą lnk. W kodzie CSS możesz zauważyć odpowiednio właściwości, które stosujemy w podstawowej klasie lnk:

background-color: #000;
transition: background-color 0.3s linear 0.0s;

oraz właściwość w stanie :hover:

background-color: #999;

Tak! To takie proste! Na tym przykładzie wytłumaczę zachowanie właściwości transition:

transition: background-color 0.3s linear 0.0s;

Pierwsza cześć tj. background-color odpowiada za animowaną właściwość, druga za czas animacji (w tym przypadku 0.3s), trzecia to zachowanie przejścia efektu, czwarta odpowiada za opóźnienie rozpoczęcia animacji lub jego brak jak w naszym przypadku.

Co w przypadku jeżeli zechcesz wykonać dwie animacje naraz? Nic prostszego!

transition: background-color 0.3s linear 0.0s, border-radius: 0.5s ease 0.3s;

Dzięki takiemu zapisowi jednocześnie można animować właściwości background-color oraz border-radius (odpowiadającej za zaokrąglenie rogów elementu). Ważne, aby nadać border-radius w stanie początkowym oraz :hover.

Jak teraz będzie wyglądać animacja?

2. Link ze zmienioną zawartością po najechaniu

CSS3 umożliwia manipulację stylów w taki sposób, aby zmienić napisy w środku hiperłącza! Wykorzystam do tego pseudoklasę ::after (która tworzy dodatkowy element w środku danego taga HTML) oraz właściwość position i overflow. Całość wygładzę animacjami przy pomocy transition.

Struktura kodu HTML nie zmieni się, a cała magia zadzieje się w kodzie CSS! Efekt jaki chcę uzyskać będzie wyglądał tak:

Co to za czary? Snape

Nieźle, prawda? Okazuje się, że stworzenie takiego efektu wcale nie jest trudne. Co lepsze, wystarczy wykorzystać wcześniej wspomnianą pseudoklasę ::after, która w CSS jest od wersji numer 2! Przejdźmy do kodu.

Do klasy lnk dodam trzy właściwości:

overflow: hidden; – ukrywającą treści, które nie mieszczą się w elemencie,
position: relative; – „dzieci” tj. tagi wewnątrz elementu traktują swojego „rodzica” jako odniesienie do modyfikacji swojej pozycji.
text-align: center; – wyśrodkowanie tekstu w elemencie.

Do transition dopiszę animację odpowiadającą za kolor tekstu tj. color 0.3s linear 0.0s, a do stanu :hoverdopiszę color: #999; gdzie kolor powinien być zgodny z kolorem tła elementu. Jest to prosty trik, dzięki któremu animacja będzie wyglądać na płynną 😉

Czas na ::after! 😉

.lnk::after {
transition: opacity 0.3s linear;
position: absolute;
width: 100%;
left: 0;
opacity: 0.0;
color: #fff;
content: „Let’s party!”;
}

.lnk:hover::after {
opacity: 1.0;
}

Transition jest już nam znamy, właściwości position nadajemy wartość absolute. W połączeniu z position: relative rodzica pozwala to nam na dowolne ustawienie elementu, ale w obszarze rodzica właśnie. Później kolejno – szerokość w pełni pokrywająca się z tagiem nadrzędnym, ustawienie do lewej, ustawienie widoczności na 0%, kolor tekstu biały oraz content – to tutaj wstawiam napis jaki ma pojawić się po najechaniu myszą na link.

Jak wcześniej wspomniałem, pseudoklasa ::after tworzy nowy element w kodzie HTML toteż może on przyjmować stan :hover. Nadam mu pełną widoczność.

Dzięki kilku linijkom kodu, nasz link zaczyna prezentować się naprawdę dobrze, ale to jeszcze nie koniec!

3. Box-shadow, transform, marihunanen – komu to potrzebne? A dlaczego?

Dołóżę ostatnie poprawki do linku. Wykorzystam do tego właściwości box-shadow (tworzące cień pod elementem) oraz transform odpowiedzialny przekształcanie.

Dążymy do takiego efektu:

Do klasy lnk dodajemy właściwość box-shadow: 0px 10px 0px rgba(0,0,0,0.25); Jej wartości to kolejno, ustawienie cienia w osi X, ustawienie w osi Y, rozmycie, jego wielkość w odniesieniu do podstawowej wielkości oraz kolor. Tutaj użyłem funkcji rgba, która pojawiła się w CSS3. Jest to kolor w palecie RGB. Trzy pierwsze wartości są zapisane poprzez liczby dziesiętne, a ostatnia odpowiada za kanał Alpha, czyli przezroczystość.

Pozostało dopisać jedynie animację w transition dla box-shadow tj. box-shadow 0.3s linear 0.0s.

Do stanu :hover dla dopisuję box-shadow: 0px 5px 0 rgba(0,0,0,0.25); w ten sposób zmieniając pozycję cienia w osi Y. To pozwoli zasymulować efekt „naciśnięcia” przycisku.

Następnie do pseudoklasy ::after dopiszę właściwość transform oraz jej wartość scale, która pozwala na skalowanie elementu – transform: scale(1,1); (w tym przypadku wartość startową). Trzeba jeszcze pamiętać o animacji dla transform we właściwości transition – transform 0.3s linear 0.3s

Do jej stanu :hover dopiszę lekkie powiększenie elementu z pseudoklasy ::after tj. transform: scale(1.1,1.1);

Co dalej?

Właściwościami przedstawionymi w tych trzech punktach powyżej można żonglować do woli dla elementu HTML w twoim opisie. Na pierwszy rzut oka operowanie CSSem wydaje się bardzo zawiłą sprawą, ale jak widać polega ono na dopisywaniu odpowiednich właściwości – później stoi na przeszkodzie tylko nasza wyobraźnia… i obsługa przez przeglądarki, która często potrafi zepsuć wiele świetnych pomysłów. Tworząc pewne rozwiązania dla Allegro warto także pamiętać, że kod jest czyszczony przez automat do walidacji opisu aukcji. A ten potrafi równie bardzo utrudnić wykorzystanie nowinek ze świata webdevelopmentu.

Mam nadzieję, że ten artykuł dał Ci chociaż podstawowe pojęcie o tym, czego można dokonać tworząc szablon Allegro. Ale! To tylko początek 😉