شرح إنشاء بعض الأشكال المختلفة بلغه CSS

أفضل المميزات في CSS3

أنه يقلل من استخدام الصور في تصميم الويب ويتيح لك إنشاء أشكال مختلفة وعديدة ب CSS

فيمكنك الأن إنشاء الأشكال الشائعة التي تراها في الفوتوشوب والاليستريتور بإستخدام CSS3

في درس اليوم

سنقوم بشرح كيفية إنشاء بعض الأشكال الأكثر شيوعا التي يمكن إنشائها باستخدام CSS3

دائــرة

<div id="circle"></div>

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}

مربع

<div id="square"></div>

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}

مستطيل

<div id="rectangle"></div>

#rectangle {
    width: 220px;
    height: 120px;
    background: #4da1f7;
}

نجمه

<div id="star"></div>

#star {
    width: 0;
    height: 0;
    margin: 50px 0;
    color: #fc2e5a;
    position: relative;
    display: block;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -moz-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}

#star:before {
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #fc2e5a;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: '';
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}

#star:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -105px;
    color: #fc2e5a;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
}

قلب

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

#heart {
    position: relative;
}

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

فى الخاتمة

يوجد العديد من المزايا في استخدام أشكال CSS
بدلا من الصور في موقع الويب
علي الرغم من أنه يمكنك إنشاء أشكال من الصفر
يوجد بعض المواقع الرائعة التي تساعدك بإنشاء أشكال بـ CSS :
Coveloping’s CSS Shapes Generator

Html-Generator’s CSS Shapes Generator
Samuel Rossille’s CSS Shape

آمل أن تستمتع وتستفيد بهذا الدرس ، واذا كان لديك طرق أخري مشابهة لإنشاء أشكال بCSS شاركني بها في التعليقات