ایجاد یک قلب با استفاده از دستورات CSS3

ویژه ایجاد یک قلب با استفاده از دستورات CSS3

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

در مقاله قبلی که با عنوان "ایجاد اشکال مختلف هندسی با Css3" در سایت فعال شد یاد گرفتید که چگونه اشکال مورد نظر خودتون را با استفاده از دستورات Css3 ایجاد کنید .
Css3 کار را برای طراحان بسیار ساده تر کرده است به طوریکه به سادگی می توانید هر شکلی را که می بینید با استفاده از دستورات Css3 آن را ایجاد کنید . بر فرض مثال ایجاد شکل قلب با استفاده از Css3 که بنده در ادامه روش آن را توضیح میدهم .

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


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

 

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

   

<div id="heart"></div>

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

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

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

 <!DOCTYPE html>
<html>
    <head>
          <style>
#heart {
    position: relative;
}
#heart:before, #heart:after {
   position: absolute;
   content: "";
   left: 70px; top: 0;
   width: 70px;
   height: 115px;
   background: blue;
   -moz-border-radius: 50px 50px 0 0;
   border-radius: 50px 50px 0 0;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}
#heart:after {
left: 0;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
   -webkit-transform-origin: 100% 100%;
   -moz-transform-origin: 100% 100%;
   -ms-transform-origin: 100% 100%;
   -o-transform-origin: 100% 100%;
   transform-origin :100% 100%;
}
          </style>
    </head>
<body>
         <div id="heart"></div>
</body>
</html>

 

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

آخرین بروز رسانیجمعه, 22 خرداد 1394 10:10

نوشتن دیدگاه

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

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

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