آموزش ساخت باکس زیبا با CSS

با سلام خدمت دوستان عزیز

در این پست از یک لرن برای شما آموزش ساخت باکس زیبا با CSS را اماده کرده ایم . باکس یا جعبه ای که با هم طراحی خواهیم کرد در صفحات وب شما میتواند نقش مهمی را ایفا کند

این آموزش نیز مانند آموزش های دیگر به صوت کامل با توضیحات خواهد بود

برای مشاهده آموزش به ادامه مطلب مراجعه کنید …

قبل از اینکه آموزش را شروع کنیم باید خروجی کار را به شما نشان دهیم . تصویری که در زیر میبینید خروجی کار ما است که میخواهیم آن را طراحی کنیم .

لطفا یک سند باز کنید و هم زمان با آموزش خودتان کدها را بنویسید و تغییرات را مشاهده کنید.

آموزش ساخت باکس زیبا با CSS

ابتدا باید کدهای html مربوط به این باکس را بنویسیم

	<div class="box-1learn">
    	یک لرن دات آی آر
    </div>
    

بخش کد های html به پایان رسید در کد بالا یک div با کلاس box-1learn تعریف کردیم و متنی را داخل آن نوشتیم و با همین کلاس در css آن را فراخوانی و استایل دهی خواهیم کرد.

warning شما میتوانید نام کلاس را هر آنچه که دوست دارید انتخاب کنید

warning نام کلاس ها در CSS نمیتواند با عدد شروع شود

هم اکنون کلاسی که در بخش قبل آن را انتخاب کردیم (box-1learn) را مینویسیم و چون کلاس هست باید در ابتدای آن ” . ” قرار دهیم.

<style>
	.box-1learn{

	}
</style>

برخی ویژگی ها را به این کلاس اضافه میکنیم که در پایین توضیح خواهیم داد

<style>
	.box-1learn{
		direction:rtl;
		background: #ff0030;
		color: #fff;
		font-family:"b yekan",tahoma;
		font-size:21px;
		font-weight:normal;
	}
</style>

توضیحات کد بالا :

1- در خط 3 گفتیم که طراحی ما از راست به چپ قرار بگیرد اگر خواستید طراحی از چپ به راست قرار گیرد مقدار ltr به جای rtl استفاده کنید

2- در خط 4 یک رنگ پشت زمینه برای متن خود انتخاب کردیم که در اینجا ما از رنگ #ff0030 استفاده کردیم شما میتوانید از رنگ دلخواه خود استفاده کنید

3- در خط 5 رنگ متن را به سفید تغییر دادیم

4- در خط 6 فونت را مشخص کردیم . اما چرا دو فونت نوشتیم ؟ دلیل این است که اگر شخصی در سیستم خود فونت بی یکان را نداشت مرورگر به صورت خودکار فونت این باکس را به تاهوما تغییر خواهد داد

5- در خط 7 سایز متن را مشخص کردیم

6- در خط 8 هم استایل متن را روی نرمال گذاشتیم اگر خواستید متن پر رنگ شود میتوانید به جای نرمال کلمه bold را بنویسید

خب حالا برخی دیگر از استایل ها را به کد خود اضافه میکنیم

<style>
	.box-1learn{
		direction:rtl;
		background: #ff0030;
		color: #fff;
		font-family:"b yekan",tahoma;
		font-size:21px;
		font-weight:normal;
		padding: 20px;
		margin: 10px;
		border: 2px dashed #fff;
		border-radius: 10px;
		line-height: 30px;
	}
</style>

در قسمت بالا توضیحات مربوط به خط 3 تا 8 را گفتیم
1- در خط 9 گفتیم که متن از طرفین 20 پیکسل فاصله داشته باشد ( فاصله داخلی )
2- در خط 10 گفتیم که باکس از طرفین 10 پیکسل فاصله داشته باشد ( فاصله خارجی )
3-در خط 11 یک کادر با ضخامت 2 پیکسل و با حالت خط چین و رنگ سفید ایجاد کردیم که شما میتوانید آن ها را به دلخواه تغییر دهید
4- در خط 12 میزان نرم شدگی گوشه ها را مشخص کردیم
5- در خط 13 ارتفاع هر خط را مشخص کردیم . برای اینکه بفهمید ارتفاع هر خط چگونه تعیین میشود نوشته ها را زیاد کنید به طوریکه بیشتر از 2 خط باشد سپس خواهید فهمید که ارتفاع هر خط چگونه است .

و اما یک استایل باقی مانده است که هم اکنون آن را در خط 14 میتوانید ببینید

<style>
	.box-1learn{
		direction:rtl;
		background: #ff0030;
		color: #fff;
		font-family:"b yekan",tahoma;
		font-size:21px;
		font-weight:normal;
		padding: 20px;
		margin: 10px;
		border: 2px dashed #fff;
		border-radius: 10px;
		line-height: 30px;
		box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
	}
</style>

استایلی که در خط 14 اضافه کردیم مربوط به سایه باکس ما است
همانطور که مشاهده میکنید ما دو سایه تعریف کردیم که اولین سایه مقدار زیر میباشد

0 0 0 4px #ff0030

و دومین سایه :

2px 1px 6px 4px rgba(10, 10, 0, 0.5)

در اولین سایه مقدار ” صفر” اول سایه عمودی و ” صفر ” دوم مقدار سایه افقی میباشد و ” صفر ” سوم میزان شفافیت سایه را مشخص میکند و در صورتی که میخواهید سایز سایه را مشخص کنید باید مقدار چهارمی تعریف کنید که ما از این قابلیت استفاده کردیم و مقدار چهارم برای تعیین سایز سایه خود انتخاب کردیم و مقدار #ff0030 رنگ سایه میباشد

و سایه دوم نیز به همین صورت میباشد فقط با این تفاوت که رنگ سایه را با مقدار rgba مشخص کردیم .

فرادرس

برچسب ها : ، ، ، ، ، ، ،