Jak uzyskać taki typ cienia w css

Jak uzyskać taki typ cienia w css
K1
  • Rejestracja:ponad rok
  • Ostatnio:około rok
  • Postów:57
0

Hej filepond (https://pqina.nl/filepond/) dodaje taki ciekawy zielony cien do zdjecia
screenshot-20231218001347.png.
Mozecie to sprawdzic na podanej stronie przy "Multiple File Upload". Z tego co sprawdzilem to tam jest jakis canvas ktory to robi. Nie mialem z tym tagiem jeszcze stycznosci i zastanawiam sie jak uzyskac podobny efekt?

Riddle
Administrator
  • Rejestracja:prawie 15 lat
  • Ostatnio:około 4 godziny
  • Lokalizacja:Laska, z Polski
  • Postów:10074
0

A to nie jest liniowy gradient od zielonego do przezroczystości?

Ewentualnie jest coś takiego jak "inset box shadow".

edytowany 2x, ostatnio: Riddle
K1
  • Rejestracja:ponad rok
  • Ostatnio:około rok
  • Postów:57
0

no wlasnie wydaje mi sie ze nie dlatego sie zastanawiam jak osiagnac podobny efekt, probowalem sie bawic z box shadowem i inset na true i tak nie bardzo to wygladalo. Tam na tej glownej stronie mozesz sprawdzic sam jak to robia, ja tam widze canvasy

KR
  • Rejestracja:około 13 lat
  • Ostatnio:11 miesięcy
  • Postów:117
1

Na pewno można to zrobić za pomocą gradientu liniowego, ewentualnie jeszcze z dodatkiem opacity. Jak dobrze pokombinujesz, to dojdziesz do identycznego efektu.

Kopiuj
background-image: linear-gradient(green, transparent);
opacity: 0.2;

RJ
  • Rejestracja:prawie 3 lata
  • Ostatnio:35 minut
  • Postów:436
0

Spróbuj przy pomocy mask i gradientu góra dół.

dzek69
Moderator
  • Rejestracja:ponad 18 lat
  • Ostatnio:około miesiąc
  • Lokalizacja:Rzeszów
0

Tak na szybko poskładane, zwykły gradient:
https://jsbin.com/dopofoquve/1/edit?html,css,output

canvasa używają zapewne dlatego, że gradienty z css mają dość brzydkie efekty przejścia kolorów nieraz, ale idea jest taka sama

zdaje się że tam są też dwa gradienty pod kątem, a u mnie jest jeden płaski, więc nie ma tego efektu większego zakrycia rogów

możliwe, że tam jeszcze jakaś maska css jest używana, bo na czarnym obrazku pod spodem kiepsko to wygląda, ale to też może być kwestia kolorów czy innego opacity w gradiencie, kwestia dostosowania

ogółem prosty efekt


Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.