افکت های حرکتی css برای عکس

بعد از یه مدت تصمیم گرفتم یه سری افکت های CSS جدید براتون بزارم که بتونید روی عکس های سایت خودتون اعمال کنید تا خوشکل تر بشن 😀 پیش نمایش این افکت های CSS رو میتونید از اینجا (کلیک کنید) و از اینجا (کلیک کنید) ببینید. (دونوع افکت متفاوت هست برای همین دوبار نوشتم 😀 ) همچنین میتونید این افکت ها رو به صورت یک فایل از انتهای همین پست دانلود کنید و استفاده کنید.

این افکت های حرکتی با استفاده از دستورات tranfrom در CSS ایجاد شده اند , برای استفاده از این افکت ها باید ساختاری مثل زیر ایجاد کنید:

و سپس کلاس های css افکت مورد نظر خودمون رو به تگ figure میدیم به صورت زیر :

دوستان عزیز نام کلاس css افکت رو بالای هر افکت نوشتم , همچنین افکت های گروه اول درون پوشه ی css و درون فایل set-1.css قرار داره , افکت های گروه دوم در پوشه ی css و در فایل set-2.css قرار داره. همچنین اگه میخواید که تگ های شما توسط مرورگر های قدیمی تر نیز ساپورت بشه و نمایش داده بشه بهتره که فایل html5shiv.js که درون پوشه ی js قرار داره رو نیز به صفحه خودتون اظافه کنید 😀

امیدوارم این افکت های CSS بدردتون بخوره و توی پروژه های خودتون افکت های css را روی عکس هایی که دارید اعمال کنید. دوستانی که سوال دارند میتونن از بخش نظرات بپرسند. همچنین میتونید فایل این افکت ها رو از انتهای همین پست دانلود و استفاده کنید.

افکت های حرکتی css برای عکس
افکت های حرکتی css برای عکس
HoverEffectIdeas_tarhche.zip
Version: 1.01
1.1 MiB
153 Downloads
اطلاعات بیشتر
به اشتراک بگذارید: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
  1. سلام
    چرا روی دکمه های داخل صفحه اعمال نمیشه ؟
    فایلها رو اضافه میکنم فقط سایه روی دکمه های صفحه اعمال میشه دکمه هام هم از نوعButton هستن داخل asp دارم کد نویسی میکنم

    • سلام از سورس صفحه خودتون بعد از اینکه برنامه رو با ویژوال ایستادیو اجزا میکنید پیش نمایش بگیرید (توی مرورگر دکمه های cntrl+u بزنید) چک کنید باید برای افکت های حرکتی class مورد نظر رو به button داده باشید. اگه توی سورس کدی که میبینید کلاس اعمال شده باشه باید نمایش داده بشه.

  2. محمد

    سلام.
    چطور میشه افکت ها رو روی همه عکسای سایت اعمال کرد.
    یا حداقل عکسای توی پست.

    • سلام دوست عزیز! کافیه که فایل css رو به صفحه اظافه کنید و ساختاری مثل ساختار HTML داده شده برای عکس های خودتون به وجود بیارید

      • محمد

        سلام. ممنون.
        بله. اونطور ک تو متن توضیح دادین رو متوجه شدم. اما میخوام یکی از این افکت ها رو انتخاب کنم و اون روی همه عکسهای سایت اعمال بشه بدون اینکه تک div رو تو کد نویسی اعمال کنیم. تگ h2 و p و… رو هم احتیاج ندارم.فقط افکت.

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

        img {
        -webkit-transition: opacity 0.35s, -webkit-transform .35s;
        transition: opacity 0.35s, transform .35s;
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
        }

        img:hover {
        opacity: 1.2;
        -webkit-transform: scale3d(1.05,05.1,1.05);
        transform: scale3d(1.05,1.05,1.05);
        }

        افکت APOLLO رو چطور میشه تغییر داد ک توی css سفارشی روی همه عکسا اعمال بشه.

        • شما قبل از اینکه بیاید و افکت رو بخواید روی همه ی عکس های سایت اعمال کنید باید یه ساختار html برای استفاده از افکت ایجاد کنید و عکس رو داخل اون ساختار بزارید! همون موقع که ساختار رو ایجاد میکنید کلاس ها (class) و ایدی هایی (id) که داخل ساختار افکت هست رو بزارید و در اخر فقط فایل css افکت رو به صفحه اظافه کنید! ولی اینطور که من متوجه شدم شما نمیخواید class و id ها رو اظافه کنید! در این صورت شما باید با توجه به کلاس و id های والد (یعنی همون تگی که این ساختار توش قرار داره) استفاده کنید و افکت رو اعمال کنید! امیدوارم متوجه شده باشید!

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