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

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

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

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

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

ما 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 تا از اون ها رو کنار هم مثال زدیم تا دستتون بیاد که چکار کنید ، دیگه بقیش یکم با خودتون … !

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

لینک دانلود

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

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