5 sztuczek w CSS które chcesz znać
css
1/10/2018
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:
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; }
- clip: rect(0 0 0 0); wycina cały element ze strony i staje się nie widoczny
- Ustawiasz wymiary na 1px
- Negujesz wymiary ustawiając margin: -1px;
- 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ć!
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?