9
تشکر

ساخت آیکن با استفاده از عناصر HTML

box shadow

box shadow

در CSS3 با استفاده از عناصر کاذب میتوان آیکن مانند آن چیزی که در ادامه خواهیم دید ساخت.
عناصر کاذب در ساختار درختی سند HTML شما وجود ندارند اما توسط CSS میتوان آنها را تولید کرد. اما ما به شما پیشنهاد میکنیم که خودتان آنها را اضافه کنید.
برای مثال مانند زیر عمل کنید:

<div class="”square”"></div>

و CSS را مانند زیر وارد کنید:

.square {
   position: relative;
   background: blue;
   width: 50px;
   height: 50px;
}
.square::before {
   position: absolute;
   left: -50px;
   content: '';
   height: 50px;
   width: 50px;
   display: block;
   background: green;
}
.square::after {
   position: absolute;
   left: 50px;
   content: '';
   height: 50px;
   width: 50px;
   display: block;
   background: red;
}


در کد بالا ما دو بلاک دیگر ساختیم اما قابل ذکر است که این دو بلاک برخی خواص CSS را مانند Transitions و Animation را پشتیبانی نمیکنند.
نکته دیگری که باید بدانید این است که محتوای این دو بلاک تولید شده بالای محتوای بلاک اصلی هستند. اما میتوان با دادن خاصیت z-index:-1 آن را درست کرد. مرورگرها همه این سه عنصر را به عنوان یک عنصر در نظر میگیرند.
اما ما میتوانیم در HTML خودمان به جای این دو عنصر کاذب دو دایو واقعی را درست کنیم:

<div class="square"></div>
.square {
   background: blue;
   width: 50px;
   height: 50px;
   position: relative;
}
.square .before {
   left: -50px;
   position: absolute;
   content: '';
   height: 50px;
   width: 50px;
   display: block;
   background: green;
}
.square .after {
   content: '';
   height: 50px;
   width: 50px;
   background: red;
   position: absolute;
   left: 50px;
}

اگر عناصر کاذب به شما فضای کافی جهت کار شما نمیدهند, شما میتوانید از Box-Shadowها استفاده کنید. این تکنیک به شما اجازه ساخت عناصر زیادی را براحتی میدهد.

<div class="circle"></div>
.circle {
   position: relative;
   background: blue;
   width: 50px;
   height: 50px;
   border-radius:50%;
   box-shadow: -110px 0 0 -20px purple,
               -60px 0 0 -10px red,
               80px 0 0 10px green,
               180px 0 0 20px orange;
}
box shadow

box shadow

مشخصه box-shadow برای خیلی ها نامفهوم است. به شرح پارامترهای آن میپردازیم.
Box-shadow: 80px 5px 1px 10px green;
80px مشخص کننده x و 5px مشخص کننده y است. 1px مشخص کننده میزان تاری و 10px مشخص کننده میزان بزرگی عنصر نسبت به عنصر اصلی است.
مثالی دیگر از استفاده از Box-shadow

<div class="ball"></div>
.ball {
   position: relative;
   background: blue;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   box-shadow: inset 20px 0 0 -10px yellow,inset -20px 0 0 -10px red;
}

در بخش بعدی به بخش پیشرفته تر این آموزش میپردازیم.

  • یاشار می‌گه:

    من اینکار رو انجام دادم ولی نشد !


  • نظرات این مطلب بسته است.