تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات

ساخت اشکال هندسی مختلف با استفاده از CSS3

CSS , HTML5 , اسکریپت ها

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

اگر شما هم فکر میکنید که به وسیله css میتوان فقط چند شکل از جمله مربع , مستطیل , دایره و بیضی را ساخت , سخت در اشتباهید .

در این پست از سایت بیست اسکریپت , قصد دارم آموزشی را قرار دهم که با استفاده از ترفند هایی در css3 , اشکال بسیار زیادتری را در صفحات وب سایت خود ایجاد کنید .

ساخت اشکال هندسی مختلف با استفاده از CSS3

 

دایره :

#vms {
    width: 140px;
    height: 140px;
    background: red;
    border-radius: 70px;
}

  مربع : 

#vms {
    width: 100px;
    height: 100px; 
    background: red; 
}

مستطیل :

#vms {
    width: 150px;
    height: 75px; 
    background: red; 
}

بیضی :

#vms {
    width: 200px;
    height: 100px; 
    background: red;
    border-radius: 100px / 50px;
}

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

#vms {
    width: 0;
    height: 0;
    border-bottom: 120px solid red;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent; 
}

مثبث رو به پایین :

#vms { 
    width: 0;
    height: 0;
    border-top: 80px solid red;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}

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

#vms {
    width: 0;
    height: 0;
    border-left: 100px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

 چهار ضلعی غیر منظم :

#vms {
    height: 0; 
    width: 80px;
    border-bottom: 80px solid red;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}

 الماس :

#vms{
    width: 80px;
    height: 80px;
    background: red;
    margin: 3px 0 0 30px;
    /* Rotate */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    /* Rotate Origin */
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

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

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

 دوازده نقطه ستاره :

#vms {
    height: 100px;
    width: 100px;
    background: red;
    position: absolute;
}
#vms:before {
    height: 100px;
    width: 100px;
    background: red;
    content:"";
    position: absolute;
    /* Rotate */
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}
#vms:after {
    height: 100px;
    width: 100px;
    background: red;
    content:"";
    position: absolute;
    /* Rotate */
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

 شش نقطه ستاره :

#vms {
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 80px solid red;
}
#vms:after {
    content:"";
    position: absolute;
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent;
    border-right: 50px solid transparent; 
    border-top: 80px solid red;
    margin: 30px 0 0 -50px;
}

هشت وجهی :

#vms {
    width: 100px; 
    height: 100px; 
    background: red;
}
#vms:before {
    height: 0;
    width: 40px;
    content:"";
    position: absolute;
    border-bottom: 30px solid red;
    border-left: 30px solid white;
    border-right: 30px solid white;
}
#vms:after {
    height: 0;
    width: 40px;
    content:"";
    position: absolute; 
    border-top: 30px solid red;
    border-left: 30px solid white; 
    border-right: 30px solid white;
    margin: 70px 0 0 0;
}

 کادر سخنگو : 

#vms {
    width: 120px; 
    height: 80px; 
    background: red;
    position: absolute;
    border-radius: 10px;
}
#vms:before {
    content:"";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 26px solid red;
    border-bottom: 13px solid transparent;
    margin: 13px 0 0 -25px;
}

 تخم مرغ :

#vms {
    display:block;
    width:126px;
    height:180px;
    background-color:red;
    -webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

ساخت کارکتر بازی pacman :

#vms {
    width: 0px;
    height: 0px;
    border-right: 60px solid transparent;
    border-top: 60px solid red;	
    border-left: 60px solid red;
    border-bottom: 60px solid red;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

دایره 2 رنگ :

#vms {
    width: 0;
    height: 0;
    border-bottom: 60px solid black;
    border-top: 60px solid black;
    border-left: 60px solid red;
    border-right: 60px solid red;
    border-radius: 60px;
}

ساخت یک قلب :

#vms { 
    position: relative;
}
#vms:before, #vms:after {
    position: absolute;
    content: "";
    left: 70px; top: 0;
    width: 70px;
    height: 115px;
    background: red;
    -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%;
}
#vms: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%;
}

توجه 1 : این اندازه ها و رنگ ها به صورت پیش فرض تنظیم شده اند و تمامی آنها را با توجه به قوانین خاص هر شکل میتوانید تغییر نمایید

توجه 2 : در بالا برای همه ی css ها از آی دی vms استفاده شده که طبیعتا میتوانید آن را تغییر دهید . ضمنا برای ساخت کد html این کد ها ( نمایش شکل ها ) باید به روش زیر در داخل تگ body عمل نمایید.

<div id="vms"></div>

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 5 / 5. تعداد رای : 1

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 5 CSS , HTML5 , اسکریپت ها
لینک کوتاه مطلب : https://www.20script.ir/?p=13336
کلمات کلیدی پست :
مطالب مرتبط
8,943اسکریپت منوی تصویری بسیار زیبا و کاربردی تاریخ : 2013/11/1
22,678با افزونه Autoptimize در وردپرس تخته گاز برانید تاریخ : 2016/05/23
6,833مجموعه دکمه های طراحی وب سایت به صورت CSS3 تاریخ : 2013/11/16
7,427آیکون های بسیار زیبای CSS3 تاریخ : 2013/10/26
10,977دانلود اسلایدر پیشرفته فول css3 تاریخ : 2013/10/21
10,290اسکریپت ساخت صفحات در دست ساخت Enexero Coming Soon تاریخ : 2017/11/14
22,135تگ های بسیار زیبا با CSS 3 تاریخ : 2013/10/21
29,084افزونه صفحه آرایى Page Builder برای وردپرس تاریخ : 2016/02/16
7,508دانلود فرم ورود بسیار زیبا و حرفه ای تاریخ : 2014/01/23
6,136منوی زیبای فانتزی به صورت CSS3 تاریخ : 2013/10/29
9,862دانلود کد کیبورد بسیار کاربردی فول CSS3 تاریخ : 2013/11/3
10,300منوی بسیار زیبای ایکون دار به صورت CSS3 تاریخ : 2014/07/21
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
indiegogo
sourceforge
profile webmaster
profile webmaster
profile
profile check
آرشیو
checker list
سئو سایت
تبلیغات