در گذشته برای ایجاد افکت های ویژه در تصاویر و متن های مورد استفاده در طراحی یک وب سایت باید از برنامه های گرافیکی مانند فتوشاپ و… استفاده می کردیم و اگر نیاز داشتیم تا به یک متن جلوه و زیبایی خاصی اضافه کنیم باید آن را به صورت تصویر در می آوردیم . اما با پیشرفت فناوری های مورد استفاده در طراحی وب سایت ها ، مانند CSS3 می توان این افکت ها و جلوه ها را بدون نیاز به نرم افزارهای گرافیکی و تصاویر ایجاد نمود ! یکی از خاصیت های کاربردی CSS3 خاصیت Shadow می باشد که با استفاده از آن هم امکان ایجاد سایه و هم امکان ایجاد نور و… را دارید . در این آموزش قصد دارم تا با استفاده از همین قابلیت یک متن نورانی و بسیار زیبا ایجاد کنم . در ابتدای کار یک بخش استایل تعریف می کنیم تا کدهای CSS مورد نیاز را در آن قرار دهیم . سپس متن مورد نظر را با استفاده از کدهای HTML مینویسم . به صورت زیر : <html> <head><title>CSS3 Text Lens Flare Effect</title></head> <style type="text/css"> body{ background: #f83113; text-align: center; } </style> <div> <em>Mohammad Reza Mahmoudi Iranhex.com</em> </div> </html>در کدهای بالا بدنه اصلی متن مورد نظر را نوشتیم . متن را در بین تگ em و div با کلاس text قرار دادیم . (این آموزش مربوط به کدهای CSS3 می باشد و توضیحات مقدماتی در مورد کدهای HTML داده نمیشود .)در این مرحله باید کدهای CSS مربوط به سلکتور text را در بین تگ های style بنویسیم ..text em{ display: block; font-style: normal; text-transform: uppercase; line-height: 0.8em; letter-spacing: 0.1em; font-weight: 900; font-size: 100px; color: #FFF; text-shadow: 0 0 150px #FFF, 0 0 60px #FFF, 0 0 10px #FFF; }کدهای بالا یک متن با رنگ سفید و با ضخامت ۹۰۰ ، با اندازه فونت ۱۰۰px و… ایجاد می کند . کد مهمی که موضوع آموزش ما می باشد خط آخر و کد text-shadow است . این کد باعث می باشد تا نور سفیدی پیرامون متن نوشته شده را بگیرد و باعث زیباتر شدن آن بشود .text-shadow: 0 0 150px #FFF, 0 0 60px #FFF, 0 0 10px #FFF;کد کلی اموزش به صورت زیر است :<html> <head><title>Iranhex.com</title></head> <style type="text/css"> body{ background: #f83113; text-align: center; } .text em{ display: block; font-style: normal; text-transform: uppercase; line-height: 0.8em; letter-spacing: 0.1em; font-weight: 900; font-size: 100px; color: #FFF; text-shadow: 0 0 150px #FFF, 0 0 60px #FFF, 0 0 10px #FFF; } </style> <div> <em>Mohammad Reza Mahmoudi Iranhex.com</em> </div> </html>کار تمام است
