تبلیغات
iranexperts - مطالب ابر css 3

ساختن منو برای شبکه های اجتماعی با استفاده از css3

جمعه 16 اردیبهشت 1390  09:58 ب.ظ    ویرایش: جمعه 16 اردیبهشت 1390 11:30 ب.ظ
توسط: مجتبی
نوع مطلب: CSS3 ،
ارسال به

ساختن منو برای شبکه های اجتماعی

 

تو پست قبلی کاظم با درست کردن یه منو بهمون یاد داد که تغییراتی که رو div  اعمال میشن رو میشه با دستور transition  به صورت انیمیشن نشون داد.

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


دستوری که باهاش سروکار داریم  radius هستش. با این دستور میتونیم شعاع گوشه های div  رو گرد شده یا به اصطلاح rounded  نمایش بدیم.

این کد html  ماست :

<html xmlns="http://www.w3.org/1999/xhtml">

<head >

    <link href="Site.css" rel="stylesheet" type="text/css" />

    <title></title>

</head>

<body style="background-color:Gray;">

    <form id="form1">

    <div id="facebook">

     </div>

    <div id="twitter">

       </div>

    <div id="rss">

    </div>

 <div id="delicios">

    </div>

    </form>

</body>

</html>

 


اینم کد css  :


div

{

       float: right;

       width: 64px;

       height: 64px;

       margin: 2px;

-moz-transition:  0.3s;  

       border-top-left-radius: 90px;

}

div:hover

{

       border-top-left-radius: 10px;

       cursor:pointer;

}

#facebook

{

       background-image: url(/Images/f.png);

}

#twitter

{

       background-image: url(/Images/t.png);

}

#rss

{

       background-image: url(/Images/r.png);

}

#delicios

{

       background-image: url(/Images/d.png);

}


فقط باید درباره کد زیر توضیح داده بشه

border-top-left-radius: 90px;

این به این معنی هست که شعاع گوشه‌ی بالا – چپ رو به اندازه 90 پیکسل گرد کن

عددی که به این خصوصیت نسبت داده میشه باید بین صفر تا 90 باشه




دانلود فایل مثال

   


نظرات()   

iranexperts

آموزش جی کوئری ، html5 و CSS3

POWERED BY MIHANBLOG.COM

Design by Renato Mitra at http://Mitra.ch