الحدود الدائرية border-radius في مقالات ووردبريس


إنشاء صناديق المحتوى النصي بزوايا مستديرة border-radius في الووردبريس باستخدام CSS وبدون مكونات إضافية

تمهيد: كنت أتفرج في أحد القنوات الفضائية لبرنامج بعنوان كوكب اليابان .. وكانت الحلقة تدور حول إقبال اليابانيين على القراءة. وفي أحد فصول الحلقة، دخل مقدم البرنامج  إلى مكتبة من تسع طوابق، وأثناء تجواله داخلها ، بدأ يتصفح بعض الكتب فيجدها كلها عبارة عن نصوص تتخللها رسوم وصور تفتج الشهية للقراءة. لذلك فإن اليابانيين يقبلون أكثر على قراءة الكتب المصورة لأنها شيقة وممتعة .  فخطرت لي فكرة عن المواقع التي يفتقر محتواها للصور  وأدوات التجميل، فإنها لا تحضى في الغالب بزيارات كثيرة مقارنة بالتي تزينها الصور والرسومات. الصورة والألوان اليوم، أصبحت لغةً لا يمكن تجاوزها في العالم الرقمي.

 

تعلم أيضاً كيفية  استخدام HTML و CSS في الووردبريس

الحدود الدائرية border-radius في مقالات ووردبريس

المقدمـة: صراحة، أفكار درس هذا اليوم تهاجمني من كل جانب، ومثل هذه الصناديق لها مكونات إضافية خاصة في الووردبريس . وبما أن ووردبريس يتميز بالمرونة في استخدام لغتَيْ HTML وCSS، فإن المجال يبقى مفتوحاً على مصراعيه لتحسين مظهر وبنية مقالاتك التي تكتبها . فالتدوينات التي تتخللها فواصل إما خط أفقي أو أيقونات، صور أو صناديق المحتوى، تُشجع أو ترغم القارئ على الاستمرار في القراءة إلى النهاية دون أن يشعر بالملل.  فإذا كنت أيها القارئ الكريم من هواة التدوين في مدونتك المُنصبةً على نظام الووردبرس ، فإن مقالتي هذه فرصة لك لتعلم كيفية تحسين مظهر مقالاتك و تدويناتك التي تكتبها في أي مجال،

إقرأ أيضاً:

كما ذكرت في مقالات عديدة أن المدونات الناجحة تكون ذات محتوى جيّد ومُميز مع مراعاة بنية النص  وتنسيقه وتجميل مظهره لأن الاهتمام بالشكل الأنيق والمظهر الجميل يثير اهتمام القارئ ويُسَهِّل عليه الانتقال بين الفقرات بكل سلاسة وأريحية . أما النّصوص الغير المرتبه فإنها تُـنَفِّرُ القارئ حتى في وجود محتوى مفيد. إذن من هذا الجانب يبدأ الاحتراف.

أساسيات BORDER-RADIUS

تسمح لك خاصية border-radius بتحديد الزوايا الدائرية لحدود العنصر. يتم تعريف الانحناء في كل زاوية بنصف قطر واحد أو اثنين من الانحناء الذي يحدد قوساً لدائرة أو قوساً من القطع الناقص.

مرحبا بكم في موقعي
Jabism.com
إكتشف أنّك بحاجة لهذا الموقع، كي تتَعَلَّمْ كيف تبني موقعك بنفسك !
باقة من أفضل مقالات ووردبريس ودورات في HTML5 و CSS3 طموحاتنا كبيرة، و أهدافنا مركزة، و آمالنا إرضاءكم

نموذج لصناديق المحتوى في ووردبريس باستخدام HTML وCSS

قبل الاستمرار إقرأ ما سيساعدك على التطبيق:  خاصية Padding في CSS


دون أن أطيل، سأعرض الآن بعض صناديق المحتوى في ووردبريس مع إدراج كود لكل علبة ، ويمكنك نسخه ولصقه في مقالاتك مع إمكانية التعديل عليه من حيث الشكل والألوان. لكن قبل ذلك أدعوكم إلى زيارة مقالة: كيفية تعديل CSS في ووردبريس

وهذه بعض مقتطفات الأكواد التي يتم بها تحسين المظهر المرئي لموقع ووردبريس.

كما تعلمنا في دروس CSS ، أنه يمكننا دمج CSS داخل HTML  باستخدام الوسم  <style> … ورغم أن المبرمجون بدأوا يتجنبون هذا السلوك إلا أنه معمول به في صفحات HTML . وهذا ما سنطبقة في أكواد موضوعنا اليوم:

   صندوق محتوى نصي بحدود border عادي:

  بمجرد أن تخطئ، سينسى الجميع أنك كنت رائعاً يوماً ما !
    نجيب محفوظ

 

  صندوق محتوى نصي بحدود ذات زوايا مستديرة border-radius:
border-radius: 20px
  بمجرد أن تخطئ، سينسى الجميع أنك كنت رائعاً يوماً ما !
    نجيب محفوظ

الكود:

 


صندوق محتوى نصي بحدود ذات زوايا مستديرة border-radius:

border-radius: 25% 10%

  بمجرد أن تخطئ، سينسى الجميع أنك كنت رائعاً يوماً ما !
    نجيب محفوظ

الكـــود:

صندوق محتوى نصي بحدود ذات زوايا مستديرة border-radius:

border-radius: 10% 30% 50% 70%

بمجرد أن تخطئ، سينسى الجميع أنك كنت رائعاً يوماً ما !
    نجيب محفوظ

الكـــود:

صندوق محتوى نصي بحدود ذات زوايا مستديرة border-radius:

border-radius: 100%

مرحبا بكم في موقعي
Jabism.com
إكتشف أنّك بحاجة لهذا الموقع، كي تتَعَلَّمْ كيف تبني موقعك بنفسك !
باقة من أفضل مقالات ووردبريس ودورات في HTML5 و CSS3 طموحاتنا كبيرة، و أهدافنا مركزة، و آمالنا إرضاءكم

الحدود الدائرية border-radius في مقالات ووردبريس

الكـــود:

صندوق محتوى نصي بحدود ذات زوايا مستديرة border-radius:

border-radius: 10px 100px / 120px

بمجرد أن تخطئ، سينسى الجميع أنك كنت رائعاً يوماً ما !
    نجيب محفوظ
الكــــود:

صندوق محتوى نصي بحدود ذات زوايا مستديرة border-radius:

border-radius: 50% 20% / 10% 40%

بمجرد أن تخطئ، سينسى الجميع أنك كنت رائعاً يوماً ما !
    نجيب محفوظ
الكــــود: 
صندوق محتوى نصي بحدود ذات زوايا مستديرة border-radius:

border-radius: 10% / 50%

♦بمجرد أن تخطئ، سينسى الجميع أنك كنت رائعاً يوماً ما !
    نجيب محفوظ

الكــود:

زوايا مستديرة لحدود يسار صناديق المحتوى النصي في ووردبريس

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 50px 0px 50px

بمجرد أن تخطئ، سينسى الجميع أنك كنت رائعاً يوماً ما !
نجيب محفوظ
 
مرحبا بكم في موقعي
Jabism.com
إكتشف أنّك بحاجة لهذا الموقع، كي تتَعَلَّمْ كيف تبني موقعك بنفسك !
باقة من أفضل مقالات ووردبريس ودورات في HTML5 و CSS3 طموحاتنا كبيرة، و أهدافنا مركزة، و آمالنا إرضاءكم

 

الحدود الدائرية border-radius في مقالات ووردبريس

كيفية إضافة لون أو صورة لخلفية العناصر

لابد أنك قد لاحظت وجود خلفيات للعناصر التي قدمتها خلال هذا الدرس، وهذه الخلفيات، إما عبارة عن لون أو صورة.

لون الخلفية:

هذا نموذج لخلفية باللون الأزرق، ولك أن تغيرها باللون الدي يناسبك:

خلفية هذا العنصر باللون الأزرق ويمكنك تغيير اللون بما يناسبك

الكــود: 

صورة الخلفية:

هذا نموذج للخلفية بالصورة، ولك أن تغيرها بالصورة التي تناسبك:

خلفية هذا العنصر بصورة القط ويمكنك تغيير الصورة بما يناسبك

الكــود: 

 

تغيير الحدود للصور باستخدام border-radius

حدود عادية: border

حدود عادية للصورة

 
تطبيق border-radius على الصورة:
الكــود:
إستعمل هذا الكود في جميع الأمثلة  التي سأعرضها تحت. فقط يجب تغيير قيمة border-radius بما يناسب. تجدون القيم فوق كل نموذج.
 

border-radius: 50% 20% / 10% 40%

حدود دائرية للصورة

 
border-radius: 10% 30% 50% 70%
حدود دائرية للصورة
 
border-radius: 100%
حدود دائرية للصورة

 

إذا كانت الصورة لها تقريباً نفس الأبعاد ، فإنها تظهر على شكل دائرة تماماً . مثال :

border-radius: 100%

حدود دائرية لصورة عبدالرحيم

 

border-radius: 10% 30% 50% 70%

حدود دائرية لصورة عبدالرحيم

 

border-radius: 50% 20% / 10% 40%

حدود دائرية لصورة عبدالرحيم

أي سؤال، إطرحوه في التعليقات، وستجدون عبدالرحيم رهن إشارتكم.

في أمان الله

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقًا

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

عدد المشاهدات لهذه المقالة : 21
انتقل إلى أعلى
%d مدونون معجبون بهذه: