Creative-Css-Image-Styles

استایل‌های جذاب css برای افکت‌گذاری روی تصاویر

یکی از مهمترین مسائلی که باید توی طراحی هامون درنظر بگیریم استایل دهی به تصاویر هست. اگر دنبال زمینه ای برای نمایش خلاقیت هاتون هستید، سی اس اس ۳ و به خصوص مبحث استایل دهی به تصویر بهترین فرصتیه که نصیبتون میشه. شما باید روی اِلمان هایی مثل سایه‌ی جعبه، شفافیت، شعاع حاشیه ها و… کار کنید تا اون استایلی که توی فکرتون هست روی تصاویر پیاده سازی بشه.

امروز چند استایل معروف و پر استفاده در وب رو برای شما معرفی میکنم ولی یادتون باشه که اینها در مقابل استایل هایی که شما می تونید ایجاد کنید هیچی نیستند 😉 کافیه یه خورده روی همین استایل ها وقت بذاربد و تغییرشون بدید.

استایل دایره‌ای

خیلی خوب! فرض می کنیم که مبانی اصلی سی اس اس رو بلدید، اگر نه: می تونید یاد بگیرید! 😐 شک دارم همچین استایلی رو تابه‌حال ندیده باشید. بیشتر توی شبکه ها و اسکریپت های اجتماعی برای تصویر پروفایل کاربران از این استایل استفاده میشه.

Circle-Css-Style

استایل کارتی

برای اینکه تصاویر خودتون رو به شکل کارت در بیارید می تونید از این استایل استفاده کنید. این استایل به صورت باکس شادوهای inset چندگانه ساخته شده.

Card-Css-Style

استایل کارت برجسته

با کمی تغییرات روی استایل قبلی میشه همچین افکتی روی تصویر پیاده سازی کرد. این استایل تصویر رو به شکل کارت برجسته به نمایش میذاره و تقریباً شبیه دکمه هم هست!

Embossed-Css-Style

استایل کارت برجسته با افکت نرم

این استایل هم خیلی شبیه استایل قبلی هست البته یه خورده تغییر کرده و افکت برجسته‌ی اون یک پیکسل محوتر شده.

Soft-Embossed-Css-Style

استایل درون سایه

یکی از توانایی هایی که Css 3 داره همین سایه‌ی داخل هست. این استایل که با استفاده از همین قابلیت ساخته شده رو ببینید.

Cutout-Effect-Css-Style

 استایل شکل گیر و درخشان

در این مثال از transition در استایل استفاده شده به اینصورت که وقتی ماوس برروی تصویر قرار میگیره لبه های تصویر گرد و نورانی میشه.

Morphing-Glowing-Css-Style

استایل روکش براق

با این استایل محبوب می تونید روی تصاویرتون یه روکش براق که انگاری نور رو انعکاس داده بسازید. این کار توی سی اس اس با خاصیت after امکان پذیر هست.

Glossy-Overlay-Css-Style

استایل انعکاس

با این استایل می تونید انعکاسی از تصویر خودتون رو در زیر اون ایجاد کنید.

Reflection-Css-Style

استایل روکش براق و انعکاس

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

Glossy-Reflection-Css-Style

استایل نوار چسب

اگر دنبال استایل متفاوتی هستید، استایل نوار چسب رو بهتون پیشنهاد می کنم. توی این استایل نوار چسب جالبی قسمت بالای تصویر قرار میگیره و به نظر میرسه که تصویر با اون به جایی چسبده شده.

Tape-Css-Style

استایل شکل گیر و سایه دار

در این استایل با کشیدن ماوس برروی تصویر، تصویر به شکل دایره در میاد و اطرافش سایه دار میشه.

Morphing-Tinting-Css-Style

استایل لبه‌ی محو

استایلی که باعث محو شدن اطراف تصویر میشه رو می تونید ببینید.

Feather-Edge-Css-Style

سازگاری با مرورگرها

این استایل ها برروی مرورگرهای فایرفاکس، گوگل کروم، سافاری بدون هیچگونه مشکلی به نمایش گذاشته میشه ولی مثل اینکه اینترنت اکسپلورر باهاشون مشکل داره. بهرحال شما با خیال راحت استفاده کنید. کسایی که IE استفاده میکنن زیاد ظاهر بین نیستن 😉

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK

می‌خواهید دیدگاهتان را بیان کنید؟