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

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

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

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

social-icon social-icon-round

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

ما ۲ تا کد داریم که باید قرارشون بدیم ، یکی استایل (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('http://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('http://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('http://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('http://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('http://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('http://doctorwp.com/wp-content/uploads/2014/01/social-icon-round.png') no-repeat bottom right;
}
.yahoo_icon_round:hover{
 background-position:top right;
}

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


<div class="rss_fb_yahoo_icon">
 <a href="http://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="http://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>

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

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

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

لینک دانلود

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

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

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 1 رای
Loading...