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

جمعه 16 اردیبهشت 1390 09:58 ب.ظ ویرایش: جمعه 16 اردیبهشت 1390 11:30 ب.ظ

توسط: مجتبی

نوع مطلب: CSS3 ،

ارسال به

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

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

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

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

این کد html ماست :

<head >

</head>

</div>

</div>

</div>

</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

{

}

#twitter

{

}

#rss

{

}

#delicios

{

}

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

border-top-left-radius: 90px;

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

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

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

برچسب ها:css ،css 3 ،css3 ،منو شبکه های اجتماعی ،

نظرات()

طراحی فرم با jQuery

دوشنبه 12 اردیبهشت 1390 12:33 ب.ظ ویرایش: دوشنبه 12 اردیبهشت 1390 12:54 ب.ظ

توسط: مجتبی

نوع مطلب: jQuery ،

ارسال به

تو خیلی از سایتها وقتی داریم فرمی رو پر می‌کنیم برای اینکه به ما نشون بدن که کدوم فیلد رو داریم پر می‌کنیم یا به اصطلاح focus روی کدوم فیلده , وقتی وارد فیلد می‌شیم رنگ border و background فیلد رو تغییر می‌دن مثل عکسای پایین :

حالا ما برای اینکه بتونیم این کار رو انجام بدیم باید از جی‌کوئری استفاده کنیم. اینجا و اینجا درباره جی‌کوئری توضیح داده.

اول از همه باید کتابخونه‌ی جی‌کوئری رو دانلود کنیم و به صفحمون اضافه کنیم :

</head>

بعد از اینکه فرم رو طراحی کردیم (تکه ای از کد مربوط به فرم ) :

<asp:Label ID="Label1" runat="server" Text="نام کاربری : "></asp:Label>

<asp:TextBox ID="txtUserName" runat="server" ValidationGroup="ac" Width="175px"></asp:TextBox>

<asp:Label ID="Label2" runat="server" Text="کلمه عبور : "></asp:Label>

<asp:TextBox ID="txtPassWord" runat="server" TextMode="Password" ValidationGroup="ac"

Width="175px"></asp:TextBox>

شروع می‌کنیم به نوشتن دستورات جی‌کوئری . باید از دو متد focus و blur جی‌کوئری برای فهمیدن اینکه چه وقتی کاربر وارد فیلد شده و چه وقتی از اون خارج شده استفاده کنیم. برای تغییر ویژگی های فیلد هم باید از متد css جی‌کوئری استفاده کنیم.

$("#txtUserName").focus(

function() { $("#txtUserName").css("border-color", "#5bb53e")}

)

$("#txtUserName").blur(

function() { $("#txtUserName").css("border-color", "#000000") }

)

</script>

به شکل زیر توجه کنید: