Kreativní řešení: Atypická tlačítka
Kódování není jen neustálé opakování deklarací těch samých vlastností, ale také přináší nové a neprobádané výzvy, nad kterými si láme hlavu nejen náš senior kodér. Projekt Lemur obsahuje vytvoření dvou samostatných webů, které jsou velmi specifické a dochází k rozsáhlému vývoji na míru. S ohledem na cílovou skupinu je zvolen design zaměřený na děti a jejich rodiče, který obsahuje velmi zajímavě řešené komponenty. Jedním z dominantních prvků na stránkách jsou atypická tlačítka. Stylem pokus-omyl jsme se snažili nastylovat tato tlačítka dle grafického návrhu, který korespondoval s grafickou identitou zadavatelské společnosti. Mezi prvními nápady bylo vložit tlačítko jako obrázek na pozadí nebo jako svg. Nicméně při tomto řešení se vždy vysktl nechtěný a nepříjemný side-effect. Nemůžeme totiž redukovat šířku tlačítka, a to se tedy jednoduše nepřizpůsobí šířce textu. Museli jsme pátrat dál. Vyřešit se dá takové tlačítko pomocí pokročilých CSS vlastností - výpočtu hodnoty border-radius v procentech z šířky/výšky elementu a pozadí. Pak už ale tlačítko patřičně neostínujete. To jsme vyřešili zduplikováním a zmonochromatizováním stylů celého tlačítka pro sousední element. Ten se absolutně napozicuje vůči tlačítku tak, aby vytvořil požadovaný stín.
Snímek obrazovky 2017-01-02 v 16.32.10
Základní HTML struktura vypadá takto:
Button vytvoříme pomocí tagu <div> a uvnitř vloženého odkazu. Nesmíme zapomenout element, který nastylujeme jako stín pod buttonem - v našem případě se jedná o tag <span>. V tomto případě nemůžeme použít klasický box-shadow, protože tato vlastnost na to nestačí.
<body>
<div class="wrapper">
<div class="button">
<div class="button__front">
<a href="#" class="button__link">TLAČÍTKO</a>
</div>
<span class="button__shadow"></span>
</div>
</div>
</body>
CSS stylopis je následující:
Jednoduše napozicujeme tlačítko.
.wrapper {
margin: 0 auto;
position: relative;
width: 600px;
}
Následně si ostylujeme tlačítko. Z-index nastavíme na 1, tato hodnota je důležitá vzhledem k pořadí dalších vrstev. Zajistí nám, aby tlačítko fungovalo a bylo klikací.
.button {
cursor: pointer;
display: block;
margin-left: .4em;
position: absolute;
right: .5em;
text-align: center;
z-index: 1;
}
Nyní se zaměříme na stylování “první vrstvy” tlačítka. Oválných rohů docílíme deklarací border-radius: 50% / 11%. Právě procenta se používají pro oválné tvary. Zakulacení se provede tak, že postihne uvedená procenta z šířky / výšky prvku. Tímto zápisem zakulacujeme okraje především na šířce elementu.
.button__front {
background-color: lightblue;
border-radius: 50% / 11%;
color: black;
display: block;
font-size: 137.5%;
line-height: 100%;
padding: 0.6em 0.7em;
position: relative;
width: 100%;
}
Na pseudoelementu :before podědíme vlastnosti background (barva atd.), a dále dotvoříme zakulacené okraje, ale tentokrát se zaměříme na výšku prvku.
.button__front:before {
background: inherit;
border-radius: 4% / 50%;
bottom: 10%;
content: "";
display: block;
left: -4%;
position: absolute;
right: -4%;
top: 10%;
z-index: -1;
}
Nastylujeme odkaz tlačítka.
.button__link {
color: black;
text-decoration: none;
}
Postup opakujeme také na elementu, který má zastupovat stín. Zde je vhodné si vytvořit na stylování mixin, či podědit styly z prvku .button__front.
.button__shadow {
background-color: black;
border-radius: 50% / 11%;
display: block;
height: 100%;
left: 0;
position: absolute;
top: .2em;
width: 122%;
z-index: -2;
}
Podobně také nastylujeme pseudoelement :before na "stínu" tlačítka.
.button__shadow:before {
background: inherit;
border-radius: 4% / 50%;
bottom: 10%;
content: "";
display: block;
left: -4%;
position: absolute;
right: -4%;
top: 10%;
z-index: -1;
}
Popsané řešení jsme aplikovali v rámci našich projektů Lemur dětem a Lemur centrum.
Ukázku tlačítka si můžete prohlédnout na Codepenu.
Užitečné odkazy a zdroje:
Jak vytvořit různé tvary v CSS (anglicky).
