إنشاء صناديق المحتوى النصي بزوايا مستديرة border-radius في الووردبريس باستخدام CSS وبدون مكونات إضافية
 |
تعلم أيضاً كيفية استخدام HTML و CSS في الووردبريس |  |
الحدود الدائرية border-radius في مقالات ووردبريس
المقدمـة: صراحة، أفكار درس هذا اليوم تهاجمني من كل جانب، ومثل هذه الصناديق لها مكونات إضافية خاصة في الووردبريس . وبما أن ووردبريس يتميز بالمرونة في استخدام لغتَيْ HTML وCSS، فإن المجال يبقى مفتوحاً على مصراعيه لتحسين مظهر وبنية مقالاتك التي تكتبها . فالتدوينات التي تتخللها فواصل إما خط أفقي أو أيقونات، صور أو صناديق المحتوى، تُشجع أو ترغم القارئ على الاستمرار في القراءة إلى النهاية دون أن يشعر بالملل. فإذا كنت أيها القارئ الكريم من هواة التدوين في مدونتك المُنصبةً على نظام الووردبرس ، فإن مقالتي هذه فرصة لك لتعلم كيفية تحسين مظهر مقالاتك و تدويناتك التي تكتبها في أي مجال،
إقرأ أيضاً:
كما ذكرت في مقالات عديدة أن المدونات الناجحة تكون ذات محتوى جيّد ومُميز مع مراعاة بنية النص وتنسيقه وتجميل مظهره لأن الاهتمام بالشكل الأنيق والمظهر الجميل يثير اهتمام القارئ ويُسَهِّل عليه الانتقال بين الفقرات بكل سلاسة وأريحية . أما النّصوص الغير المرتبه فإنها تُـنَفِّرُ القارئ حتى في وجود محتوى مفيد. إذن من هذا الجانب يبدأ الاحتراف.
أساسيات BORDER-RADIUS
تسمح لك خاصية border-radius بتحديد الزوايا الدائرية لحدود العنصر. يتم تعريف الانحناء في كل زاوية بنصف قطر واحد أو اثنين من الانحناء الذي يحدد قوساً لدائرة أو قوساً من القطع الناقص.
Jabism.com
إكتشف أنّك بحاجة لهذا الموقع، كي تتَعَلَّمْ كيف تبني موقعك بنفسك !
باقة من أفضل مقالات ووردبريس ودورات في HTML5 و CSS3 طموحاتنا كبيرة، و أهدافنا مركزة، و آمالنا إرضاءكم
نموذج لصناديق المحتوى في ووردبريس باستخدام HTML وCSS
فيديو Youtube يشرح خاصية border-radius
قبل الاستمرار إقرأ ما سيساعدك على التطبيق: خاصية Padding في CSS
دون أن أطيل، سأعرض الآن بعض صناديق المحتوى في ووردبريس مع إدراج كود لكل علبة ، ويمكنك نسخه ولصقه في مقالاتك مع إمكانية التعديل عليه من حيث الشكل والألوان. لكن قبل ذلك أدعوكم إلى زيارة مقالة: كيفية تعديل CSS في ووردبريس
وهذه بعض مقتطفات الأكواد التي يتم بها تحسين المظهر المرئي لموقع ووردبريس.
كما تعلمنا في دروس CSS ، أنه يمكننا دمج CSS داخل HTML باستخدام الوسم <style> … ورغم أن المبرمجون بدأوا يتجنبون هذا السلوك إلا أنه معمول به في صفحات HTML . وهذا ما سنطبقة في أكواد موضوعنا اليوم:
صندوق محتوى نصي بحدود border عادي:
نجيب محفوظ
|
1 |
<div style="border: 1px solid #52accc; color: #92a3c5; background-color: #eff9fc; width: 90%; margin: auto;"> <span style="color: #000080;"> ضع المحتوى هنا !</span> </div> |
صندوق محتوى نصي بحدود ذات زوايا مستديرة border-radius:نجيب محفوظ
الكود:
|
1 |
<div style="border: 1px solid #52accc; border-radius: 20px; color: #92a3c5;"> <span style="color: #000080;"> هنا تكتب المحتوى !</span> </div> |
صندوق محتوى نصي بحدود ذات زوايا مستديرة border-radius:
border-radius: 25% 10%
نجيب محفوظ
الكـــود:
|
1 |
<div style="border: 1px solid; border-radius: 25% 10%; color: #92a3c5;"> <span style="color: #000080;"> هنا تكتب المحتوى !</span> </div> |
صندوق محتوى نصي بحدود ذات زوايا مستديرة border-radius:
border-radius: 10% 30% 50% 70%
نجيب محفوظ
الكـــود:
|
1 |
<div style="border: 1px solid; border-radius: 10% 30% 50% 70%; color: #92a3c5;"> <span style="color: #000080;"> هنا تكتب المحتوى !</span> </div> |
صندوق محتوى نصي بحدود ذات زوايا مستديرة border-radius:
border-radius: 100%
Jabism.com
إكتشف أنّك بحاجة لهذا الموقع، كي تتَعَلَّمْ كيف تبني موقعك بنفسك !
باقة من أفضل مقالات ووردبريس ودورات في HTML5 و CSS3 طموحاتنا كبيرة، و أهدافنا مركزة، و آمالنا إرضاءكم
الحدود الدائرية border-radius في مقالات ووردبريس
الكـــود:
|
1 |
<div style="border: 2px solid #F98407; text-align: center; padding: 2em; width: 10em; height: 10em; border-radius: 100%; margin: auto;">مرحبا بكم في موقعي</div> |
صندوق محتوى نصي بحدود ذات زوايا مستديرة border-radius:
border-radius: 10px 100px / 120px
نجيب محفوظ
|
1 |
<div style="border: 1px solid; border-radius: 10px 100px / 120px; color: #92a3c5;"> <span style="color: #000080;"> هنا تكتب المحتوى !</span> </div> |
صندوق محتوى نصي بحدود ذات زوايا مستديرة border-radius:
border-radius: 50% 20% / 10% 40%
نجيب محفوظ
|
1 |
<div style="border: 1px solid; border-radius: 50% 20% / 10% 40%; color: #92a3c5;"> <span style="color: #000080;"> هنا تكتب المحتوى !</span> </div> |
صندوق محتوى نصي بحدود ذات زوايا مستديرة border-radius:
border-radius: 10% / 50%
نجيب محفوظ
الكــود:
|
1 |
<div style="border: 1px solid; border-radius: 10% / 50%; color: #92a3c5;"> <span style="color: #000080;"> هنا تكتب المحتوى !</span> </div> |
زوايا مستديرة لحدود يسار صناديق المحتوى النصي في ووردبريس
border-top-left-radius
يمكننا أن نتحكم في زوايا الحدود فقط بتغيير قيمة border-radius . ولتطبيق النماذج التي سأعرضها الآن يمكنك نقل نفس الكود الموجود في النمادج السابقة ثم تقوم بتغيير قيمة الحدود كما سيأتي:
border-top-left-radius: 80px 80px
نجيب محفوظ
border-top-left-radius: 250px 100px
نجيب محفوظ
border-top-left-radius: 50%
نجيب محفوظ
زوايا مستديرة لحدود يمين صناديق المحتوى النصي في ووردبريس
border-top-right-radius
سنتبع نفس الطريقة السابقة، لكن هذه المرة سنغير في قيمة الزاوية اليمنى:
border-top-right-radius: 80px 80px
نجيب محفوظ
border-top-right-radius: 250px 100px
نجيب محفوظ
border-top-right-radius: 50%
نجيب محفوظ
زوايا مستديرة للحدود السُّفلى يمين ويسار صناديق المحتوى النصي في ووردبريس
border-bottom-left-radius
border-bottom-right-radius
تحدد الخاصية border-bottom زاوية الحدود السفلية ، اليمنى و اليسرى لصناديق المحتوى النصي . تتغير أبعاد الزاوية بتغيير قيمة border-radius . كما سنرى:
قم فقط بتغيير الاتجاه left أو right أو تغيير قيمة الزوايا border-raduis .
border-bottom-left-radius: 80px 80px
نجيب محفوظ
border-bottom-right-radius: 250px 100px
نجيب محفوظ
border-bottom-left-radius: 50%
نجيب محفوظ
border-radius: 0px 0px 50px 50px
نجيب محفوظ
border-radius: 50px 50px 0px 0px
نجيب محفوظ
border-radius: 0px 50px 50px 0px
نجيب محفوظ
border-radius: 50px 0px 0px 50px
نجيب محفوظ
border-radius: 50px 50px 0px 50px
نجيب محفوظ
border-radius: 50px 0px 50px 50px
نجيب محفوظ
Jabism.com
إكتشف أنّك بحاجة لهذا الموقع، كي تتَعَلَّمْ كيف تبني موقعك بنفسك !
باقة من أفضل مقالات ووردبريس ودورات في HTML5 و CSS3 طموحاتنا كبيرة، و أهدافنا مركزة، و آمالنا إرضاءكم
الحدود الدائرية border-radius في مقالات ووردبريس
كيفية إضافة لون أو صورة لخلفية العناصر
لابد أنك قد لاحظت وجود خلفيات للعناصر التي قدمتها خلال هذا الدرس، وهذه الخلفيات، إما عبارة عن لون أو صورة.
لون الخلفية:
هذا نموذج لخلفية باللون الأزرق، ولك أن تغيرها باللون الدي يناسبك:
الكــود:
|
1 |
<div style="border: solid 2px orange; background-color: blue;"> خلفية هذا العنصر باللون الأزرق ويمكنك تغيير اللون بما يناسبك</div> |
صورة الخلفية:
هذا نموذج للخلفية بالصورة، ولك أن تغيرها بالصورة التي تناسبك:
الكــود:
|
1 |
<div style="border: solid 2px orange; background-image: url('https://www...../chatte.jpg');"><span style="color: #ffffff; font-size: 24px;"> خلفية هذا العنصر بصورة القط ويمكنك تغيير الصورة بما يناسبك</span></div> |
تغيير الحدود للصور باستخدام border-radius
حدود عادية: border
|
1 |
<img class="size-full wp-image-11148 aligncenter" style="border-radius: 50% 20% / 10% 40%; border: solid 2px #4796B3;" src="https://www.jabism.com/wp-content/uploads/2021/02/auto-education.jpg" alt="" width="400" height="266" /> |
border-radius: 50% 20% / 10% 40%
إذا كانت الصورة لها تقريباً نفس الأبعاد ، فإنها تظهر على شكل دائرة تماماً . مثال 
:
border-radius: 100%
border-radius: 10% 30% 50% 70%
border-radius: 50% 20% / 10% 40%
أي سؤال، إطرحوه في التعليقات، وستجدون عبدالرحيم رهن إشارتكم.
≡ عثرت على موقع يقدم خدمة توليد قيم الحدود الدائرية بطريقة مدهشة ، قوموا باكتشافه فهو يستحق ذلك:
في أمان الله
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.