Jak zrobić stronę internetową w szklanym stylu? Tutorial HTML i CSS krok po kroku!
Sprawdź efekt końcowy 👉 https://zaczynamyprogramowac.pl/ 👈
Zachęcamy do zapisania się na nasz newsletter!
Kod: https://github.com/FilipMam/glassmorphism
Nasza grupa na FB: https://urlgeni.us/facebook/jzp_grupa
Odwiedź nasz fanpage: https://urlgeni.us/facebook/jzp_fanpage
Subskrybuj: https://www.youtube.com/channel/UCF4jzVCa2J45NXnNtf6XBoA?sub_confirmation=1
[0:00] Intro
[2:09] Kodzimy!
[16:40] Efekt szkła
[39:38] Podkreślanie linku
[58:16] Błyszczący przycisk
[1:15:41] Gradient na tekście
Blog Tomka
https://blog.comandeer.pl/
Jak działają animacje?
https://css-tricks.com/almanac/properties/a/animation/
Jak działają transitiony?
https://www.freecodecamp.org/news/css-transition-examples/
Jak działa pozycjonowanie?
https://www.freecodecamp.org/news/learn-the-basics-the-css-position-property/
Tutorial Dev Ed o glassmorphiśmie:
https://youtu.be/O7WbVj5apxU
Szklane Inspiracje
https://pl.pinterest.com/yui05300/glassmorphism/:
Nagrałem tutorial HTML i CSS, w którym pokazuję, jak od zera od zera zrobić stronę internetową w “szklanym” stylu.
Glassmorphism (nie mam bladego pojęcia jak mówić na to polsku xD) łapie ostatnio duży hype, więc mam nadzieję, że Wam się przyda. Tutorial jest skierowany raczej do osób początkujących, więc staram się tłumaczyć również podstawowe zagadnienia frontend (animacje, gradienty, flexbox, itd.), ale jeśli interesują Was tylko “szklane efekty” i nie chcecie na mnie patrzeć przez godzinę 21 minut i 37 sekund ( ( ͡° ͜ʖ ͡°) ) to na osi czasu są zaznaczone fragmenty w którym mówię o konkretnych efektach takich jak:
- stworzenie “szkła” przy pomocy backdrop-filter
- dodanie gradientu na tekście przy pomocy background-clip
- stylowanie efektu połysku na przycisku
Miłego oglądania!
Filip Mamcarczyk i Kacper Sokołowski
Chcesz więcej? Sprawdź w oryginale!
Przejdź do filmu