Blur effekt CSS 3-al szövegekre

A CSS 3 text-shadow tulajdonságával megfelelően beállítva ún. blur effektet tudunk tenni a szövegekre, magyarul homályosítani tudjuk vele a betűket, pl:

Blur effekt text-shadow-al

Blur effekt text-shadow-al

Blur effekt text-shadow-al

Blur effekt text-shadow-al

Blur effekt text-shadow-al

A kód:

text-shadow: 0px 0px 2px #000000; color: transparent/* CSS by srmark */;

A kód annyit csinál hogy a szövegre árnyékot tesz, és a szöveg színét átlátszóra állítja be, tehát a szöveg eltűnik és csak az árnyéka marad meg.
Piros rész: itt adhatjuk meg milyen mértékű legyen a homályosítás
Zöld rész: meg kell adni milyen színű legyen a szöveg

Példák:

text-shadow: 0px 0px 0px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 1px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 2px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 3px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 4px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 5px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 6px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 7px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 1px #000000, 0px 0px 2px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 2px #000000, 0px 0px 3px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 3px #000000, 0px 0px 5px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 2px #000000, 1px 1px 4px #000000, 2px 2px 5px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 3px #000000, 2px 2px 5px #000000, 3px 3px 5px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 3px #000000, 2px 2px 5px #000000, 4px 4px 5px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 3px #000000, 3px 3px 5px #000000, 4px 4px 8px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 3px #FF5500, 0px 0px 10px #000000, 0px 0px 15px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 3px #FF5500, 3px 3px 4px #000000, 1px 1px 12px #000000; color: transparent/* CSS by srmark */;

text-shadow: 0px 0px 3px #FF5500, 3px 3px 4px #000000, 4px 4px 10px #000000; color: transparent/* CSS by srmark */;

font-size: 30px; text-shadow: 0px 0px 1px #000000; color: transparent/* CSS by srmark */;

font-size: 30px; text-shadow: 0px 0px 3px #000000; color: transparent/* CSS by srmark */;

font-size: 30px; text-shadow: 0px 0px 5px #000000; color: transparent/* CSS by srmark */;

font-size: 30px; text-shadow: 0px 0px 7px #000000; color: transparent/* CSS by srmark */;

font-size: 30px; text-shadow: 0px 0px 9px #000000; color: transparent/* CSS by srmark */;

Két féle képpen tudod alkalmazni ezt a kódot, az első hogy a html kódba írsz szöveget, így:


<span style="text-shadow: 0px 0px 2px #000000; color: transparent/* CSS by srmark */;">Ide írd a szöveget</span>



Vagy egy oldaladon meglévő doboz/elem szelektorával css-ként illeszted be:


<style type="text/css" rel="stylesheet">

Szelektor_helye {text-shadow: 0px 0px 2px #000000; color: transparent/* CSS by srmark */;}

</style>


Például:

<style type="text/css" rel="stylesheet">

div#interviewBox_1 {text-shadow: 0px 0px 2px #000000; color: transparent/* CSS by srmark */;}

</style>