آموزش ساختن آیکن تاریخ در سی اس اس CSS

سی اس اسیکی از شکل ها یا آیکن هایی که در صفحات وب بسیار پرکاربرد است، آیکن تاریخ است. در بسیاری از سایت ها برای استفاده از آیکن تاریخ، آن را در نرم افزاری مثل فتوشاپ طراحی کرده و از فایل تصور آن در صفحات وب سایت خود استفاده می کنند.

در این پست میخواهیم آموزش ساختن آیکن تاریخ را با استفاده از سی اس اس CSS و اچ تی ام ال HTML با هم مرور کنیم.

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

آموزش ساختن آیکن تاریخ در سی اس اس CSS

آیکن

آیکن ها این ویژگی را دارند که درعین سادگی، جذابیت فراوانی داشته و به شمایل و شکیل شدن صفحات وب کمک کنند.

نمایش تاریخ نیز یکی از پراستفاده ترین بخش ها در صفحات وب است. میتوان برای نمایش تاریخ، آن را به صورت یک متن نوشت، و یا از یک تصویر استفاده کرد. در حالت متنی شاید جذابیت زیادی وجود نداشته باشد. (البته این به طرح قالب اصلی مرتبط است). در حالت عکس نیز، لود عکس به مراتب سنگین تر از متن است. حال برای اینکه هم جذابیت تصویر را داشته باشیم و هم سرعت لود مناسب، میخواهیم از سی اس اس CSS و اچ تی ام ال HTML استفاده کنیم.

ابتدا در بخش Body صفحه، کدهای زیر را قرار می دهیم.

<time datetime="1392-10-07" class="icon">
  <strong>دی ماه</strong>
  <span>20</span>
  <em>شنبه</em>
</time>

از تگ Time برای مشخص کردن محتوای تاریخ استفاده کردیم و برای مشخص کردن روز و ماه از تگ های em, span و Strong  که همگی آن ها تگ های مربوط با نوشتن هستند استفاده کردیم.

برای کسب اطلاعات درباره تگ های Time , em, span, Strong بر روی هر یک کلیک کنید.

اما در بخش سی اس اس CSS کدهای زیر را استفاده نمایید.

time.icon
{
  font-size: 2em; /* تغییر اندزاه آیکن */
  display: block;
  position: relative;
  width: 7em;
  height: 7em;
  background-color: #fff;
  border-radius: 0.6em;
  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
  overflow: hidden;
}
time.icon *
{
  display: block;
  font-family: BBardiya, Arial, Helvetica, sans-serif;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}
time.icon strong
{
  position: absolute;
  top: 0;
  padding: 0.4em 0;
  color: #fff;
  background-color: #fd9f1b;
  border-bottom: 1px dashed #f37302;
  box-shadow: 0 2px 0 #fd9f1b;
}
time.icon em
{
  position: absolute;
  bottom: 0.3em;
  color: #fd9f1b;
}
time.icon span
{
  font-size: 2.8em;
  letter-spacing: -0.05em;
  padding-top: 0.6em;
  color: #2f2f2f;
}

در کلاس icon ابتدا چهارچوب اصلی آیکن را تعیین میکنیم. سپس با استفاده از انتخابگر ستاره (* Selector) برای تمام تگ های موجود  در کلاس آیکن، تنظیمات فونت مورد نظر را اعمال میکنیم.

نکته: ما در این آیکن از فونت BBardiya استفاده کردیم که میتوانید آن را از اینجا دانلود کرده و برای آموزش اضافه کردن فونت مورد نظر به استایل ها از W3schools استفاده کنید.

در انتها نیز به طور مجزا هم برای سه عنصر موجود در تگ Time به صورت جداگانه استایل ها و کدهای سی اس اس مجزا را تعریف می کنیم.

نکته: برای تغییر اندازه آیکن تقویم، فقت کافیست تا اندازه فونت را در کلاس icon تغییر دهید.

این کد قابل اجرا در نسخه های جدید مرورگرها و نسخه IE 9 به بعد می باشد.

برای کسب اطلاعات درباره انتخابگرها در سی اس اس می توانید به W3schools و همچنین برای مشخصه های سی اس اس می توانید به W3schools مراجعه نمایید.