آموزش ساخت آیکون ماه از طریق HTML و CSS3

ویژه آموزش ساخت آیکون ماه از طریق HTML و CSS3

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

با استفاده از Html  و Css3 می توان وب سایت ، فرم ، وبلاگ ، صفحات مختلفی که برای دسترسی به اطلاعات مورد استفاده قرار می گیرد و اشکال متفاوت طراحی کرد . من در این مقاله میخواهم تصویر ماه را در سه مرحله برای شما با استفاده از تگهای HTML و CSS شبیه سازی کنم . امیدوارم این نوع تمرین ها به کاربران مبتدی کمک کند تا راحت تر با تگهای زبانهای نامبرده شده آشنا شوند .

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

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

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

<body>
<div id="moon"></div>
</body>

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

<!DOCTYPE html>
<html>
<head>
        <style>
         </style>
</head>
          <body>
                  <div id="moon"></div>
           </body>
</html>

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

#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
 }

نتیجه در مرورگر

آموزش ساخت آیکون ماه از طریق HTML و CSS3

آخرین بروز رسانیچهارشنبه, 28 مرداد 1394 13:10

نوشتن دیدگاه

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

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