به کانال تلگرام ما بپیوندید
@Codenvis

کدنویس|قالب وردپرس|افزونه وردپرس

کد افکت عکس حرفه‌ای شماره ۱ – کد هاور عکس

سلام خدمت دوستاران کدنویسی! در این مطلب کد افکت عکس های زیادی رو بهتون معرفی میکنم و در اختیارتون قرار میدم تا ازش به خوبی استفاده کنید!

وقتی که دیدم طراحی‌ها به یک شکل در آمده و از حالت حرفه‌ای خارج شده تصمیم گرفتم که کد افکت عکس رو براتون قرار بدم تا با استفاده از اون افکت هاور زیبایی به تصاویر سایتتون بدهید!

کد افکت عکس بیشتر برای کسانی کارایی داره که مشغول طراحی قالب از هستند اما شما اگر کمی با Html آشنا باشید باشید میتونید در هر کجای قالبتون که میخواید استفاده کنید.

و خدمت شما کاربران عزیز بگم که این شماره گذاری ها بیشتر برای اینه که بنده میخوام تعداد بالایی کد افکت عکس مثل کد افکت عکس شماره ۱ براتون منتشر کنم و دایره انتخابی شما رو گسترش بدم!

البته این به این معنی نیستش که بنده فقط کد افکت عکس براتون قرار میدم بلکه در آینده در نظر داریم کدنویس به بانک کد طراحان ایرانی تبدیل بشه!

خب میریم سراغ توضیحات کد افکت عکس شماره ۱ که باید نکاتی رو خدمتتون عرض کنم

کد افکت عکس شماره ۱

کد افکت عکس شماره 1
کد افکت عکس شماره ۱

کد افکت عکس شماره ۱ دارای ۶ عدد رنگ متفاوت و تعداد زیادی آیکون هستش که طرز استفاده از اون بسیار ساده هستش که باید با توجه به توضیحات آن را تغییر بدهید.

این کد توسط ما بهینه شده و تا جای ممکن چیز‌های اضافی جذف شده و ما سعی کردیم که فایل زیادی روی سایت شما بارگذاری نشه تا سرعت بارگذاری شما افزایش پیدا کنه.

برای نمایش سالم کد افکت عکس شماره ۱ در سایتتون باید اول استایل مورد نظر رو درون قالبتون قرار بدهید! برای این کار کد زیر رو در قسمت head قالب درست قبل از head/ قرار بدهید

<link href="http://dl.codenvis.ir/coding/Image-Hover-1/style.css" type="text/css" rel="stylesheet">

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


<figure class="CodeNvis-snip1146">
  <img src="http://dl.codenvis.ir/coding/Image-Hover-1/Codenvis-image-hover.jpg" alt="sq-sample2" />
  <span><i class="ion-code-working"></i>کـــدنویس</span>
  <a href="#"></a>
</figure>


<figure class="CodeNvis-snip1146 navy">
  <img src="http://dl.codenvis.ir/coding/Image-Hover-1/comparing-iphone-5s-with-iphone-5-picjumbo-com.jpg" alt="sq-sample4" />
  <span><i class="ion-ios-refresh-empty"></i>گوشی هوشمند</span>
  <a href="#"></a>
</figure>


<figure class="CodeNvis-snip1146 red">
  <img src="http://dl.codenvis.ir/coding/Image-Hover-1/error-in-php-wordpress-code-picjumbo-com.jpg" alt="sq-sample3" />
  <span><i class="ion-ios-star-outline"></i>کدنویسی حرفه‌ای</span>
  <a href="#"></a>
</figure>

خب حالا سراغ شخصی سازی کد میریم تا بهتون بگم چطور میتونید کد رو تغییر بدید و رنگ و آیکون دلخواهتون رو روی تصاویر قرار بدهید.

برای تعویض تصاویر باید لینک عکس جلو src رو تغییر بدهید که اگر از قبل Html بلد باشید این کار براتون خیلی آسون هستش!

برای تغییر آیکون هم قبل از متن دکمه روی عکس تگ i وجود دارد که در class اون باید اسم آیکونتون رو بنویسید ، همچنین برای پیدا کردن اسم آیکون مورد نظرتون باید به سایت زیر بروید و پس از انتخاب آیکون روی آن کلیک کنید و اسم اون رو جاییگزین اسم داخل class بکنید

برای انتخاب آیکون کلیک کنید

همچنین برای تغییر رنگ پس زمینه پس از کلمه CodeNvis-snip1146 به دنبال اسم رنگ باشید و اون رو طبق لیست زیر تغییر بدهید

  • بدون اسم = مشکی
  • red = قرمز
  • blue = آبی
  • navy = سرمه‌ای
  • yellow = زرد
  • green = سبز
  • orange = نارنجی

با تغییر چیزهایی که در بالا گفتیم میتوانید کد افکت عکس شماره ۱ رو تغییر بدهید و به شکل دلخواهتون در بیاورید ، و اگر به مشکلی در حین تغییرات خوردید فقط در همین مطلب در بخش نظرات مشکلتون رو اعلام کنید تا با سرعت بیشتری بهش رسیدگی بشود.

برای مشاهده پیشنمایش کد افکت عکس شماره یک از دکمه زیر استفاده کنید

پیش نمایش کد شماره ۱

از این پس با سر زدن به این مطلب میتوانید جدیدترین کد افکت عکس رو مشاهده کنید و پس از انتخاب افکت کد اون رو دریافت کنید ، و اگر میخواهید از آخرین کد افکت عکس که قرار داده میشود با خبر شوید میتوانید در کانال تلگرام کدنویس عضو شوید و از تمام اخبار به سرعت با خبر شوید

امیدوارم که از کد افکت عکس در طراحی‌های حرفه‌ای استفاده کنید و ظاهری زیبا برای قالب و یا صفحاتی که میسازید داشته باشید ، اگر میخواهید از آخرین اخبار تکنولوژی با خبر شوید میتوانید با عضویت در کانال ما در تلگرام ، بیسفون و یا سروش ، و با پیوستن به صفحه اینستاگرام ما از آن برخوردار شوید

یا علی♥

حسین

حسین هستم مدیر و مؤسس سایت کدنویس ، دانشجوی رشته نرم افزار ، مسلط به Html،Css،Jquery،Php،Bootstrap،Wordpress و ...
امیدوارم بتونم کمکی به وبمستران بی‌شمار و عزیز ایرانی بکنم ♥

نظر بدهید

ما را دنبال کنید

لطفا کدنویس را در شبکه های اجتماعی دنبال کنید تا از مطالب ویژه برخوردار بشید!!!

لطفا ما را در گوگل محبوب کنید ♥