تعلمنا فى كورس ال CSS كيف يمكننا عمل ورسم إطار او حدود لعناصر ال HTML داخل الموقع، بإستخدام خاصية border. وقمنا بشرح تلك الخاصيه بالتفصيل فى الدرس السابع من دروس دورة ال CSS .
أيضا شرحنا كيف يمكن عمل حواف دائريه بإستخدام خاصية border-radius ، فمثلا لعمل حواف دائريه لعنصر من جميع الاتجاهات ( أعلى اليمين، أعلى اليسار، أسفل اليمين و أسفل اليسار) مثل الصوره التاليه، نستخدم خاصية border-radius كما هو موضح فى الكود أسفل الصوره.
لكن ،
اليوم سنتعرف على خدعه يمكننا بها عمل حدود دائريه للعنصر من جميع الاتجاهات بإستخدام خاصيه border-radius لكن سوف نجعل الحدود الدائريه تظهر فقط فى أعلى يمين العنصر وأعلى يساره بدون استخدام border-top-right ولا border-top-left .
الخدعه فكرتها بسيطه جداا وهى أننا سوف نقوم بعمل div داخل الديف الذى نريد عمل حواف دائريه لها من الجهه العلويه فقط، ونجعل هذا ال div الذى بداخله فى نهاية او فى قاع الديف الكبير، بحيث يغطى على الحواف الدائريه الموجوده فى الجهه السفليه للعنصر وبذلك تظهر الحواف الدائريه الموجوده فى الجهه العلويه فقط،
لكن كيف نقوم بجعل العنصر يتمركز بادخل الديف الكبير وتنطبق حدوده السفليه على حدود الديف الكبير ؟!
لعمل ذلك،
نقوم بإنشاء الديف الكبير بإستخدام وسم div وبداخله نقوم بإضافة ديف أخر باستخدام وسم div أخر، نعطى الديف الكبير Class وليكن big والديف الصغير نعطيه Class وليكن small .
بالنسبه للديف الكبير، نقوم بإعطاءه width و height وخلفيه مناسبه، ونقوم بإعطاءه border-radius قيمتها 20 بكسل، سنجد ان الديف اصبح لديه حواف دائريه من الاربع جهات كما تلاحظ بالصوره ▼
بعد ذلك، نقوم بتنسيق الديف الصغير حتى نجعله يغطى الحواف الدائريه السفليه للديف الكبير،
فنقوم بإعطاءه width و height وخلفيه نفس لون خلفيه الديف الكبير، وحتى نجعله يغطى الحواف السفليه للديف الكبير، نقوم بإعطاءه قيمه absolute لخاصية position التى قمنا بشرحها فى الدرس العاشر، ونعطيه bottom:0 حتى نجعله يغطى الحواف السفليه للديف الكبير،
وبذلك تظهر فقط الحواف العلويه للديف الكبير وتختفى الحواف السفليه تحت الديف الصغير ولا تظهر فى الموقع. كما نشرى فى الشكل ▼
يتم إستخدام هذه الخدعه أحيانا فى بعض التصميمات، فقد قمت بتصميم مشروع موقع بسيط جدا لمطعم واستخدمت فيه هذه الخدعه لتتضح لك الامور أكثر :)
الجروب الخاص بمتابعة الكورس هنـــــــا
أيضا شرحنا كيف يمكن عمل حواف دائريه بإستخدام خاصية border-radius ، فمثلا لعمل حواف دائريه لعنصر من جميع الاتجاهات ( أعلى اليمين، أعلى اليسار، أسفل اليمين و أسفل اليسار) مثل الصوره التاليه، نستخدم خاصية border-radius كما هو موضح فى الكود أسفل الصوره.
{ ; div{ border-radius : 15pxولعمل حواف داشريه من أتجاه واحد فقط مثل عمل حواف دائريه من جهة أعلى اليمين وأعلى اليسار يمكننا استخدام خاصيه border-top-right-radius و border-top-left-radius ، كما هو موضح فى الكود التالى،
}div
; border-top-right-radius: 15px
; border-top-left-radius: 15px
}هذا كله أمر معتاد وخواص CSS متعارف عليها،
لكن ،
اليوم سنتعرف على خدعه يمكننا بها عمل حدود دائريه للعنصر من جميع الاتجاهات بإستخدام خاصيه border-radius لكن سوف نجعل الحدود الدائريه تظهر فقط فى أعلى يمين العنصر وأعلى يساره بدون استخدام border-top-right ولا border-top-left .
الخدعه فكرتها بسيطه جداا وهى أننا سوف نقوم بعمل div داخل الديف الذى نريد عمل حواف دائريه لها من الجهه العلويه فقط، ونجعل هذا ال div الذى بداخله فى نهاية او فى قاع الديف الكبير، بحيث يغطى على الحواف الدائريه الموجوده فى الجهه السفليه للعنصر وبذلك تظهر الحواف الدائريه الموجوده فى الجهه العلويه فقط،
لكن كيف نقوم بجعل العنصر يتمركز بادخل الديف الكبير وتنطبق حدوده السفليه على حدود الديف الكبير ؟!
لعمل ذلك،
نقوم بإنشاء الديف الكبير بإستخدام وسم div وبداخله نقوم بإضافة ديف أخر باستخدام وسم div أخر، نعطى الديف الكبير Class وليكن big والديف الصغير نعطيه Class وليكن small .
بالنسبه للديف الكبير، نقوم بإعطاءه width و height وخلفيه مناسبه، ونقوم بإعطاءه border-radius قيمتها 20 بكسل، سنجد ان الديف اصبح لديه حواف دائريه من الاربع جهات كما تلاحظ بالصوره ▼
< style >
}big.
; width:500px
; height:300px
; background:orange
; position:relative
; border-radius: 22px
{
< style >
<div class="big"><div class="small"> </div></div>
بعد ذلك، نقوم بتنسيق الديف الصغير حتى نجعله يغطى الحواف الدائريه السفليه للديف الكبير،
فنقوم بإعطاءه width و height وخلفيه نفس لون خلفيه الديف الكبير، وحتى نجعله يغطى الحواف السفليه للديف الكبير، نقوم بإعطاءه قيمه absolute لخاصية position التى قمنا بشرحها فى الدرس العاشر، ونعطيه bottom:0 حتى نجعله يغطى الحواف السفليه للديف الكبير،
وبذلك تظهر فقط الحواف العلويه للديف الكبير وتختفى الحواف السفليه تحت الديف الصغير ولا تظهر فى الموقع. كما نشرى فى الشكل ▼
}small.
; width:500px
;height:100px
; background:orange
; position:absolute
; bottom:0
{
يتم إستخدام هذه الخدعه أحيانا فى بعض التصميمات، فقد قمت بتصميم مشروع موقع بسيط جدا لمطعم واستخدمت فيه هذه الخدعه لتتضح لك الامور أكثر :)
الجروب الخاص بمتابعة الكورس هنـــــــا
محول الاكواد محول الأكواد اضافة الإبتسمات اضافة الإبتسمات