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 ، ،
برچسب‌ها:
701 - سایتهای ارئه دهنده نرم افزار app اندروید برای فروش ایرانی 700-روش حذف کردن اکانت و حساب تلگرام با کامپیوتر – Delete Telegram 699 - آموزش نصب همزمان چند تلگرام روی کامپیوتر 698- نصب همزمان 29 بیست و نه تلگرام رنگا رنگ بر روی یک گوشی بدون نیاز به روت 697 - ساخت آیکن بدون استفاده از نرم افزار جانبی 696 - نصب همزمان 7 هفت اینستاگرام در یک گوشی 695 {{ آموزش فریم ورک FuelPHP برای اولین بار به زبان فارسی }} 694 {{ اموزش نصب ابزار PHP در Visual Studio }} 693 {{ فیلم آموزش کامل و جامع سیستم مدیریت محتوای دیتالایف }} 692 {{ چگون یک سایت رایگان راه اندازی نمائیم }} 691 {{ تفاوت بانک اطلاعاتی مبتنی بر SQL با NOSQL و NEWSQL }} 690{{ آموزش بانک اطلاعاتی cassandra }} 689{{ آموزش بانک اطلاعاتی گراف دیتابیس(لینک اصلاح شد) }} 688{{ آموزش بانک اطلاعاتی MongoDB(لینک اصلاح شد) }} 687 {{ آموزش بانک اطلاعاتی neo4j (SQL }} 686 {{ دانلود فیلم آموزش بانک اطلاعاتی spanner }} 685 {{ دانلود فیلم اموزش شناخت مبنا ها و عملیات ریاضی در مبناهای مختلف }} 0684{{ آموزش تخصصی فارسی کردن منوهای گوشی های اندروید بدون نیاز به روت }} 0683{{ آموزش برنامه نویسی اندروید AndroidC }} 0682{{ دانلود کتاب های دوره های بین المللی طراحی وب سایت }} 
خبرنامه وب سایت:
آمار
وب سایت:
