iranexperts

ساختن منو برای شبکه های اجتماعی با استفاده از 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 ،منو شبکه های اجتماعی ،

نظرات()

ساخت منو متحرک با استفاده از css

پنجشنبه 15 اردیبهشت 1390 12:23 ق.ظ ویرایش: جمعه 16 اردیبهشت 1390 06:21 ب.ظ

توسط: کاظم

نوع مطلب: CSS3 ،

ارسال به

در این پست قصد داریم با استفاده از css3 یک منو متحرک بسازیم
در ابتدا باید بگم که این منو در Internet Expolor به علت پشتیبانی نکردن از transition امکان پذیر نمی باشد.

خاصیت transition باعث حرکت میشه و همچنین میشه باهاش چرخش رو هم انجام داد که در پست های آتی توضیح داده میشه
به کد زیر دقت کنید

<html>
<head >
    <title></title>

</head>
<body>
    <style>
        div
        {

            width: 100px;
            height: 35px;
            background: red;

            -moz-transition: width 2s, height 2s /* Firefox 4 */
            -webkit-transition: width 2s, height 2s; /* Safari and Chrome */
            -o-transition: width 2s, height 2s /* Opera */
        }

        div:hover
        {
            width: 100px;
            height: 50px;


        }
        td
        {
            vertical-align:text-top;
            cursor:pointer;
        }

    </style>
<table>
<tr>
<td>
<div >
        Home</div>
</td>
<td>
<div >
        About</div></td>
</tr>
</table>


</body>
</html>

که width نشان دهنده حرکت در عرض بوده که 2 ثانیه طول میکشد که البته در مثال فوق ازش استفاده ای نشده است.
و height حرکت در ارتفاع می باشد

-moz-transition: برای اجرا شدن در فایرفاکس
-webkit-transition برای کروم و سافری
-o-transition برای اپرا می باشد.

نظرات()

طراحی فرم با 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>

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

دقت کنید که به جای border-color می‌تونید از attribute های دیگه ای که تو سی‌اس‌اس هست استفاده کنید

مثلا من تو مثال از background-color هم استفاده کردم.

موفق باشید.

دریافت پروژه مثال

برچسب ها:جی کوئری ،سی اس اس ،jquery ،css ،form formatting ،design form ،فرم ،

نظرات()

Datalist

جمعه 9 اردیبهشت 1390 05:27 ب.ظ ویرایش: - -

توسط: کاظم

نوع مطلب: HTML5 ،

ارسال به

فرض کنید یه سایت فروشگاه زدید و میخواهید کاربر وقتی اسم محصول رو در حال وارد کردن هست بصورت یک لیست فیلتر کنه و توی اون قسمت نمایش بده تا جستجو برای کاربران راحتتر باشه؟ یا مثلا تو قسمتی که کاربر میخواهد نام شهر را وارد کند با زدن حرف "ت" تمام شهرهایی که دارای حرف "ت" هستند نمایش داده بشوند.

datalist چنین ویژگی رو فراهم میکنه، به مثال زیر دقت کنید.

</datalist>

ابتدا یک input تعریف شده که لیست نمایش اون از datalist مربوط به static خونده میشه، بعد datalist رو تعریف می کنیم.

ویژگی autocomplete="on" باعث میشه که اسمهایی که بیشتر انتخاب شدند اول بیاند.

در تعریف Data list نام (id) باید برابر نام list باشد که در input تعریف شده است. با option هم می توان گزینه های پیش فرض را وارد کرد.

نکته ای که در بالا گفته شد بصورت استاتیک هستش. اگه بخواهیم اطلاعات بصورت دینامیک باشه میتونیم از جی کوئری استفاده کنیم که در فایل ضمیمه نیز استفاده شده.

اگه تو بین دو تگ مطلبی رو بنویسیم در قسمت نمایش نام اون موضوع میان تگ میاد اما با انتخابش مقدار value به input داده میشه.

<option value="Kazem" >saeid</option>

مثلا اگه تو متن بالا تایپ کنیم اسم saeid نمایش داده میشه اما وقتی انتخابش کنید تو input مقدار kazem داده میشه.

دنبالک ها:فایل ضمیمه ،

نظرات()

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

ساخت منو متحرک با استفاده از css

طراحی فرم با jQuery

Datalist

iranexperts

درباره وبلاگ

آخرین پستها

نویسندگان

آمار وبلاگ

اَبر برچسبها

آرشیو موضوعی

آرشیو

پیوندها

صفحات جانبی