رسم اشکال در css

آخرین بروز رسانی: اسفند ۲۰, ۱۳۹۶

برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.webyar.net/

css Shapes

اشکال در css

اگر شما نیز یک طراح وب سایت هستید، قطعا برای شما هم رخ داده است که بخواهید با استفاده از اشکال در css چندضلعی ها و طرح های زیبا رسم نمایید. خوب است بدانید، بیش‌تر شکل‌ها در CSS با ترکیبی از چند ضلعی ها به وجود آمده اند، حتی شکل مثلث! در ادامه با ما همراه باشید تا با رسم اشکال در css دستورات کلی آن را فرا بگیرید.

 

رسم اشکال در css

آموزش رسم اشکال در css

 

روشهای رسم اشکال در css

برای رسم اشکال در css روشهای مختلفی وجود دارد. اکثر پارامترهایی که در ساخت اشکال css مورد استفاده قرار می گیرند ، به شرح زیل می باشد:

– Border-radius
– Border
– Transform
– Clip-path
– Box-shadow

در ادامه هر کدام را با ذکر مثال توضیح می دهیم.

 

Border-radius

Border Radius در css میزان خمیدگی لبه های چند ضلعی را مشخص می کند. این پارامتر بر اساس پیکسل یا درصد مقدار دهی می کند. با استفاده از Border Radius می توان اشکالی مانند دایره و بیضی رسم کرد.

 

دایره:

.circle{ 	height: 250px; 	width: 250px; 	border-radius:50%; 	background-color:#29DBC7; }

 

Border

با استفاده از این ویژگی می توانید خط باریکی در اطراف شکل ایجاد نمایید. شکل زیر تنها با استفاده از border و بدون در نظر گرفتن width و height  (مقدار صفر) طراحی شده است.

 

مثلث رو  به بالا:

#triangle-up { width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid #888888; }

به این ترتیب با تغییر border ها می توانید مثلث رو به پایین ، رو به راست و رو به چپ ایجاد نمایید.

 

ذوزنقه:

.KeepRightLeft{ 	width: 0; 	height: 0; 	border-top:100px solid transparent; 	border-right:100px solid orange; 	border-bottom:100px solid transparent; 	border-left:100px solid blue; }

 

شش ضلعی:

#hexagon { 	width: 100px; 	height: 55px; 	background: red; 	position: relative; } #hexagon:before { 	content: ""; 	position: absolute; 	top: -25px; 	left: 0; 	width: 0; 	height: 0; 	border-left: 50px solid transparent; 	border-right: 50px solid transparent; 	border-bottom: 25px solid red; } #hexagon:after { 	content: ""; 	position: absolute; 	bottom: -25px; 	left: 0; 	width: 0; 	height: 0; 	border-left: 50px solid transparent; 	border-right: 50px solid transparent; 	border-top: 25px solid red; }

این شکل با استفاده از خصوصیت content در css ایجاد شده است. اگر با content در css آشنایی ندارید ، این آموزش ها را در سایت وب یار دنبال نمایید. در ادامه با مثال های دیگر از content آشنا می شوید.

 

Transform

اگر می خواهید برای اشکال در css چرخش ایجاد نمایید، ویژگی transform با حالت rotate سودمند خواهد بود. مثلا با چرخاندن یک مربع، لوزی ایجاد می گردد.

یعنی:

.diamond{ 	width: 150px; 	height: 150px; 	background-color: #0AECD0; 	transform: rotate(45deg); 	margin-left:40px; 	margin-top: 40px; }

 

متوازی الاضلاع:

#parallelogram {    width: 130px;     height: 75px;    background: pink;    /* Skew */    -webkit-transform: skew(20deg);     -moz-transform: skew(20deg);     -o-transform: skew(20deg);    transform: skew(20deg); }

 

نوار نشان:

رسم اشکال در css

#badge-ribbon { position:relative; background:#888888; height:100px; width:100px; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; } #badge-ribbon:before,#badge-ribbon:after { content:''; position:absolute; border-bottom:70px solid #888888; border-left:40px solid transparent; border-right:40px solid transparent; top:70px; left:-10px; -webkit-transform:rotate(-140deg); -moz-transform:rotate(-140deg); -ms-transform:rotate(-140deg); -o-transform:rotate(-140deg); } #badge-ribbon:after { left:auto; right:-10px; -webkit-transform:rotate(140deg); -moz-transform:rotate(140deg); -ms-transform:rotate(140deg); -o-transform:rotate(140deg); }

 

قلب:

#heart { position:relative; width:100px; height:90px; } #heart:before,#heart:after { position:absolute; content:""; left:50px; top:0; width:50px; height:80px; background:#888888; -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%; }

 

بی نهایت:

#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); }

 

ذره بین ( علامت جستجو ) :

#magnifying-glass {  font-size: 10em; /* This controls the size. */  display: inline-block;  width: 0.4em;  height: 0.4em;  border: 0.1em solid red;  position: relative;  border-radius: 0.35em; } #magnifying-glass::before {  content: "";  display: inline-block;  position: absolute;  right: -0.25em;  bottom: -0.1em;  border-width: 0;  background: red;  width: 0.35em;  height: 0.08em;  -webkit-transform: rotate(45deg);     -moz-transform: rotate(45deg);      -ms-transform: rotate(45deg);       -o-transform: rotate(45deg); }

 

Clip-path

ویژگی clip-path به همراه سه تابع ()inset(), polygon و ()ellipse شکل‌های متنوع‌تری طراحی می‌شود. اعداد ورودی نشان‌دهنده هر گوشه شکل هستند. مثلا برای مثلث ، ۳ گوشه و سه ورودی نیاز است.

 

ستاره :

.star{ 	width: 250px; 	height: 250px; 	background-color:#A80F43; 	background-size:cover; 	-webkit-clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }

 

Box-shadow

ویژگی box-shadow برای اضافه کردن سایه به اشکال در css استفاده می‌شود.

 

هلال ماه:

.moon{ 	width: 250px; 	height: 250px; 	border-radius:50%; 	box-shadow: 45px 45px 0 0 #32172C;  }

 

مهاجم فضایی:

رسم شکل در css

#space-invader{    box-shadow:     0 0 0 1em red,     0 1em 0 1em red,     -2.5em 1.5em 0 .5em red,     2.5em 1.5em 0 .5em red,     -3em -3em 0 0 red,     3em -3em 0 0 red,     -2em -2em 0 0 red,     2em -2em 0 0 red,     -3em -1em 0 0 red,     -2em -1em 0 0 red,     2em -1em 0 0 red,     3em -1em 0 0 red,     -4em 0 0 0 red,     -3em 0 0 0 red,     3em 0 0 0 red,     4em 0 0 0 red,     -5em 1em 0 0 red,     -4em 1em 0 0 red,     4em 1em 0 0 red,     5em 1em 0 0 red,     -5em 2em 0 0 red,     5em 2em 0 0 red,     -5em 3em 0 0 red,     -3em 3em 0 0 red,     3em 3em 0 0 red,     5em 3em 0 0 red,     -2em 4em 0 0 red,     -1em 4em 0 0 red,     1em 4em 0 0 red,     2em 4em 0 0 red;      background: red;     width: 1em;     height: 1em;     overflow: hidden;      margin: 50px 0 70px 65px;   }

 

در این مقاله سعی کردیم تا چند ویژگی سودمند برای ایجاد اشکال در css  را معرفی نماییم. تعداد اشکال در css آن قدر زیاد است که در یک مقاله گنجانده نمی شوند. لذا برای آشنایی شما دوستان ، تنها قسمت های اصلی اشکال در css را بیان کردیم. موفق باشید.

نوشته رسم اشکال در css اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.

طراحی سایت اصفهان | سئو سایت اصفهان

پربازدیدترین اخبار
طراحی سایت اصفهان

طراحی سایت اصفهان |طراحی سایت حرفه ای | سئو تضمینی سایت طراحی سایت اصفهان تیم طراحی سایت و سئو سایت وب یار به آدرس http://www.webyar.net ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت ,سئوسایت در گوگل و امنیت […]

عکس بستنی قیفی بستنی قیفی یک بستنی محبوب همه و به ویژه محبوب بچه هاست. نان های قیقی با شکل های مختلف به این منظور تولید می شوند و هر نوع بستنی از میوه ای و شکلاتی گرفته تا خامه ای را به صورت قیفی و به اشکال زیبا عرضه می کنند. در اینجا عکسهای […]

طراحی سایت

طراحی سایت در اصفهان   طراحی سایت و سئو سایت در اصفهان   تیم طراحی سایت و سئو سایت وب یار به آدرس ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت , سئو سایت در گوگل ، ارسال […]

رام رسمی اندروید ۶٫۰٫۱ ملقب به مارشمالو بلاخره برای سامسونگ گلکسی S5 منتشر شد. در این پست تمامی رام های اندروید ۶ سری SM-G900 را به تفکیک مدل با آموزش اختصاصی نصب متنی و ویدیویی قرار میدهیم. همانطور که میدانید حتی اندروید ۵٫۱٫۱ برای گلکسی اس۵ منتشر نشد و این دیوایس با نسخه مشکل دار […]

RightNote  نرم افزاری برای نگهداری و دسته بندی یادداشت های شماست . شما می توانید نوشته های کوتاه یا بلند خود را ذخیره کرده و به دو صورت از طریق منو بالای نرم افزار و یا منوی درختی پیدا کنید. در این نرم افزار ویژگی های زیادی مانند جستجوی کلمه و یا جمله وجود داشته […]

دانلود آهنگ جدید احمد صفایی به نام حیف شد دانلود موزیک جدید احمد صفایی به نام حیف شد دانلود آهنگ حیف شد از احمد صفایی دانلود آهنگ با کیفیت ۳۲۰ پخش آنلاین آهنگ http://dl.musicahang.ir/images/03597867752248133576.mp3 ترانه و آهنگ : احمد صفایی ، تنظیم : امیر حیدری متن آهنگ جدید احمد صفایی بنام حیف شد از نگاه […]