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.

9
  • Najlepsze
  • Wszystkie komentarze
Rst00
@MegaZU0: no a jak straci focus to mu przycisk odskoczy więc lipa
4
MegaZU0
MegaZU0
@rukh: czy trwałego przyciśnięcia nie uzyskał byś przy pomocy focus?
0
rukh
rukh Autor
@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"
0
macjan_666
macjan_666
@MKu8ar a przy :active?
0
MrRuby
MrRuby
poka codepena
0
addr
addr
@rukh: Beka z podludzi co wszystko by chcieli w cssie programować, bo js za ciężki :D
0
MegaZU0
MegaZU0
@addr: bardziej chodzi o wydajność na słabszych maszynach.
0
rukh
rukh Autor
@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
0