آموزش ساختن دایره در سی اس اس CSS

cssبه دلیل آنکه کاربران برای زیبایی سایت و یا وبلاگ خود نیاز به اشکال زیبا و منحصر به فرد دارند در این پست می خواهیم آموزش ساختن دایره در سی اس اس CSS را برای کاربران عزیز بیان کنیم. در این پست به مقدمات نپرداخته و صرفآ به آموزش ساختن دایره در سی اس اس CSS اشاره خواهیم کرد.

برای مشاهده ی متن کامل آموزش ساختن دایره در سی اس اس CSS به ادامه ی مطلب مراجعه فرمایید.

آموزش ساختن دایره در سی اس اس CSS

یکی از کرهایی که معمولا در طراحی صفحات وب نیاز است، طراجی اشکالی از جمله اشکال هندسی است. مانند دایره، مثلث، لوزی. غالبا برای ایجاد این اشکال از تصاویر استفاده میشود. اما ما در اینجا می خواهیم آموزش ساختن دایره در سی اس اس CSS را ارائه بدیم.

برای اینکه در صفحه ی اچ تی ام ال (HTML) مورد نظرمان دایره ای ایجاد کنیم، میتوانیم از یک تگ دایو (Div) استفاده کنیم. بدیم منظور یک تگ دایو (Div) در صفحه صفحه ی اچ تی ام ال (HTML) ایجاد کرده و به آن کلاس دایره (Circle) را اختصاص می دهیم.

<div class=”circle”></div>

سپس کدهای سی اس اس (CSS) آن یا همان استایل مورد نظر را ایجاد میکنیم. به صورت زیر:

<style>
.circle{
width: 50px;
height: 50px;
background: red ;
border-radius: 50px;
}
</style>

و برای اینکه در سایر مرورگرها (Web Browser) این استایل نمایش داده شود، کدهای زیر را به کلاس دایره (Circle) اضلفه میکنیم:

-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;

در پست های بعدی سعی می کنیم دیگر المان های زیبای سی اس اس را به شما عزیزان آموزش دهیم.

برای دریافت اطلاعات جامع تر درباره سی اس اس (CSS)، می توانید از اینجا و اینجا بازدید نمایید.

همچنین شما می توانید  به w3schools هم مراجعه نمایید