مرجع دانلود اسکریپت

وان اسکریپت | اولین مرجع دانلود رایگان اسکریپت در ایران

خرید هاست
تبلیغات
تبلیغات

درخواست شما

اگـر به دنبال قالب و اسکریپت یا هر مطلب دیگری هستید و آن را پیدا نکرده اید ، می توانید درخواست خود را به تیم وان اسـکریپت ارسال کنید تا در کوتاه ترین زمان مطلب مورد نظر شما در سایت قـرار گیرد ! وان اسـکریپت همچنان به دنبال ارائه خدمــاتی با کیفیت بالا به کاربران خود می باشد.

تعدادی کد کاربردی در CSS

css_logo

css_logo

در این پست تعدادی کد کاربردی css قرار دادم که توسط اونا قادر خواهید بود وب سایت خود را خیلی زیباتر کنید .

 

کد اول : شاید در بسیاری از وب سایت ها دیده باشید که وقتی بر روی یک لینک میروید رنگ ان به آرامی به رنگ دیگری تغییر میکند . شما هم میتونید خیلی ساده این ترفند رو بر روی وبسایت خود اعمال کنید . کد زیر این کار رو انجام میده .

[CSS]
transition: all 400ms ease-in;
[/CSS]

الان احتمالا این سوال براتون پیش اومده که این کد رو کجا و چطوری استفاده کنیم . خیلی سادست ، کافیه که یک کلاس به شکل زیر در استایل خود ایجاد کنید و کد رو داخلش قرار بدید .

[CSS]
.class_name a:link{
transition: all 400ms ease-in;
}
[/CSS]

در کد بالا تعیین کردیم که وقتی موس از روی لینک ما عبور کرد تمامی تغییرات مانند عوض شدن رنگ و … به آرامی صورت گیرد . خوب حالا در کد زیر تعیین میکنیم که حالت عادی فونت لینک ما و همچنین رنگ آن چی باشه .
[CSS]
.class_name a:link{
transition: all 400ms ease-in;
font:normal 12px tahoma;
color:#333;
}
[/CSS]

الان ما حالت عادی لینک رو درست کردیم . حالا باید تعریف کنیم که وقتی موس روی لینک قرار گرفت چی بشه . در کد زیر رنگ رو تعیین می کنیم .
[CSS]
.class_name a:hover{
color:#C60;
}
[/CSS]

خوب دیگه css تموم شد ، الان باید بریم سر html . باید ابتدا یک div بسازید و class اون رو همون اسمی که توی استایل قرار دادید بزارید و یک لینک داخلش قرار بدید . به کد زیر دقت کنید .
[HTML]

[/HTML]

 


کد دوم : نحوه بارگذاری فونت توسط css در وبسایت شما . کاربرد این کار اینه که اگر شما در وب سایتتون مثلا از فونت یکان استفاده کنید و اون فونت رو روی وب سایت خودتون لود کنید ، سایت شما بر روی کامپیوتر هایی که بر روی آنها فونت یکان نصب نشده است ، به خوبی بالا خواهد آمد و فونت ها نمایش داده خواهند شد و در نتیجه استایل سایت شما به هم نمی خورد . برای این کار کافیه فونت های خودتون رو توی یک پوشه بریزید و از طریق کد css زیر ، اونارو لود کنید .
[CSS]
@font-face {
font-family: ‘yekan’;
src: url(‘fonts/BYekan.eot?#’) format(‘eot’),
url(‘fonts/BYekan.woff’) format(‘woff’),
url(‘fonts/BYekan.ttf’) format(‘truetype’);
}
[/CSS]

 

 

این مطلب به زودی تکمیلتر خواهد شد ….

نوشته شده در دسامبر 26, 2012 / 8,341 نمایش / کد مطلب : 4342

2 دیدگاه در “تعدادی کد کاربردی در CSS”

  1. سلام عالیه من دنبال همچین کد هایی هستم
    اگه میشه بازم بزارید یا اگه منبع دارید میشه بگید استفاده کنم

  2. میگم کد اولی که گذاشتین
    میشه این قابلیت رو هم بگین یا اضافه کنید
    که وقتی hover هست و موس از روش برداشته میشه به حالت عادی برمیگرده رنگش دوباره به ارومی برگرده یه دفعه به حالت اول بر نگرده

دیدگاه خود را به اشتراک بگذارید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

+ 74 = 76