[rukh]

#webdev #html #css #gif #js #cssdemo
Bardzo prosty przycisk bez użycia JS i pochodnych bibliotek.

Jeden przycisk z użyciem zaledwie jednego , a trwałe przyciśnięcie przy pomocy ukrytego "checkbox" albo "radio" (inaczej musiałbym JS użyć).
Główny prostokąt to ten ciemniejszy czerwony z ustawionym cieniem wokół. A jasnoczerwony to pseudoelement ":before", czyli element zduplikowany bez utworzenia kolejnego elementu w HTML.

[MegaZU0]

@rukh: czy trwałego przyciśnięcia nie uzyskał byś przy pomocy focus?

[Rst00]

@MegaZU0: no a jak straci focus to mu przycisk odskoczy więc lipa

[rukh]

@MegaZU0: hmm, nie jest to "input type=text". Spróbowałem. Trwałe przyciśnięcie da się uzyskać za pomocą ":target", ale wtedy się adres na pasku zmienia.
@MKu8ar: jak to nie? Przecież :focus działa wtedy, gdy coś jest "namierzone"

[macjan_666]

@MKu8ar a przy :active?

[MrRuby]

poka codepena

[addr]

@rukh: Beka z podludzi co wszystko by chcieli w cssie programować, bo js za ciężki :D

[MegaZU0]

@addr: bardziej chodzi o wydajność na słabszych maszynach.

[rukh]

@addr: przełączanie w CSS bądź w JS to nie robi różnicy chyba że ktoś wpadnie na pomysł wyłączenia JS na stronie. Jednak animowanie w CSS jest wydajniejsze.
@MegaZU0: im wyższa rozdzielczość, czyli większy element, tym niestety mniej wydajne. Już byłoby lepiej w Canvas zrobić, bo on renderuje wyświetlaną grafikę do rastrowej (powiększysz stronę i już widzisz schodkowanie krawędzi).
Dobrze widać to po aplikacjach na smartfony - samo rysujące