انتظرونا قريبا التجديد الكامل للمجتمع .. ورفع احدث نسخ الويندوز مع البرامج المفعلة بروابط تورنت
شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي
avatar
Dev-Point-Vip
Dev-Point-Vip
Time Online : 59d 16h 8m 56s
المساهمات : 123
نقاط : 353
السٌّمعَة : 3
تاريخ التسجيل : 01/03/2017
معاينة صفحة البيانات الشخصي للعضوhttp://devepoint.yoo7.com

[css] عمل اشكال دائرة مربع مثلث والمزيد باللغة border-radius CSS

في السبت مارس 11, 2017 7:00 pm
عمل اشكال دائرة مربع مثلث والمزيد باللغة border-radius CSS
كود رسم دائرة / مربع / مثلث بال Css فقط

هل تعلم أنه يمكن رسم الكثير من العناصر بواسطة Css فقط

مثل الدائرة و المثلث و المربع و المستطيل و الكثير

ووصل الإبداع بالمصممين أن يقوم برسم بيت كامل

بال Css فقط و بدون إستخدام أي صورة

كيف تقوم برسم دائرة بال Css

اولا تقوم بعمل بوكس متساوي الطول والعرض
إخترت لكم هنا طول 100px و عرض 100px
ثم تقوم بعمل ال border-radius نصف المساحة مثلا 50px
ثم نقوم بإظهارها كبلوك
ليصبح الكود بالشكل التالي
الكود:
display: block;
    height: 100px;
    width: 100px;
    background-color: #00f;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -khtml-border-radius: 50px;
    border-radius: 50px;
-----------------------------------------

أما رسم المربع فهو سهل جدا
فقط بوكس متساوي الطول و العرض و يظهر كبلوك مثل التالي

الكود:
background-color: #0f0;
    display: block;
    height: 100px;
    width: 100px;
-----------------------------------------
أما المثلث سوف يكون بدون عرض ولا إرتفاع و الحدود هي التي سوف ترسمه Border
الكود التالي يوضح كيف
الكود:
display: block;
    height: 0;
    width: 0;
    border-bottom: 10em solid #f00;
    border-left: 10em solid transparent;

رابط الموقع مع الامثلة
https://css-tricks.com/almanac/properties/b/border-radius/


في امان الله احبتي
استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى