یک طراح وب

آدم ها را نمی توان فقط به یک یا چند موضوع ِ خاص، محدود ساخت. آدمی که این پشت نشسته است، از هر موضوعی می نویسد!

افکت نقطه‌نقطه برای تصاویر با سی‌اس‌اس

نوشته‌ی علیها در January 7, 2010 روی سی اس اس

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

ابتدا در پرونده‌ی اچ‌تی‌ام‌ال‌مان یک همچین‌چیزی می‌نویسیم:

<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 قرار می‌دهیم. پوزیشنش را هم ابسُلوت می‌کنیم تا مستقل از عناصر ِ دیگر ِ صفحه شود و بی‌آید روی تصویر. طول و عرضش را هم برابر با طول و عرض ِ تصویرمان می‌کنیم.

تمام شد. به همین راحتی یک جلوه‌ی زیبا برای تصاویرمان درست کردیم. از این افکت به‌نظرم به‌تر هست که در نمایش‌های اسلایدی یا چیزهایی شبیه آن استفاده شود. مثلا همان نمایش اسلایدی‌ای که چند وقت پیش یاد گرفتیم. این افکت را به آن اضافه کنید و نتیجه را ببینید که چقدر جالب می‌شود :)

نمونه‌ی این افکت را این‌جا ببینید و آن را از زیر دریافت کنید:

10 دیدگاه نوشته شده است! می توانید دیدگاه خود را بنویسید »

  • 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
    البته چون این سایت تگ سایت خودشو می زنه نمیشه درست ازش استفاده کرد
    !

این پست تا به حال بازتابی نداشته است!

لطفا قبل از نوشتن دیدگاه خود، توجه داشته باشید که دیدگاه‌تان در رابطه با این پست باشد. در غیر این‌صورت می‌توانید از فرم تماس استفاده کنید. ممنون از توجه‌تان :)
my avatar

دیدگاه خود را ارسال کنید