ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

آموزش ساخت آیکون بی نهایت Infinity با HTML و CSS مطلب ویژه

توسط 29 مرداد, 1394 3926 0

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

با یکی دیگر از تمرین های مقدماتی تگهای Html و Css با عنوان آموزش ساخت آیکون بی نهایت Infinity با Html و Cssدر خدمت شما هستم . این تمرین ها به درخواست کاربران بخش آموزش برای بازدید کنندگان سطح مقدماتی ایجاد شده و 20 تمرین دیگر نیز ایجاد شده که در روزهای آینده در ساعت های مختلف در بخش اموزش فعال می شود. سعی کنید برای درک بهتر تگ ها را خط به خط تایپ کنید تا بهتر متوجه کاربرد هر تگ شوید . 

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

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

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

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

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

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

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

#infinity {
position: relative;
width: 212px;
 height: 100px;
 }
 #infinity:before, #infinity:after {
content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 60px;
 height: 60px;
 border: 20px solid red;
 -moz-border-radius: 50px 50px 0 50px;
 border-radius: 50px 50px 0 50px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 }
#infinity:after {
 left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 }

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

<!DOCTYPE html>
<html>
<head>
        <style>
#infinity {
position: relative;
width: 212px;
 height: 100px;
 }
 #infinity:before, #infinity:after {
content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 60px;
 height: 60px;
 border: 20px solid red;
 -moz-border-radius: 50px 50px 0 50px;
 border-radius: 50px 50px 0 50px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 }
#infinity:after {
 left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 }
         </style>
</head>
          <body>
                  <div id="infinity"></div>
           </body>
</html>

 

آموزش ساخت آیکون بی نهایت Infinity با HTML و CSS

این مورد را ارزیابی کنید
(1 رای)
آخرین ویرایش در چهارشنبه, 28 مرداد 1394 ساعت 13:59
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا