Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Inspiráció

Menő CSS szövegeffektek

2021. június 12. | Bognár Péter

# # # #

A modern webdesign egyik alapkövetelménye a látványos, figyelemfelkeltő design, aminek az egyik egyre inkább elkerülhetetlen eleme a mozgókép, de legalábbis az, hogy a honlapod ne simán statikus képet mutasson, mint egy színes magazinból kivágott oldal, hanem valamilyen szinten képes legyen megmozdulni. Manapság alapvetésnek számít, hogy kifejezetten jót tesz a tartalomnak, ha videót is integrálunk az oldalba, de nem csak a gondosan megrendezett kisfilmek vagy Blenderben megkonstruált, a Digic Picturest is megszégyenítő animációs filmek fontosak, hanem kisebb effektusok, interaktív, vagy csak önmaguktól megmozduló elemek, például feliratok.

Egy felirat megmozdításához sokféle eszközt bevethetünk, az egyik legegyszerűbb persze egy kész gif animáció vagy akár egy kész mp4 beágyazása a honlapba. Ezek a megoldások ugyan látványosak, de több hátulütőjük is van:

  • Minőség: egy videóba vagy animgifbe beégetett felirat muszáj, hogy valamennyire össze legyen húzva, valamilyen kompromisszumot mindenképpen kell kötni a fájlméret szinten tartásához. Értelemszerűen minél kisebb a fájl, annál kevésbé néz ki jól, különösen nagyobb böngészőablakokban.
  • Méret: ahogy az előbb is írtam, minél pofásabb egy animáció, annál nagyobb a fájlméret, a betöltendő tartalom mérete és ezzel együtt a betöltési sebesség pedig mostanában a webdesign egyik legnagyobb mumusa.
  • Maga a felirat: a képbe vagy videóba csomagolt feliratot nem tudják kiolvasni a keresőrobotok. Meta-leírásokkal, alt-textek beírásával ezt orvosolhatjuk valamelyest, de az a legjobb, ha tiszta szöveget tudunk az oldalra helyezni.

A megoldás persze a CSS (és alkalomadtán némi JavaScript). Néhány sor kóddal meglepően látványos hatásokat érhetünk el a teljesen SEO-barát, sima html-feliratainból. Inspiráló megoldásokat keresve a CodePenhez fordultam. Ha nem ismernétek, ez az oldal kódolók Dribbble-je, ahol nem csak a látványos végeredményt csodálhatjuk tátott szájjal, hanem rögtön a kód motorház alatti működését is meg lehet vizsgálni (sőt, rögtön bele is lehet piszkálni). Mindennek tetejébe a feltett alkotások általában (ha nincs külön jelezve) nyílt forráskódnak számítanak, azaz akár fel is használhatóak.

Lássunk néhány szuper trükköt! 

A kódokat a Run Pen kapcsoló megnyomásával indíthatod el. Ugyan a kódot magát ezekben a pici beágyazott ablakokban is megnézheted, de ha valamit alaposabban megvizsgálnál, érdemes az ablak jobb felső sarkában az “Edit on CodePen” feliratra (vagy a CodePen ikonra) bökve teljes képernyőben kezdeni kísérletezni a beállításokkal.

Iratkozz fel YouTube csatornákra!

blog

Díjazottak lettünk az Év honlapja versenyen E-learning kategóriában!

Díjazottak lettünk az Év honlapja versenyen E-learning kategóriában!

2021. december 27.

2021 nagyon sűrű év volt. Nem csak azért, mert idén voltunk 10 évesek, hanem mert az év elején kívül-belül megújultunk, egy igazán naprakész és interaktív tanfolyam várja a tanulni vágyókat. A vírushelyzet okán hétköznapivá vált online kapcsolattartási eszközök beépültek a tanmenetbe, így a tanfolyami anyagot idén sok-sok Facebook és Zoom Live óra keretezte, amelyek kiegészítő […]

Tovább a cikkre
Secured By miniOrange