[تعلم] كيفية إنشاء أشكال مختلفة بـ CSS

تكويد
أغسطس 2nd, 2014
3 تعليقات
8199مشاهدات

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

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

مثال حيالتحميل

دائرة

circle

HTML

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

 

CSS

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

 

مربع

square

HTML

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

 

CSS

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

 

مستطيل

rectangle

HTML

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

 

CSS

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

 

شكل بيضوي

oblong

HTML

<div id="oval"></div>

 

CSS

#oval {
    width: 200px;
    height: 100px;
    background: #e9337c;
    -webkit-border-radius: 100px / 50px;
    -moz-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

 

مثلث

triangle

HTML

<div id="triangle"></div>

 

CSS

#triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

 

مثلث لأسفل

triangle_down

HTML

<div id="triangle_down"></div>

 

CSS

#triangle_down {
    width: 0;
    height: 0;
    border-top: 140px solid #20a3bf;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

 

مثلث لليسار

triangle_left

HTML

<div id="triangle_left"></div>

 

CSS

#triangle_left {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-right: 140px solid #6bbf20;
    border-bottom: 70px solid transparent;
}

 

مثلث لليمين

triangle_right

HTML

<div id="triangle_right"></div>

 

CSS

#triangle_right {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-left: 140px solid #ff5a00;
    border-bottom: 70px solid transparent;
}

 

ماسة

diamond

HTML

<div id="diamond"></div>

 

CSS

#diamond {
    width: 120px;
    height: 120px;
    background: #1eff00;
/* 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%;
    margin: 60px 0 10px 310px;
}

 

معين منحرف

trapezium

HTML

<div id="trapezium"></div>

 

CSS

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

 

متوازي الاضلاع

parralelogram

HTML

<div id="parallelogram"></div>

 

CSS

#parallelogram {
    width: 160px;
    height: 100px;
    background: #8734f7;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
}

 

نجمة

star

HTML

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

 

CSS

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

 

نجمة (6 نقاط)

star-6pt

HTML

<div id="star_six_points"></div>

 

CSS

#star_six_points {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #de34f7;
    margin: 10px auto;
}

#star_six_points:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #de34f7;
    margin: 30px 0 0 -50px;
}

 

شكل خماسي

pentagon

HTML

<div id="pentagon"></div>

 

CSS

#pentagon {
    width: 54px;
    position: relative;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #277bab transparent;
}

#pentagon:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #277bab;
}

 

شكل سداسي

hexagon

HTML

<div id="hexagon"></div>

 

CSS

#hexagon {
    width: 100px;
    height: 55px;
    background: #fc5e5e;
    position: relative;
    margin: 10px auto;
}

#hexagon:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #fc5e5e;
}

#hexagon:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #fc5e5e;
}

 

مثمن

octagon

HTML

<div id="octagon"></div>

 

CSS

#octagon {
    width: 100px;
    height: 100px;
    background: #ac60ec;
    position: relative;
}

#octagon:before {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}

#octagon:after {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}    

}

 

قلب

heart

HTML

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

 

CSS

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

 

بيضة

egg

HTML

<div id="egg"></div>

 

CSS

#egg {
    width: 136px;
    height: 190px;
    background: #ffc000;
    display: block;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

 

لانهاية

infinity

HTML

<div id="infinity"></div>

 

CSS

#infinity {
    width: 220px;
    height: 100px;
    position: relative;
}

#infinity:before,#infinity:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid #06c999;
    -moz-border-radius: 50px 50px 0;
    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);
}

 

تعليق

comment-bubble

HTML

<div id="comment_bubble"></div>

 

CSS

#comment_bubble {
    width: 140px;
    height: 100px;
    background: #088cb7;
    position: relative;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

#comment_bubble:before {
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    top: 38px;
    position: absolute;
    border-top: 13px solid transparent;
    border-right: 26px solid #088cb7;
    border-bottom: 13px solid transparent;
}

 

باكمان

pacman

HTML

<div id="pacman"></div>

 

CSS

#pacman {
    width: 0;
    height: 0;
    border-right: 70px solid transparent;
    border-top: 70px solid #ffde00;
    border-left: 70px solid #ffde00;
    border-bottom: 70px solid #ffde00;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}

 

خاتمة

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

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

 

المصدر

Tags , ,

عن

يعمل في شركة بيانات, يميل الى الكتابة في المواضيع المتعلقة بمجال التصميم و التكويد بصفة عامة, و بالتحديد اثراء المحتوى العربي فيما يخص تصميم واجهة الاستخدام و تجربة المستخدم، وهدفه المساهمة في الارتقاء بالمعلومة العربية.

مقالات ذات صلة

3 تعليقات

  1. زائر
    2 أغسطس,2014 في 11:14 م - Reply

    أخذ chris coyer جهدا في تصميم وجمع هذه الأشكال. لكان من اللطيف إدراج المصدر
    http://css-tricks.com/examples/ShapesOfCSS/

  2. hassan
    2 يونيو,2016 في 8:20 م - Reply

    شكرا اخي الكريم

Creative Commons License
Fwasl by Fwasl is licensed under a Creative Commons Attribution 4.0 International License.