کد تغییر رنگ کشویی آیکون

سلام خدمت همه ی دوستان ، امروز کد تغییر رنگ کشویی آیکون های سایت رو براتون آماده کردم که با اون می تونید آیکون هایی مثل rss , facebook , yahoo, twitter , google plus رو به این شکل نمایش بدین که با رفتن موس رنگشون کشویی تغییر کنه.

کد تغییر رنگ کشویی آیکون

تغییر رنگ آیکون ها

ابتدا شما نیاز دارید تا آیکون هاتونو تهیه کنید ، ما مثلا با 3 تا آیکون رو به 2 شکل متفاوت آماده کردیم که می تونید از همین ها استفاده کنید و یا خودتون تغییرشون بدید.

social-icon social-icon-round

کد تغییر رنگ کشویی آیکون

ما 2 تا کد داریم که باید قرارشون بدیم ، یکی استایل (css) یکی هم کد html نمایش لینک.خوب حالا اول کد استایل زیر رو به انتهای شیوه نامه (style.css) قالبتون اضافه کنید.

.rss_fb_yahoo_icon a {
display: block;
width: 61px;
height: 62px;
float:right;
margin-left:5px;
margin-right:5px;
}
a {
border: 0px;
text-decoration: none;
color: #6e6e6e;
-moz-transition: all 0.1s ease-in 0.1s;
-webkit-transition: all 0.1s ease-in 0.1s;
-o-transition: all 0.1s ease-in 0.1s;
-ms-transition: all 0.1s ease-in 0.1s;
transition: all 0.1s ease-in 0.1s;
}
.rss_icon{
 overflow:hidden;
 background:url('https://doctorwp.com/wp-content/uploads/2014/01/social-icon.png') no-repeat bottom left;
}
.rss_icon:hover{
 background-position:top left;
}
.fb_icon{
 overflow:hidden;
 background:url('https://doctorwp.com/wp-content/uploads/2014/01/social-icon.png') no-repeat bottom center;
}
.fb_icon:hover{
 background-position:top center;
}
.yahoo_icon{
 overflow:visible;
 background:url('https://doctorwp.com/wp-content/uploads/2014/01/social-icon.png') no-repeat bottom right;
}
.yahoo_icon:hover{
 background-position:top right;
}

.rss_icon_round{
 overflow:hidden;
 background:url('https://doctorwp.com/wp-content/uploads/2014/01/social-icon-round.png') no-repeat bottom left;
}
.rss_icon_round:hover{
 background-position:top left;
}
.fb_icon_round{
 overflow:hidden;
 background:url('https://doctorwp.com/wp-content/uploads/2014/01/social-icon-round.png') no-repeat bottom center;
}
.fb_icon_round:hover{
 background-position:top center;
}
.yahoo_icon_round{
 overflow:visible;
 background:url('https://doctorwp.com/wp-content/uploads/2014/01/social-icon-round.png') no-repeat bottom right;
}
.yahoo_icon_round:hover{
 background-position:top right;
}

همونطور که دقت کردید ، 2 مدل عکس مربعی و گرد داخل کدها قرار دادیم.حالا می رسیم به کدهای html که باید قرار بدید.ما برای نمونه 6 تا از این آیکون ها رو به هر 2 صورت گرد و مربعی کنار هم قرار دادیم ، به این شکل …

<div class="rss_fb_yahoo_icon">
 <a href="https://doctorwp.com/feed" target="_blank" class="rss_icon"></a>
 <a href="http://www.facebook.com/pages/picorir/447849195255223" target="_blank" class="fb_icon"></a>
 <a href="#" class="yahoo_icon"></a>
 <a href="https://doctorwp.com/feed" target="_blank" class="rss_icon_round"></a>
 <a href="http://www.facebook.com/pages/picorir/447849195255223" target="_blank" class="fb_icon_round"></a>
 <a href="#" class="yahoo_icon_round"></a>
</div>

داخل این کدها لینک خودمون هستش ، شما خودتون ویرایشش می کنید دیگه.ممکن هستش براتون سوال پیش بیاد که اگر تعداد آیکون ها مون فرق داشت چی ؟ یا خواستیم یه آیکون دیگه مثل توئیتر قرار بدیم باید چکار کنیم ؟

خدمتتون عرض شود که ، ما برای حل این موضوع 2 مدل آیکون درست کردیم و کدهای نمایش 6 تا از اون ها رو کنار هم مثال زدیم تا دستتون بیاد که چکار کنید ، دیگه بقیش یکم با خودتون … !

پیش نمایش و دانلود کد تغییر رنگ آیکون

لینک دانلود

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

امیدوارم که بدردتون بخوره ، یا حق

9 نظرات
  1. لاله می گوید

    ممنون چطور میتونم عضو سایتتون بشم ؟؟ اگه دوست دارید بهم در وبم بگید .

    آخه من کدنویسی و برنامه نویسی فوق حرفه ای خوندم و این رشته ی منه میتونم بهتون کمک کنم.

    1. آرش حیدری می گوید

      سلام
      از طریق تماس با ما اعلام کنید
      تشکر

  2. رضا می گوید

    من از رزبلاگ استفاده میکنم.style.css فقط توی وردپرس هست یا در رزبلاگ هم میشه تغییرش داد؟

    1. لاله می گوید

      سلام رضا جان .

      بهتره سیستم وبلاگدهی ات قدیمی تر و پیشرفته تر باشه مثل بلاگفا و میهن بلاگ .

  3. sanaz می گوید

    سلام ممنون از مطلب بسیار خوبتون
    ممنون میشم طریقه استفاده از css3 رو در asp.net ورژن 2010 بگید .

    1. آرش حیدری می گوید

      سلام
      راستش من asp کار نکردم و اطلاع زیادی ندارم ، بهتر هستش از سایت های تخصصی روی این موضوع سوال کنید
      با تشکر…

  4. مدیر اندرویدسرا می گوید

    درود بر شما
    بسیار سپاسگذارم از شما بابت مطلب آموزشی خوبی گه قرار دادید.
    یه سوال داشتم
    مجموعه آیکون های آماده برای این کار ندارید؟

    1. آرش حیدری می گوید

      سلام
      داخل آرشیو آیکون خودمون یک چیزایی هست که می تونید استفاده کنید
      http://doctorwp.com/category/graphic/%D8%A2%DB%8C%DA%A9%D9%88%D9%86

  5. پریا می گوید

    ممنون از مطلب خوبتون ، جالب بود.

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.