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

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

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

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

آموزش ایجاد شکل Yin Yang با استفاده از دستورات Css3 مطلب ویژه

توسط 23 خرداد, 1394 3225 0

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

در مقاله قبلی که با عنوان ایجاد یک قلب با استفاده از دستورات CSS3 در سایت فعال شده یاد گرفتید که فقط طی چند مرحله ساده شکل قلب را با استفاده از دستورات Css3 طراحی کنید .  در این مقاله آموزشی میخواهم شکل Yin Yang را با استفاده از دستورات Css3 برای شما ایجاد کنم.Css3 کار را برای طراحان بسیار ساده تر کرده است به طوریکه به سادگی می توانید هر شکلی را که می بینید با استفاده از دستورات Css3 آن را ایجاد کنید .
یین و یانگ نشان دهنده قطب‌های مخالف و تضادهای جهان هستند. البته این بدان معنا نیست که یانگ خوب است و یین بد است (در حقیقت این تحریفی نادرست است). بلکه یین و یانگ مانند شب و روز یا زمستان و تابستان بخشی از چرخه هستی هستند. وقتی تعادل و احساس خوبی به وجود می‌آید که تعادل بین یین و یانگ برقرار باشد. نقطه‌های متضادی که داخل شکل یین و یانگ دیده می‌شود به این مفهوم است که یین وقتی به حداکثر خودش برسد، و می خواهد تمام شود در درونش یانگ را دارد و وقتی هم که ینگ می خواهد به حداکثر خود برسد در درونش یین را دارد. یعنی وقتی یکی تمام می‌شود، دیگری در درونش رشد می‌کند و این چرخه ادامه پیدا می‌کند.

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

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

 

2. سپس یک دیویژن با عنوان <div id="yin-yang"></div> درون تگ body ایجاد کنید تا استایل را با استفاده از این کلاس فراخوانی کنیم .

<div id="yin-yang"></div>

 

3. در مرحله بعدی یک تگ <style> بین تگ head ایجاد کرده و کدهای زیر را درون آن کپی کنید . من برای اینکه برای کاربران مبتدی این قسمت مبهم نباشد کل کد را تایپ می کنم .

<!DOCTYPE html>
<html>
    <head>
          <style>
          </style>
    </head>
<body>
         <div id="yin-yang"></div>
</body>
</html>

 

کد کلی به شکل زیر می باشد . کدهای مربوط به ایجاد شکل yin-yang در Css3 . سعی کنید اگر می خواهید این قسمت را به درستی متوجه شوید خط به خط کدها را تایپ کنید تا تاثیر هرخط کد را بهتر درک کنید .

<!DOCTYPE html>
<html>
    <head>
          <style>
#yin-yang {
   width: 96px;
   height: 48px;
   background: #eee;
   border-color: red;
   border-style: solid;
   border-width: 2px 2px 50px 2px;
   border-radius: 100%;
   position: relative;
}
#yin-yang:before {
   content: "";
   position: absolute;
   top: 50%;
   left: 0;
   background: #eee;
   border: 18px solid red;
   border-radius: 100%;
   width: 12px;
   height: 12px;
}
#yin-yang:after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   background: red;
   border: 18px solid #eee;
   border-radius:100%;
   width: 12px;
   height: 12px;
}
          </style>
    </head>
<body>
         <div id="yin-yang"></div>
</body>
</html>

(دمو تمرین در مرورگر)

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