در این پست تعدادی کد کاربردی css قرار دادم که توسط اونا قادر خواهید بود وب سایت خود را خیلی زیباتر کنید .
کد اول : شاید در بسیاری از وب سایت ها دیده باشید که وقتی بر روی یک لینک میروید رنگ ان به آرامی به رنگ دیگری تغییر میکند . شما هم میتونید خیلی ساده این ترفند رو بر روی وبسایت خود اعمال کنید . کد زیر این کار رو انجام میده .
transition: all 400ms ease-in;
***
الان احتمالا این سوال براتون پیش اومده که این کد رو کجا و چطوری استفاده کنیم . خیلی سادست ، کافیه که یک کلاس به شکل زیر در استایل خود ایجاد کنید و کد رو داخلش قرار بدید .
.class_name a:link{
transition: all 400ms ease-in;
}
***
در کد بالا تعیین کردیم که وقتی موس از روی لینک ما عبور کرد تمامی تغییرات مانند عوض شدن رنگ و … به آرامی صورت گیرد . خوب حالا در کد زیر تعیین میکنیم که حالت عادی فونت لینک ما و همچنین رنگ آن چی باشه .
.class_name a:link{
transition: all 400ms ease-in;
font:normal 12px tahoma;
color:#333;
}
***
الان ما حالت عادی لینک رو درست کردیم . حالا باید تعریف کنیم که وقتی موس روی لینک قرار گرفت چی بشه . در کد زیر رنگ رو تعیین می کنیم
.class_name a:hover{
color:#C60;
}
***
خوب دیگه css تموم شد ، الان باید بریم سر html . باید ابتدا یک div بسازید و class اون رو همون اسمی که توی استایل قرار دادید بزارید و یک لینک داخلش قرار بدید . به کد زیر دقت کنید .
<div><a href=”http://www.melliscript.ir”>melliscript.ir</a></div>
***
کد دوم : نحوه بارگذاری فونت توسط 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’);
}
سیستم مدیریت محتوای آپادانا نگارش ۱٫۰