Jak wykonać taki efekt ? Gradient czy coś innego?

pytanie zadane 2 maja 2019 w HTML i CSS przez Greeenone Pasjonat (16,100 p.)

Hej,

Chciałbym wykonać efekt jak na obrazku. Problem jest taki, że te czarne tło za ikonką musi się ciągnąć do samego dołu a ikonka musi być częścią linku. Jakim sposobem wykonać taki efekt ? Ustawić gradient, pseudo element czy coś innego ?

1 odpowiedź

odpowiedź 2 maja 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Ja bym tu zrobił dwa osobne elementy, ustawił je obok siebie i w pierwszym dał ikonkę, a w drugim tekst i każdemu odpowiedni background-color. Szczerze to nie widzę tu kompletnie żadnego uzasadnienia dla gradientu, którym też dałoby się to opaździerzyć ale to bez sensu, gradient jest wielokrotnie bardziej wymagający dla przeglądarki niż zwykły background-color.

komentarz 2 maja 2019 przez Greeenone Pasjonat (16,100 p.)

Dzięki za odpowiedź. Zrobię tak jak mówisz. Problem jest taki, że nie wiem jak to teraz dociągnąć do samego dołu. Musiałbym to robić na dwie "sekcje". Pierwsza z ikonką a druga z nazwą. Kolejnym problem jest to, że Ikonka i link to jest jeden block

Co do gradientu, to myślałem dać taki z natychmiastowym przejściem z jednego koloru na drugi :P

komentarz 2 maja 2019 przez Greeenone Pasjonat (16,100 p.)
edycja 2 maja 2019 przez Greeenone

Tutaj screen który lepiej objaśnia to co chcę uzyskać :P Na niebiesko zaznaczyłem strefę kliku

///EDIT

Koniec końców dałem dodatkowego div'a z absolute

komentarz 2 maja 2019 przez Tomek Sochacki Ekspert (227,510 p.)

zrób sobie jeden element na którym zapniesz onclick, lub który będzie linkiem <a>, a w nim dwa kolejne, które ustawisz np. flexem lub w jakikolwiek inny sposób.

Co do gradientu, to myślałem dać taki z natychmiastowym przejściem z jednego koloru na drugi :P

ale ja nie napisałem, że gradientem się nie da :) napisałem tylko, że nie ma uzasadnienia używanie tak zasobożernego rozwiązania dla tego przypadku. Możliwości techniczne to jedno, a ich racjonalne użycie to drugie :)