الصور العائمة les images flottants

 الصور العائمة les images flottants

 كيفية إدراج  الصور العائمة les images flottants ب CSS3

قد يعجبك شكلها، حين تراها على مواقع الويب، و لكنك لا تعرف كيف يتم تنسيقها بهذا الشكل 😯 . أنا أتكلم عن الصور العائمة حول النص.

إنَّ لِ CSS خواص تـتيح لعناصر أن تطفو  حول النص. و من بين هاته العناصر الصور، و لك أن تشاهد المثال كي تفهم عما نتكلم:

الصور العائمة les images flottants

صورة عائمة حول النص جهة اليمين

كما ترى ، الطريقة جد جميلة لجعل الصورة تطفو حول النص، و لك أن تختار المكان المناسب، يمين أو يسار 😆 

لذلك سنستعمل خاصية الطوفان بالإنجليزية : float  بالإضافة إلى القيم التالية :

left: سوف يطفو العنصر إلى يسار اللنص.

right: سوف يطفو العنصر إلى يمين اللنص

الآن بدأت تتضح الفكرة، فقط علينا استخدام  العناصر الطَّائفة بإضافة  float إلى قيمتها التي تختار ثم نكتب النص الذي نريد. 

🍎 تطبيق طَفْوُ الصورة حول النص

هـا نحن وصلنا إلى حجرة التطبيقات .  أول ما نبدأ به كالعادة هو كتابة شفرة HTML :

 

نغير رابط الصورة  بالذي عندك ثم تكتب النص الذي تريد ، وبعدها سجل النص بامتداد HTML.

إكتشف دروس لغة CSS3

و ننتقل الآن إلى ملف CSS   ، و لأننا نريد للصورة أن تطفو جهة اليمين من النص فإننا نكتب التالي:

و يمكنك أيضاً تعويم الصورة جهة اليسار وذلك بتغيير القيمة right إلى  left !

🎲 وقف طفو الصورة العائمة

أحياناً يظهر لك أن الصورة العائمة  ترتدي النص كله أو جزءً منه ! وأنت تريد للكتابة  أن تتحرر من حول الصورة  و تأخذ مكانها تحت. 

قد تراودك فكرة استعمال الرمز  <br /> عدة مرات كي تصل إلى أسفل الصورة، و هذا سيكون بَشعاً للغاية.

فما الحل إذن  و نحن نريد أن تكون لنا هاته النتيجة؟ :

هنا يتجاهل النص الموجود أسفل الصورة خاصية float

جدير بالذكر أن  CSS يتوفر على خاصية تسمح لنا بتوقيف خاصية float لينتقل النص تحت الصورة، إنها خاصية clear  التي بدورها تستخدم ثلاث قيم :

right : يندرج النص تحت الصورة  بعد توقيف float: right;

left : يندرج النص تحت الصورة  بعد توقيف  float: left;

both: يندرج النص تحت الصورة  بعد توقيف كلا  الاتجاهين: سواء  float: right;  أو float: left;.

و لكن لتبسيط الأمور، سنستعمل دائماً clear: both لأنها ستنوب عن كل القيم ! 🙂 

فالنجرب إذن باستخدام كود HTML أولاً:

 

♦ الصور العائمة les images flottants

غير مسار صورتك في الشفيرة.

و هذا كود CSS:

 

 

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

اترك تعليقاً

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

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 445 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

47 عدد المشاهدات لهذا المحتوى
Scroll to Top