CSS to nie jest zaawansowana inżynieria oprogramowania jednak to właśnie dzięki niemu można tworzyć piękne interfejsy aplikacji które przyciągają tysiące użytkowników. W tym artykule poznasz techniki CSS które po prostu chcesz znać.

Czego się dzisiaj dowiesz?

Opiszę 5 technik które w łatwy sposób pozwolą Ci osiągnąć fajne efekty UX na Twojej stronie. A skupię się na:

1. Bouncy Loader
2. Custom Scroll
3. Środkowanie elementów
4. Ukrywanie elementów czyli Offscreen
5. Toogle Switch

Każdą z technik wyjaśnię krok po kroku 🙂

Bouncy Loader

Nasze strony nie zawsze ładują się natychmiastowo. Czasem czekamy na załadowanie elementów, czasem czekamy na dane z API. Może to trochę trwać dlatego standardem jest wyświetlenie użytkownikowi ‘loadera’ który daje do zrozumienia, że na coś się czeka.

Do wyświetlenia loadera można podejść conajmniej na 2 sposoby. Albo używamy gotowego GIFa (który trochę waży) i nie daje nam dużego pola do modyfikacji lub możemy napisać coś swojego w CSS. Mi się ta druga opcja nawet podoba…

Skaczące koła

Stworzę efekt który będzie składał się z 3 pięknych fioletowych aminowanych kół. Efekt jest fajny i wygląda tak:

See the Pen OBqPvW by Bart (@bedekodzic) on CodePen.

Kod

Na początku tworzymy szkielet z HTML. Bardzo prosty. Jeden selektor i 3 podrzędne div’y którym nawet nie nadamy klas. Każdy z nich to osobne koło.

<div class="bouncing-loader">
    <div></div>
    <div></div>
    <div></div>
</div>

Czas na ostylowanie. Pierwszym krokiem jest stworzenie animacji. Jest bardzo prosta bo modyfikujemy 2 właściwości ‘opacity’ i ‘tranform: translateY’. W praktyce chowamy i przesuwamy każde koło w osi pionowej Y.

@keyframes bouncing-loader {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0.1;
        transform: translateY(-1rem);
    }
}

Teraz stylujemy nadrzędny kontener. Koła mają być obok siebie i wyśrodkowane w poziomie. Flex sobie z tym poradzi znakomicie 🙂

.bouncing-loader {
    display: flex;
    justify-content: center;
}

Następny krok to stworzenie kół. Robimy je piękne, fioletowe o średnicy 1rem. Nie używamy klas tylko stylujemy podrzędne divy naszego nadrzędnego selektora. A na końcu definiujemy nieskończoną animację.

.bouncing-loader > div {
    width: 1rem;
    height: 1rem;
    margin: 3rem 0.2rem;
    background: #9263a5;
    border-radius: 50%;
    animation: bouncing-loader 0.6s infinite alternate;
}

Na samym końcu opóźniamy animację dla kolejnych kół.

.bouncing-loader > div:nth-child(2) {
    animation-delay: 0.2s;
}

.bouncing-loader > div:nth-child(3) {
    animation-delay: 0.4s;
}

Prawda, że łatwe to? A efekt fajny!

Custom Scroll

Napewno nie raz o tym myślałeś/aś… Jak sobie poradzić z tym scrollem? Niby żadna sztuka jednak potrafi pochłonąć trochę czasu. Ale… Od dzisiaj to pestka 🙂

Pieniacze

Wyobraź sobie, że chcesz zamieścić na stronie fraszkę Krasickiego. Powiedzmy, że będzie to fraszka “Pieniacze”.

Jako, że mówi ona o dwóch Polakach rodem z I RP to nie dziwi specjalnie kłótnia, warcholstwo i walki na szable. Powiedzmy, że chcesz aby scrollbar przypominał kroplę krwi “sączącą się” pomiędzy szablami dzielnych Sarmatów 🙂 Niech to wygląda np. tak:

See the Pen EdMaqq by Bart (@bedekodzic) on CodePen.

Kod

Na początek tradycyjnie HTML. Jest jeden kontener główny na którym ustawimy scrollbara. Do tego kontener dla tekstów aby było łatwiej to okiełznać a w środku same teksty:

<div class="custom-scrollbar">
    <div class="text-wrapper">
        <h1>PIENIACZE</h1>
        <p>Po dwudziestu dekretach, trzynastu remisach,</p>
        <p>Czterdziestu kondemnatach, sześciu kompromisach</p>
        <p>Zwyciężył Marek Piotra; a że się zbogacił,</p>
        <p>Ostatnie trzysta złotych za dekret zapłacił.</p>
        <p>Umarł Piotr, umarł Marek, powróciwszy z grodu:</p>
        <p>Ten, co przegrał, z rozpaczy; ten, co wygrał, z głodu.</p>
        <h5>Ignacy KRASICKI  1735-1801</h5>
        <i>Urodził się w Dubiecku nad Sanem w rodzinie posiadającej tytuł hrabiów Świętego Cesarstwa Rzymskiego. Był spokrewniony z najświetniejszymi rodami Rzeczypospolitej. Dzieciństwo spędził otoczony miłością i mądrą opieką najbliższych. Starannie wykształcony wraz z dwoma braćmi obrał stan duchowny.</i>
    </div>
</div>

Style

Na początku ustawiamy wysokość kontenera głównego i ‘overflow-y: scroll’. Kontener podrzędny środkujemy.

.custom-scrollbar {
    height: 300px;
    overflow-y: scroll;
    text-align: center;
}

.text-wrapper {
    width: 50%;
    margin: auto;
}

Scrolla ustawia się za pomocą pseudo-klasy ::-webkit-scrollbar. Możemy go wtedy łatwo dowolnie modyfikować. Teraz scroll składa się z kilku elementów i każdy z nich ma specjalną pseudo-klasę którą możemy użyć.

Jeśli nie jesteś do końca obeznany/a z konceptem pseudo-klas to sprawdź jeden z moich poprzednich wpisów. 

Na moim przykładzie wygląda to tak:

/* To style the document scrollbar, remove `.custom-scrollbar` */

.custom-scrollbar::-webkit-scrollbar {
    width: 20px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    background-color: red;
    position: relative;
}

.custom-scrollbar::-webkit-scrollbar-button {
    display: block;
    background-image: url(https://image.ibb.co/eVhtoA/saber.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 40px;
}

Jeśli chcesz dowiedzieć się więcej na temat pseudo-klas dla scrolla sprawdź MDN. 

Środkowanie elementów

Co mam na myśli? Wyśrodkowanie elementów/tekstów zarówno w pionie jak i poziomie. Kto próbował ten wie, że to nie zawsze jest takie oczywiste… Abyś lepiej zrozumiał/a to zagadnienie pokażę Ci 4 różne techniki na to jak poradzić sobie z takimi sytuacjami…

Przykład

Załóżmy, że mamy kontener o danych wymiarach a w środku kwadrat. Kod wygląda tak:

<div class="container absolute">
    <div class="square"></div>
</div>

.container {
    width: 100%;
    height: 300px;
    border: 1px solid #333;
}

.square {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

Teraz chcemy, aby kwadrat był dokładnie na środku kontenera- w pionie i poziomie.

Sposób 1- Transform Centering

Użyjemy tu dobrze znanych właściwości tzn. ‘position: relative/absolute’ a następnie przesuniemy kwadrat za pomocą ‘transform’:

.container-trasform {
    position: relative;
}

.square-trasform {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

I po robocie 🙂

Sposób 2 – Table Centering

Teraz potraktujemy ten kontener jako tabelę a kwadrat jako tekst który chcemy wyśrodkować. W tym wypadku należy podejść do tematu trochę inaczej i stworzyć wrapper dla kwadratu. Dlaczego? Ta metoda działa dobrze z tekstem jednak jeśli mamy inne elementy jak np. ten kwadrat to potrafi rozciągnąć nam wymiary i wszystko popsuć… Ale przecież to dla Ciebie bułka z masłem 🙂 Kod wygląda tak:

<div class="container container-table">
    <div class="wrapper-table">
        <div class="square square-table"></div>
    </div>
</div>

i CSS:

.container-table {
    display: table;
}

.wrapper-table {
    width: 100px;
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}

.square-table {
    margin: auto;
}

Sposób 3 – Flexbox

Ja jestem jej fanem. Prosta i wydajna!

.container-flexbox {
    display: flex;
    justify-content: center;
    align-items: center;
}

A jakby jeszcze nie działało to ustaw na kwadracie:

.square-flexbox {
    align-self: center;
}

Sposób 4 – Grid

Grid szturmem bierze świat CSS’a i nie bez powodu. W połączeniu z flexboxem może być kombajnem do stylowania. Ale spójrzcie tylko na tą perełkę…

.container-grid {
    display: grid;
    justify-content: center;
    align-items: center;
}

Tak samo jak flex-box… W sumie… Może sam grid już jest kombajnem 😀

I co dalej?

Poniżej wszystkie omówione metody na CodePenie.

See the Pen NOJqze by Bart (@bedekodzic) on CodePen.

Nie ma jednej uniwersalnej metody na środkowanie elementów bo to zależy od kontekstu. Ale jak masz w swojej talii kilka mocnych kart to będziesz wiedzieć jaką należy zagrać aby wygrać 🙂

Offscreen

Ta technika pozwoli Ci ukrywać elementy na stronie. Pytasz po co? Przecież masz ‘visibility:hidden’ albo ‘display: none’. Racja ale obydwie metody mają swoje minusy…

‘visibility:hidden’

Jeśli ukrywasz elementy w ten sposób to co prawda ich fizycznie nie widać na stronie ale dalej zajmują przestrzeń na stronie… Czasem tego nie chcesz.

‘display: none’

W ten sposób elementy rzeczywiście znikają ale… Jeśli chcesz się do nich dobrać np. za pomocą JS’a to ich tam po prostu nie ma. Ale w sumie to żaden problem bo można objeść. Problemem może być jednak pisanie testów automatycznych…

Offscreen – czyli wilk syty i owca cała.

W ten sposób możesz ukryć element który dalej jest widoczny dla JS’a i nie zajmował cennego miejsca na stronie 🙂

Rozważmy taki przypadek, chcesz zbudować galerię królików:

See the Pen KGEdyz by Bart (@bedekodzic) on CodePen.

Choć powyższa galeria ma 2 obrazki to widać, że drugiego nie widać a pierwszy jest ładnie wyśrodkowany przez flexboxa. Co się stało?

Kod

Omówię tylko to co Cię interesuje więc klasa .offscreen. Wygląda tak:

.offscreen {
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    position: absolute;
}

1. clip: rect(0 0 0 0); wycina cały element ze strony i staje się nie widoczny
2. Ustawiasz wymiary na 1px
3. Negujesz wymiary ustawiając margin: -1px;
4. position: absolute; nie zajmuje miejsca w drzewie DOM

Po prostu nadaj taką klasę dowolnemu elementowi a będzie on fizycznie ukryty ale jednocześnie widoczny dla aplikacji 🙂

Toogle Switch

Na koniec stworzymy razem fajny element przy pomocy samego CSS. Wygląda to tak:

See the Pen rqRObY by Bart (@bedekodzic) on CodePen.

Ładny 🙂 Co nie?

Kod

A więc mamy tu dwa kluczowe elementy czyli <input> i <label>

<div class="container">
    <input type="checkbox" id="toggle" class="offscreen" />
    <label for="toggle" class="switch"></label>
</div>

Jak to trzeba rozegrać? <input> będzie ukryty jednak to on posiada właściwość ‘checked’ która definiuje czy akcja została podjęta czy nie.

Bazą dla wizualizacji checkboxa będzie <label>.

CSS

Tworzymy owalną formę dla checkboxa na ‘switchu’:

.container {
    text-align: center;
    padding: 100px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    transition: all 0.3s;
}

Za pomocą pseudo-klasy :after tworzymy koło które będzie się przesuwać do checkboxie:

.switch::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 28px;
    background-color: white;
    top: 1px;
    left: 1px;
    transition: all 0.3s;
}

Teraz wystrzeliwujemy w kosmos właściwy <input> z checkboxem

.offscreen {
    position: absolute;
    left: -9999px;
}

Po każdym kliknięciu na checkboxa właściwy <input> zmienia swój stan na ‘checked’. Można to sprytnie wykorzystać w CSS i przy takiej zmianie dostosować style:

input[type='checkbox']:checked + .switch::after {
    transform: translateX(30px);
}

input[type='checkbox']:checked + .switch {
    background-color: #7983ff;
}

I tyle 🙂

Cały CSS:

.container {
    text-align: center;
    padding: 100px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    transition: all 0.3s;
}

.switch::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 28px;
    background-color: white;
    top: 1px;
    left: 1px;
    transition: all 0.3s;
}

input[type='checkbox']:checked + .switch::after {
    transform: translateX(30px);
}

input[type='checkbox']:checked + .switch {
    background-color: #7983ff;
}

.offscreen {
    position: absolute;
    left: -9999px;
}

Na pierwszy rzut oka wydaje się to skomplikowane ale w zasadzie takie nie jest 🙂 Trzeba się z tym pobawić!

Podsumowanie

Dzisiaj poznałeś/aś 5 nowych efektów które mam nadzieję, że Cię zainteresowały.

Pamiętaj. Nigdy nie lekceważ potęgi CSS! To właśnie ten język może sprawić, że Twoja aplikacja wygra w oczach potencjalnych odbiorców.

Jeśli artykuł Ci się podobał to napisz w komentarzu. Kto wie może napiszę jeszcze coś więcej na temat super mocy CSS’a 🙂 Oczywiście tylko wtedy jeśli Ty będziesz chciał/a to czytać!

Bartek Cis

Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?