آموزش ساخت باكس ساده با CSS

سلام به شما عزيزان

امروز آموزش ساخت باكس ساده با CSS را در يك لرن خواهيد ديد.در اين آموزش ما به ساخت باكس مي پردازيم كه بسيار اسان و راحت براي شما در نظر گرفته شده است.

برای ادامه ي توضيحات به همراه ما باشید …

آموزش ساخت باكس ساده با CSS

تصویر زیر که مشاهده میکنید پیش نمایش طراحی ما میباشد که شما پس از مشاهده این آموزش میتوانید باکسی مانند باکس زیر ایجاد کنید

http://dl.1learn.ir/mmahdi1/Other/Box-easy.png

1- ابتدا یک سند ایجاد کنید و هم زمان با آموزش خودتان کدها را بنویسید و تغییرات را مشاهده کنید.

2- یک تگ Div با کلاس box ایجاد میکنیم و متن دلخواه خود را داخل آن مینویسیم

<div class="box">
www.1learn.ir
</div>

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

3- حال در بخش CSS تگ div خود را با کلاس box فراخوانی میکنیم تا استایل دهی کنیم

<style>
.box  {

      }

</style>

4- شما عزيزان كد نويس ميتوانيد برخي از ويژگي هايي كه لازم داريد را به اين كد اضافه كنيد. ما برخی ویژگی ها را به این باکس خود اضافه کردیم که در زیر مشاهده میکنید

<style>
.box {
      direction:rtl;
      background: #1abc9c;
      color: #000;
      font-family:"b yekan",tahoma;
      padding: 15px;
      margin: 10px;
      border-top: 4px solid #16a085;
      border-radius: 3px;
           }
</style>

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

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

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

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

5- در خط 7  گفتیم که متن از طرفین 15 پیکسل فاصله داشته باشد ( فاصله داخلی )

6- در خط 8 گفتیم که باکس از طرفین 10 پیکسل فاصله داشته باشد ( فاصله خارجی )

7- در خط 9 ضخامت کادر بالای باکس را به 4 پیکسل افزایش دادیم

8- در خط 10 گوشه های باکس خود را 5 پیکسل نرم کردیم

<style>
.box {
      direction:rtl;
      background: #1abc9c;
      color: #000;
      font-family:"b yekan",tahoma;
      padding: 15px;
      margin: 10px;
      border-top: 4px solid #16a085;
      border-radius: 3px;
	-webkit-box-shadow: 0px 19px 10px -10px rgba(0,0,0,0.34);
      -moz-box-shadow: 0px 19px 10px -10px rgba(0,0,0,0.34);
       box-shadow: 0px 19px 10px -10px rgba(0,0,0,0.34);
           }
</style>

توضيحات كد كامل شده ي باكس ساده

7- در خط 11 و 12 و 13 یک سایه برای باکس خود تعریف میکنیم سایه ی اصلی در خط 13 میباشد سایه ای که در خط 11 و 12 موجود میباشد برای هماهنگی با مرورگر های کروم و موزیلا میباشد

8- در خط 13 مقدار اول سایه عمودی مقدار دوم سایه افقی مقدار سوم شفافیت سایه و مقدار چهارم پراکندگی یا سایز سایه را مشخص میکند و مقدار پنجم رنگ سایه را مشخص میکتد

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

آموزش به پايان رسيد.اميد وارم كه از اين آموزش ساده بتوانيد نهايت لذت را ببريد. هر سوالي درباره ي اين مطلب داشتيد از قسمت نظرات ميتوانيد بپرسيد.

فرادرس

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