الصور العائمة les images flottants
كيفية إدراج الصور العائمة les images flottants ب CSS3
قد يعجبك شكلها، حين تراها على مواقع الويب، و لكنك لا تعرف كيف يتم تنسيقها بهذا الشكل 😯 . أنا أتكلم عن الصور العائمة حول النص.
إنَّ لِ CSS خواص تـتيح لعناصر أن تطفو حول النص. و من بين هاته العناصر الصور، و لك أن تشاهد المثال كي تفهم عما نتكلم:
الصور العائمة les images flottants
صورة عائمة حول النص جهة اليمين
كما ترى ، الطريقة جد جميلة لجعل الصورة تطفو حول النص، و لك أن تختار المكان المناسب، يمين أو يسار 😆
لذلك سنستعمل خاصية الطوفان بالإنجليزية : float بالإضافة إلى القيم التالية :
left: سوف يطفو العنصر إلى يسار اللنص.
right: سوف يطفو العنصر إلى يمين اللنص
الآن بدأت تتضح الفكرة، فقط علينا استخدام العناصر الطَّائفة بإضافة float إلى قيمتها التي تختار ثم نكتب النص الذي نريد.
🍎 تطبيق طَفْوُ الصورة حول النص
هـا نحن وصلنا إلى حجرة التطبيقات . أول ما نبدأ به كالعادة هو كتابة شفرة HTML :
|
1 |
<p><img src="logo-jabism.png" class="imageflottante" alt="Image flottante" /> هنا سنكتب النص بشكل عادي و دون الاهتمام بما سيحدث للصورة </p> |
نغير رابط الصورة بالذي عندك ثم تكتب النص الذي تريد ، وبعدها سجل النص بامتداد HTML.
و ننتقل الآن إلى ملف CSS ، و لأننا نريد للصورة أن تطفو جهة اليمين من النص فإننا نكتب التالي:
|
1 2 3 4 |
.imageflottante { float: right; } |
و يمكنك أيضاً تعويم الصورة جهة اليسار وذلك بتغيير القيمة right إلى left !
🎲 وقف طفو الصورة العائمة
أحياناً يظهر لك أن الصورة العائمة ترتدي النص كله أو جزءً منه ! وأنت تريد للكتابة أن تتحرر من حول الصورة و تأخذ مكانها تحت.
قد تراودك فكرة استعمال الرمز <br /> عدة مرات كي تصل إلى أسفل الصورة، و هذا سيكون بَشعاً للغاية.
فما الحل إذن و نحن نريد أن تكون لنا هاته النتيجة؟ :
هنا يتجاهل النص الموجود أسفل الصورة خاصية float
جدير بالذكر أن CSS يتوفر على خاصية تسمح لنا بتوقيف خاصية float لينتقل النص تحت الصورة، إنها خاصية clear التي بدورها تستخدم ثلاث قيم :
right : يندرج النص تحت الصورة بعد توقيف float: right;
left : يندرج النص تحت الصورة بعد توقيف float: left;
both: يندرج النص تحت الصورة بعد توقيف كلا الاتجاهين: سواء float: right; أو float: left;.
و لكن لتبسيط الأمور، سنستعمل دائماً clear: both لأنها ستنوب عن كل القيم ! 🙂
فالنجرب إذن باستخدام كود HTML أولاً:
|
1 2 3 |
<p><img src="log-jabism" class="imageflottante" alt="Image flottante" /></p> <p> هنا سنكتب النص بجانب الصورة العائمة.</p> <p class="dessous">هنا سنكتب النص الذي يظهر تحت الصورة العائمة.</p> |
♦ الصور العائمة les images flottants
غير مسار صورتك في الشفيرة.
و هذا كود CSS:
|
1 2 3 4 5 6 7 8 |
.imageflottante { float: left; } .dessous { clear: both; } |
كما تابعنا فوق فإن clear: both; تحد من خاصية float و تجعل النص يُكْتَبُ تحت الصورة العائمة.
الرجوع لقائمة المزيد من تنسيقات النصوصالصور العائمة les images flottants
<
p style=”border: 0px solid; color: #f9aaa7; background-color: #fff; font-size: 15px; margin-right: 30px; border-right: 15px solid #836E70; padding-right: 8px; padding-left: 8px; margin-left: 30px;”>شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.