PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : آموزش افکت دادن به لینک ها با Css



iranianwp
2012/09/17, 09:37 PM
در این مطلب به شما آموزش خواهیم داد که چگونه به یک متن افکت بدهید.

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



در لینک زیر نیز میتونید دمو رو ببینید

دمو (http://jsfiddle.net/mspsoft/ad25V/2/)

کد css


.border{
background-color:#C96 ;
box-shadow : 0px 0px 5px #b0b0b0 ;
height :150px;
padding : 5px;
margin: 40px auto;
float : right;
width : 1024;
padding-top : 17px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius : 10px;
}
#border-link {
display:table;
width : 150px;
height : 200px;
text-align : right;
border-radius:10px 10px;
margin-top:10px;
direction:rtl;
padding:5px;
float:right;
}
#border-link a {
-webkit-transition : all 0.5s ease-in-out;-moz-transition : all 0.5s ease-in-out;-o-transition : all 0.5s ease-in-out;
display:block;
margin-top :10px;
padding : 5px;
font-size : 10px;
color : #000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius : 3px;
text-shadow:none;
text-decoration:none;
font-size:14px;
}
#border-link a:hover {
background : green;
color:#fff;
text-decoration:none;
box-shadow: 1.5px 1.5px 5px #282828 inset;
border-radius:5px;
}

کد html


<div class="border">
<div id="border-link">
<a href="http://www.mspsoft.com/" target="_blank">M.S.P Soft</a>
<a href="http://www.mspsoft.com/" target="_blank">M.S.P Soft</a>
<a href="http://www.mspsoft.com/" target="_blank">M.S.P Soft</a>
</div>
</div>

jcs.w
2012/09/17, 09:49 PM
تایید شد ..

iranianwp
2012/09/17, 09:54 PM
تایید شد ..

دیروز منظورم این بود استاد