تبدیل عکس به CSS

مهر ۱۷, ۱۳۹۱ توسط : سعید

سلام

چندروز پیش داشتم وب گردی میکردم که مطلبی جالبی رو دیدم.یکی از طراحان سایت عکس مونالیزا رو با CSS نقاشی کرده.اولش باور نداشتم این و و فکر کردم احتمالا چند تا افکت تصویری به عکس مونالیزا داده.

بعد از اینکه به لینک اصلی رفتم دیدم که واقعا این کار رو انجام داده.

این تصویر رو توی لینک زیر ببینید.

http://codepen.io/jaysalvat/details/HaqBf#stats

آقای Jay Salvat برای تبدیل این عکس به کدهای CSS یک کلاس با زبان PHP نوشته.کلا کار این کلاس اینه که عکس میگیره به CSS تحویل میده.

این کلاس رو هم از لینک زیر میتونید دانلود کنید.

https://github.com/jaysalvat/image2css

هنگامی که تست کردم دیدم که مرورگر برای تبدیل تصویر مونالیزا به CSS مدتی هنگ کرد.بعد با استفاده از یک تصویر ساده سیاه و سفید که فقط یک نوشته بود تست کردم.بازهم مرورگر هنگ کرد اما بعد از چند لحظه تصویر رو ایجاد کرد.وقتی که به سرس صفحه نگاه کردم دیدم اینکار رو فقط با استفاه از خاصیت box-shadow انجام میده.

به هر حال شاید این کلاس و این کار زیاد به کار نیاد اما از کار و ایده آقای Jay Salvat خیلی خوشم اومد.

دمش گرم.

بازدید : ۴۰۴۳

ایوب سیستم
مهر ۱۷, ۱۳۹۱ @ ۶:۵۷ ب.ظ

سلام . خیلی جالب بود این کار….
بازم مثل همیشه تشکرررررر ♥

پاسخ دادن
    سعید
    مهر ۱۷, ۱۳۹۱ @ ۸:۲۰ ب.ظ

    خواهش میکنم
    ممنون از لطف شما

    پاسخ دادن
شهاب
آبان ۸, ۱۳۹۱ @ ۴:۴۱ ب.ظ

ممنون خیلی جالب بود
یه جاهایی هم به درد میخوره

پاسخ دادن
آبان ۲۱, ۱۳۹۱ @ ۸:۲۳ ب.ظ

خیلی باحال بود. برای بعضی جاها می تونه جالب باشه . مثلا برای انتی اسپم با ایجاد تصاویر ساده. خسته شدیم از بس با این کپچا کار کردیم.. فکر کنم تا مدتی هم جواب بده

پاسخ دادن
دی ۱۶, ۱۳۹۱ @ ۹:۲۴ ق.ظ

خیلی باحال بود ! بازم از اینا بزا 🙂

پاسخ دادن
اسفند ۱۰, ۱۳۹۱ @ ۹:۲۲ ب.ظ

بابا ایول دمش گرم! البته همیچنم مرورگر هنگ نمیکنه.مثلا من یه عکس چگوارا زدم حدود ۲۰ ثانیه طول کشید هنگش. اما باور نکردم تا زمانی که سورس صفحه رو نگا کردم و چشام پرید بالای سرم!!
دم اون و همینطور دم شما هم گرم:)

پاسخ دادن
مهر ۵, ۱۳۹۲ @ ۷:۰۸ ق.ظ

ممنون. عالی بود

پاسخ دادن
تیر ۳۱, ۱۳۹۵ @ ۸:۲۸ ب.ظ

کار جالبی انجام داده
به نظرمن اون طرفایی کلا مجال زیادی برای اینجور کارا دارن
حالا نمیدونم از چه طریق تامین میشن که میتونن اینجور بشینن ایده هاشونو پیاده کنن
در حالیکه ما فقط میتونیم پروژه هایی رو کار کنیم که مارو زود به پول میرسونه
خوش بحالشون واقعا

پاسخ دادن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


*