0592{{ تعدادی کد کاربردی CSS تعدادی کد کاربردی CSS }}

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

transition: all 400ms ease-in;

1	transition:all400msease-in;

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

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

0592{{ تعدادی کد کاربردی CSS تعدادی کد کاربردی CSS }}

تعدادی کد کاربردی CSSReviewed by برنامه نویس on Mar 14Rating: 3.5تعدادی کد کاربردی CSSتعدادی کد کاربردی CSS

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

transition: all 400ms ease-in;

1	transition:all400msease-in;

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

برای رسیدن به جواب و ادامه کدهای تکمیل تر با ما همراه باشید

.class_name a:link{
transition: all 400ms ease-in;
}

1

2

3

.class_name a:link{

transition:all400msease-in;

}

در کد بالا تعیین کردیم که وقتی موس از روی لینک ما عبور کرد تمامی تغییرات مانند عوض شدن رنگ و … به آرامی صورت گیرد . خوب حالا در کد زیر تعیین میکنیم که حالت عادی فونت لینک ما و همچنین رنگ آن چی باشه

.class_name a:link{
transition: all 400ms ease-in;
font:normal 12px tahoma;
color:#333;
}

1

2

3

4

5

.class_name a:link{

transition:all400msease-in;

font:normal12pxtahoma;

color:#333;

}

الان ما حالت عادی لینک رو درست کردیم . حالا باید تعریف کنیم که وقتی موس روی لینک قرار گرفت چی بشه . در کد زیر رنگ رو تعیین می کنیم:

.class_name a:hover{
color:#C60;
}

1

2

3

.class_name a:hover{

color:#C60;

}

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

<div class="class_name"><a href="http://www.byt3.ir">وبسایت برنامه نویسی بایت </a></div>

1	<div class="class_name"><a href="http://www.byt3.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');
}

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');

}