آموزش ساخت شکل قلب با سی اس اس

با سلام ، امروز در خدمت تون هستم با آموزش طراحی شکل قلب با استفاده از سی اس اس (css) 

برای طراحی شکل قلب به سه شکل نیاز داریم ؛ یه مربع با دوتا دایره! 

heart-shape

برای اینکه بتوانیم دایره ها رو به مربع مون بچسبونیم باید بهش position:relative میدهیم و دایره ها رو position:absolute که در محیط مربع مون بالا و پایین کنیم و شکل قلب مان رو درست کنیم.

css-heart-shape

در آخر هم شکل قلب مون را 45 درجه می چرخونیم با کد (transform:rotate(45deg  تا شکل نهایی اوکی بشه. 

مشاهده کدطراحی شکل قلب با سی اس استوسط من (@jamo) در CodePen.

نظرات۰

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی