Szöveg homályosítás CSS segítségével

Ahhoz, hogy egy látogató feliratkozzon oldaladra, esetleg előfizessen tartalmad olvasására, sok-sok mézes madzag elhúzása szükséges.

Próbálkoztál esetleg már azzal, hogy a cikk első két bekezdését megjeleníted, a maradék szöveg helyett pedig egy “Iratkozz fel a tovább olvasáshoz” gombot teszel be? Ha igen, mutatok egy még jobbat!

Az ember mindig azt szeretné a legjobban megkapni, ami ott van az orra előtt, de valamiért nem lehet az övé. Nem elég pusztán az ígéreted, hogy feliratkozás után elolvashatja a tartalmat, hanem konkrétan az arcába kell tolni úgy, hogy közben ne kapjon semmit.

Szöveg homályosítás 5 sorban

Ha elég érdekes volt a bevezetőd, és látja maga előtt a szöveg homályos folytatását, beindulnak az ősi ösztönök, és mindenáron be akarja majd gyűjteni az információt.

A trükk az, hogy a szöveg színét átlátszóvá teszed, majd adsz neki egy elmosott árnyékot, illetve kikapcsolod a szöveg kijelölés lehetőségét.

Tehát viccet félretéve, a trükk az, hogy a szöveg színét átlátszóvá teszed, majd adsz neki egy elmosott árnyékot, illetve kikapcsolod a szöveg kijelölés lehetőségét a következő CSS kóddal:




File: blur_text.css
-------------------------

 .blur-text{
  text-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 6px;
  color: transparent;
  -webkit-user-select: none;
}


Ezt követően az elhomályosítani kívánt szöveget körbeveszed egy div-vel, melynek .blur-text osztályt adsz, kivéve ha már be van jelentkezve a felhasználó.

Ha még homályosabbá szeretnéd tenni, akkor a text-shadow utolsó paraméterét kell növelni (ami most 6px), a 9px már teljesen olvashatatlan.

CSS szöveg elmosás előnye és hátránya

Előnye, hogy

  • rendkívül gyors és egyszerű,
  • nem igényel javascript mókolást
  • mivel egy pszichológiai csapda, garantált regisztráció növekedést eredményez
  • a Google látni fogja a tartalmad, így SEO szempontjából előnyös

Hátránya, hogy a szöveg ott lesz a felhasználó előtt, így aki ért a programozáshoz, ki tudja szedni a forráskódból.

Tipikusan olyan oldalon használnám, ahol nem jellemző az ilyen típusú tudás pl: kertész blogok, hobbi-dekor cikkek, szakács oldalak.