الحدود الدائرية ” نصف قُطر ”
الحدود الدائرية border-radius في CSS
الحدود الدائرية ، وما أدراك ما هي ! إنها الأمنية الخالدة التي ظل مشرفو المواقع يترقبون تحقيقها منذ ولادة CSS3 ، لقد أصبح اليوم من السهل إنشائها و بسهولة !
تتيح لنا خاصية border-radius إضافة زوايا مدورة لأي عنصر وبسهولة. فقط علينا أن نشير إلى حجم التدوير بالبيكسل:
|
1 2 3 4 5 6 |
p { border: 2px solid red; border-radius: 25px; } |
يتم رؤية التدوير إذا كان للعنصر حدود ، كما في الشكل التالي:
حدود دائرية
هنا سأعطيك مثال آخر جميل مر بذهني الآن و أردت أن أطبقه ليستفيد منه الجميع، و هو وضع خلفية للفقرة المحاطة بالحدود الدائرية :
|
1 2 3 4 5 6 |
p { border: 2px solid red; border-radius: 25px; background:#E2F88F } |
وهذه هي النتيجة:
و من الجميل أيضاً في الزوايا الدائرية للحدود أنه يمكننا تحديد شكل التدوير لكل زاوية، وذلك بإدخال أربع قيم لهاته الزوايا:
|
1 2 3 4 |
p { border-radius: 15px 50px 30px 5px; } |
تنطبق القيم المذكورة فوق مع أركان الزوايا التالية بهذا الترتيب:
- ∴ الركن اليسار العلوي
- ◊ الركن اليمين العلوي
- ∴ الركن اليمين السفلي
- ◊ الركن الأيسر السفلي
أخيرًا ، من الممكن تحسين تدوير زوايا الحدود عن طريق إنشاء منحنيات كما في الشكل الموالي. و في هذه الحالة ، يجب عليك تحديد قيمتين مفصولتين بشرطة مائلة ( slash / ).
و إليك الكود لذلك:
|
1 2 3 4 5 |
p{ border: 2px solid red; border-radius: 60px / 15px; background:#E2F88F } |
وهذه هي النتيجة:
ياله من شكل عجيب! حدود شبه بيضاوية و يمكنك اللعب بالقيم للحصول على أشكل مختلفة.
ليس هذا فحسب ولكن هناك المزيد .. والآتي أجمل
مثلاً هاته القيم :
|
1 2 3 4 5 |
p { border-radius: 15px 50px 30px; } |
تعطينا هذا الشكل:
واوووو ! رااائع !
ما زال CSS3 يخفي لنا المزيد :
|
1 2 3 4 5 |
p { border-radius: 15px 50px 30px 5px; } |
وهاته النتيجة:
- التطبيق على صورة الخلفية:
الآن سأنهي درس الحدود بمفاجأة أخرى :
يمكننا تطبيق الحدود الدائرية border-radius على الصور أيضاً و هذا يعطي للصورة مظهراً رائعـاً 😛
|
1 2 3 |
img { border-radius: 15px 50px 30px; } |
الصورة بلا حدود ظاهرة
إحاطة الصورة بحدود دائرية border-radius
يمكنك أن تغير في قيم الحدود لتعثر على نتائج مختلفة.
إلى هنا أكون قد أنهيت درس الحدود ب CSS3 متمنياً أن يكون الدرس مفيداً
شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
هلا