0592{{ تعدادی کد کاربردی CSS تعدادی کد کاربردی CSS }}
در این پست تعدادی کد کاربردی css قرار دادم که توسط اونا قادر خواهید بود وب سایت خود را خیلی زیباتر کنید .
کد اول : شاید در بسیاری از وب سایت ها دیده باشید که وقتی بر روی یک لینک میروید رنگ ان به آرامی به رنگ دیگری تغییر میکند . شما هم میتونید خیلی ساده این ترفند رو بر روی وبسایت خود اعمال کنید . کد زیر این کار رو انجام میده
1
|
transition:all400msease-in;
|
الان احتمالا این سوال براتون پیش اومده که این کد رو کجا و چطوری استفاده کنیم . خیلی سادست ، کافیه که یک کلاس به شکل زیر در استایل خود ایجاد کنید و کد رو داخلش قرار بدید
برای رسیدن به جواب و ادامه کدهای تکمیل تر با ما همراه باشید
1
2
3
|
.class_name a:link{
transition:all400msease-in;
}
|
در کد بالا تعیین کردیم که وقتی موس از روی لینک ما عبور کرد تمامی تغییرات مانند عوض شدن رنگ و … به آرامی صورت گیرد . خوب حالا در کد زیر تعیین میکنیم که حالت عادی فونت لینک ما و همچنین رنگ آن چی باشه
1
2
3
4
5
|
.class_name a:link{
transition:all400msease-in;
font:normal12pxtahoma;
color:#333;
}
|
الان ما حالت عادی لینک رو درست کردیم . حالا باید تعریف کنیم که وقتی موس روی لینک قرار گرفت چی بشه . در کد زیر رنگ رو تعیین می کنیم:
1
2
3
|
.class_name a:hover{
color:#C60;
}
|
خوب دیگه css تموم شد ، الان باید بریم سر html . باید ابتدا یک div بسازید و class اون رو همون اسمی که توی استایل قرار دادید بزارید و یک لینک داخلش قرار بدید . به کد زیر دقت کنید :
1
|
<div class="class_name"><a href="http://www.byt3.ir">وبسایت برنامه نویسی بایت </a></div>
|
کد دوم : نحوه بارگذاری فونت توسط css در وبسایت شما . کاربرد این کار اینه که اگر شما در وب سایتتون مثلا از فونت یکان استفاده کنید و اون فونت رو روی وب سایت خودتون لود کنید ، سایت شما بر روی کامپیوتر هایی که بر روی آنها فونت یکان نصب نشده است ، به خوبی بالا خواهد آمد و فونت ها نمایش داده خواهند شد و در نتیجه استایل سایت شما به هم نمی خورد . برای این کار کافیه فونت های خودتون رو توی یک پوشه بریزید و از طریق کد css زیر ، اونارو لود کنید .:
1
2
3
4
5
6
|
@font-face {
font-family: 'yekan';
src:url('fonts/BYekan.eot?#')format('eot'),
url('fonts/BYekan.woff')format('woff'),
url('fonts/BYekan.ttf')format('truetype');
}
|
بدرود منبع:وان اسکریپت


نظرات شما عزیزان:
موضوعات مرتبط: 82- سورس ها و پروژه های برتر ، 94- طراحی سایت ، 100- آموزش CSS ، 101- آموزش CSS3 ، 102- آموزش HTML ، 103- آموزش HTML5 ، ،
برچسبها:



















