Jak zrobić stronę internetową w szklanym stylu? Tutorial HTML i CSS krok po kroku!

⭐ https://zrozumiecreact.pl/ - Sprawdź nasz kurs React! ⭐

Sprawdź efekt końcowy 👉 https://zaczynamyprogramowac.pl/ 👈
Zachęcamy do zapisania się na nasz newsletter!

Kod: https://github.com/FilipMam/glassmorp...

Nasza grupa na FB: https://urlgeni.us/facebook/jzp_grupa
Odwiedź nasz fanpage: https://urlgeni.us/facebook/jzp_fanpage
Subskrybuj:    / @jzp  

[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/proper...

Jak działają transitiony?
https://www.freecodecamp.org/news/css...

Jak działa pozycjonowanie?
https://www.freecodecamp.org/news/lea...

Tutorial Dev Ed o glassmorphiśmie:
   • Build Glass Website with HTML and CSS Tuto...  

Szklane Inspiracje
  / :  

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