آموزش ساخت آیکون Space Invader با استفاده از CSS و HTML

ویژه آموزش ساخت آیکون Space Invader با استفاده از CSS و HTML

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

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

1. ابتدا یک ویرایشگر مثل نوت پد ، دریم ویور یا هر برنامه ای که بتوانید یکسری کد را درون آن تایپ کنید باز کرده و کدهای ابتدایی Html را همانند تصویر زیر درون آن تایپ کنید .

<!DOCTYPE html>
<html>
   <head>
   </head>
              <body>
              </body>
</html>

2. یک تگ دیویژن در بین تگ Body ایجاد کرده و شناسه آن را برابر با space-invader قرار بدهید . 

<body>
<div id="space-invader"></div>
</body>

3. حالا باید یک تگ استایل ایجاد کرده و شناسه space-invader را فراخوانی کنیم تا با استفاده از تگهای Css آیکون space-invader را بسازیم .

<!DOCTYPE html>
<html>
<head>
        <style>
         </style>
</head>
          <body>
                  <div id="space-invader"></div>
           </body>
</html>

حالا تگهای زیر را درون style کپی کرده و فایلتان را با عنوان index.html ذخیره و نتیجه را در مرورگر مشاهده کنید .

#space-invader{
box-shadow: 0 0 0 1em red,
 0 1em 0 1em red,
 -2.5em 1.5em 0 .5em red,
 2.5em 1.5em 0 .5em red,
 -3em -3em 0 0 red,
 3em -3em 0 0 red,
 -2em -2em 0 0 red,
 2em -2em 0 0 red,
 -3em -1em 0 0 red,
 -2em -1em 0 0 red,
 2em -1em 0 0 red,
 3em -1em 0 0 red,
 -4em 0 0 0 red,
 -3em 0 0 0 red,
 3em 0 0 0 red,
 4em 0 0 0 red,
 -5em 1em 0 0 red,
 -4em 1em 0 0 red,
 4em 1em 0 0 red,
 5em 1em 0 0 red,
 -5em 2em 0 0 red,
 5em 2em 0 0 red,
 -5em 3em 0 0 red,
 -3em 3em 0 0 red,
 3em 3em 0 0 red,
 5em 3em 0 0 red,
 -2em 4em 0 0 red,
 -1em 4em 0 0 red,
 1em 4em 0 0 red,
 2em 4em 0 0 red;
 background: red;
 width: 1em;
 height: 1em;
 overflow: hidden;
 margin: 50px 0 70px 65px;
 }

کد کلی به شکل زیر می شود . 

<!DOCTYPE html>
<html>
<head>
        <style>
#space-invader{
box-shadow: 0 0 0 1em red,
 0 1em 0 1em red,
 -2.5em 1.5em 0 .5em red,
 2.5em 1.5em 0 .5em red,
 -3em -3em 0 0 red,
 3em -3em 0 0 red,
 -2em -2em 0 0 red,
 2em -2em 0 0 red,
 -3em -1em 0 0 red,
 -2em -1em 0 0 red,
 2em -1em 0 0 red,
 3em -1em 0 0 red,
 -4em 0 0 0 red,
 -3em 0 0 0 red,
 3em 0 0 0 red,
 4em 0 0 0 red,
 -5em 1em 0 0 red,
 -4em 1em 0 0 red,
 4em 1em 0 0 red,
 5em 1em 0 0 red,
 -5em 2em 0 0 red,
 5em 2em 0 0 red,
 -5em 3em 0 0 red,
 -3em 3em 0 0 red,
 3em 3em 0 0 red,
 5em 3em 0 0 red,
 -2em 4em 0 0 red,
 -1em 4em 0 0 red,
 1em 4em 0 0 red,
 2em 4em 0 0 red;
 background: red;
 width: 1em;
 height: 1em;
 overflow: hidden;
 margin: 50px 0 70px 65px;
 }
         </style>
</head>
          <body>
                  <div id="space-invader"> </div>
           </body>
</html>

space invader

آخرین بروز رسانیشنبه, 31 مرداد 1394 16:55

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا