We wczorajszym odcinku cyklu padło w komentarzu stwierdzenie o tym kto używa jeszcze grafik skoro można ten efekt uzyskać w CSS3. Otóż Ci, którzy tworzą projekty mające działać na większości przeglądarek, a z CSS3 niestety póki co różnie to bywa. Ale racja, da się to zrobić w czystym CSS bez użycia grafik. Tutaj można się zapoznać z dokładnymi informacjami o zasadzie działania całego tricku z „:checked”

Do dzieła więc!

Użyje struktury z DIY#2:

[code]
<input type="checkbox" id="check1" class="dwcheckbox"/>
<label for="dailyweb">Checkbox1</label>
<input type="radio" id="radio1" class="dwradio" name="radio"/>
<label for="radio1">Option1</label>
<input type="radio" id="radio2" class="dwradio" name="radio"/>
<label for="radio2">Option2</label>
[/code]

Obrazków nie używamy, więc przejdźmy od razu do CSSa:

Pierwsze ostylujmy sobie powtarzalne elementy

[code]
input[type=radio], input[type:checkbox]{
display: none;
}
label{
cursor: pointer;
display: inline-block;
font-size: 13px;
margin-right: 15px;
padding-left: 25px;
position: relative;
}
label:before{
background-color: #3cbabe;
box-shadow: inset 0px 2px 3px 0px rgba(0,0,0,0.3), 0px 1px 0px 0px rgba(255,255,255,0.8);
bottom: 1px;
content: "";
display: inline-block;
height: 16px;
left: 0px;
margin-right: 10px;
position: absolute;
width: 16px;
}
[/code]

Co zrobiliśmy powyżej:
Podobnie jak w DIY#2 ukryliśmy prawdziwe <input/>, następnie ostylowaliśmy <label> oraz stworzyliśmy zawartość :before dla <label>. Aktualnie otrzymamy 16px kwadraty z cieniami a obok nich tekst, wyglądające mniej więcej tak:
543e055a4bb71
Teraz zaokrąglijmy nasz radio button, żeby nie był identyczny jak checkbox, wystarczy do tego :

[code]
.dwradio + label:before{
border-radius: 8px;
}
[/code]

check2

Wygląda to już całkiem znośnie ale póki co nie pokazuje, że jest zaznaczone. Zrobimy to opierając się o selektor :checked tak samo jak w DIY#2 ale zamiast podmieniać obrazek wstawimy do :before znaki Unicode – „ptaszka” i kropkę:

[code]
.dwradio:checked + label:before{
color: #ffffff;
content: "\2022";
font-size: 30px;
line-height: 18px;
text-align: center;
}
.dwcheckbox:checked + label:before{
color: #ffffff;
content: "\2713";
font-size: 15px;
line-height: 15px;
text-align: center;
}
[/code]

Tak wygląda efekt końcowy:
check3
Mission complete.
Font-size oraz line-height jest dobrany tak, aby pasował, nie ma reguły ile ma wynosić.

Można zoptymalizować i przenieść powtarzane CSS :checkded do :before, czyli text-align oraz color. W pliku są już przeniesione.

Źródło możecie pobrać tutaj: dwcheckboxCSS3

 

Poprzednie odcinki:

DIY#1: Selektor plików
DIY:#2: Checkbox i radio button na obrazkach

TEMATY:
Najświeższe artykuły