با یکخط کد ِ سیاساس میخواهیم یک افکت ِ جالب برای تصاویری که در صفحات وب قرار می دهیم درست کنیم. مراحل ِ کار بسیار ساده هست.

ابتدا در پروندهی اچتیامالمان یک همچینچیزی مینویسیم:
<div id="content"> <div id="dot-effect"></div> <img src="img.jpg" /> </div>
سپس فتوشاپمان را آتیش میکنیم و یک سند جدید با طول و عرض مثلا 3 پیکسل ایجاد میکنیم و دقیقا در وسط ِ آن یک نقطهی ریز با طول و عرض 1 پیکسل و رنگ ِ مشکی قرار میدهیم. بهتر هست که شفافیت نقطه را تا حدودی کم کنیم. مثلا روی 60 درصد بگذاریم! البته این نقطه را من قبلا درست کردهام و در فایلی که دریافت میکنید، موجود است، و میتوانید از همان استفاده کنید.
خب، حالا این نقطهای که طراحی کردهایم را با پسوند ِ پیانجی (png) ذخیره میکنیم. یادتان هم باشد که این نقطه نباید زمینه داشته باشد، یعنی Transparent باشد.
حالا نوبت به دستورات ِ سیاساس میرسد:
#dot-effect {background: transparent url(dot.png) repeat; position: absolute; width: 500px; height: 374px;}
نقطهای که درست کرده بودیم را در زمینهی dot-effect قرار میدهیم. پوزیشنش را هم ابسُلوت میکنیم تا مستقل از عناصر ِ دیگر ِ صفحه شود و بیآید روی تصویر. طول و عرضش را هم برابر با طول و عرض ِ تصویرمان میکنیم.
تمام شد. به همین راحتی یک جلوهی زیبا برای تصاویرمان درست کردیم. از این افکت بهنظرم بهتر هست که در نمایشهای اسلایدی یا چیزهایی شبیه آن استفاده شود. مثلا همان نمایش اسلایدیای که چند وقت پیش یاد گرفتیم. این افکت را به آن اضافه کنید و نتیجه را ببینید که چقدر جالب میشود :)
نمونهی این افکت را اینجا ببینید و آن را از زیر دریافت کنید:











Hesam
در 10/01/07 گفت:چه کار ها که با این سی اس اس نمی کنن !
خسته نباشید
پاسخ
mort3za
در 10/01/07 گفت:خیلی قشنگ بود. در مورد سی اس اس و جی کوئری بیشتر بنویس. دمت قیــــــژ!
پاسخ
مسیح
در 10/01/07 گفت:واقعاً تیتر مطلب رو خوندم تعجب کردم ! فک کردم حتماً یه کد HTML 5 اومده !
به نظرم خلاقیت جالبی بود
پاسخ
AmirTnT
در 10/01/07 گفت:ممنون :))))))))))
پاسخ
صندوقك
در 10/01/08 گفت:مثل هميشه عالي، خسته نباشيد و ممنون :)
پاسخ
Mehrdad
در 10/01/08 گفت:فقط میتونم بگم عالی بود.
پاسخ
Hesam
در 10/01/11 گفت:سلام
یک مورد دزدی هست
البته طرف کلا کارش اینه گفتم بهتون بگم :
http://parsian-design.com/education/weblog/220-afkt-nghth-ae-v-rah-rah-tvst-se-as-as.html
اگر تک طرح رو می خوندید می تونی آرشیو کاملش رو تو پارسیان دیزاین پیدا کنید
پاسخ
محمد
در 10/01/26 گفت:یا سلام وعرض ادب خدمت شما همکار گرامی .خوشحال می شم با وب مفید و پر محتوایتان تبادل لینک داشته باشیم. سایت دانلود کامل با رنک 3 گوگل آماده تبادل لینک با شماست.
http://www.full-dl.com
با تشکر بهزاد.
پاسخ
محمد
در 10/01/31 گفت:سلام دوست من
خيلي وقته مطالبتو پيگيري مي كنم
خيلي باحال مي نويسي
من تو رو با عنوان خاطرات يك برنامه نويس لينك كردم تو هم اگه دوست داشتي من بلينك
خوش حال ميشم با هم دوست شيم
زود زود آپ كن باي
پاسخ
مجتبی
در 10/02/14 گفت:sلام دوست عزیز مرسی از مطالب مفیدت ، من نیاز به آراس اس اسلاید شو دارم که مثلا 5 خبر آخر رو نشون بده ، مثل این : http://www.abzarak.com/?page_id=59
البته چون این سایت تگ سایت خودشو می زنه نمیشه درست ازش استفاده کرد
!
پاسخ
سیدمحمد عقیلی
در 10/05/15 گفت:با تشکر، زیبا بود. موفق باشید.
پاسخ
کری
در 10/06/11 گفت:اگه یه روز دوربین خریدم و گالری عکسم را راه انداختم احتمالا از این افکت استفاده میکنم و اگه خوب شد دعات میکنم :D
پاسخ