انجمن کدستانMoisrex

<div class="reflect" style="color:orangered;font:30px 'Segoe Ui',Tahoma,sans-serif;direction:rtl;">روزگاری که در آن نیست کسی یار کسی کاش یارب که نیفتد به کسی کار کسی</div>

<script>

(function reflect(){

var refs=document.getElementsByClassName('reflect');

for(var i=0,len=refs.length;i<len;i++){

var ref=refs,

txt=ref.innerHTML.trim(),

h=ref.offsetHeight*2;

ref.innerHTML='<canvas>'+txt+'</canvas>';

var can=ref.getElementsByTagName('canvas')[0],

con=can.getContext('2d')

font=ref.style.font || '12px tahoma',

dir=ref.style.direction || ref.dir || 'ltr';

can.dir=dir;

con.font=font;

var m=con.measureText(txt);

can.width=m.width;

can.height=h;

con.font=font;

con.globalAlpha=1;

con.fillStyle=ref.style.color;

con.textBaseline='top';

con.translate(dir=='rtl'?can.width:0,0);

con.fillText(txt,0,0);

con.setTransform(1,0,0,1,0,0);

var gr=con.createLinearGradient(0,0,0,can.height/2);

gr.addColorStop(0,'rgba(255,255,255,0)');

gr.addColorStop(1,ref.style.color||'black');

con.fillStyle=gr;

con.translate(dir=='rtl'?can.width:0,can.height);

con.rotate(180*Math.PI/180);

con.scale(-1,1);

con.font=font;

con.globalAlpha=0.3;

con.textBaseline='bottom';

con.fillText(txt,0,can.height/2);

}

})();

</script>

<div class="reflect" style="color:orangered;font:20px tahoma;direction:rtl;">روزگاری که در آن نیست کسی یار کسی کاش یارب که نیفتد به کسی کار کسی</div>

<script>

(function reflect(){

var refs=document.getElementsByClassName('reflect');

for(var i=0,len=refs.length;i<len;i++){

var ref=refs,

txt=ref.innerHTML.trim(),

h=ref.offsetHeight*2;

ref.innerHTML='<canvas>'+txt+'</canvas>';

var can=ref.getElementsByTagName('canvas')[0],

con=can.getContext('2d')

font=ref.style.font || '12px tahoma',

dir=ref.style.direction || ref.dir || 'ltr';

can.dir=dir;

con.font=font;

var m=con.measureText(txt);

can.width=m.width;

can.height=h;

con.font=font;

con.fillStyle=ref.style.color;

con.textBaseline='top';

con.translate(dir=='rtl'?can.width:0,0);

con.fillText(txt,0,0);

}

})();

</script>