في هذا الدرس 14تصفّح المواضيع
عن طريق لغة CSS يمكن التتحكم في الصور بأكثر من خاصية:
- طول الصورة عن طريق خاصية height.
- عرض الصورة عن طريق خاصية width.
- شفافية الصور عن طريق خاصية opacity.
- هوامش حول الصور عن طريق خاصية margin.
- اضافة إطارات خارجية عن طريق خاصية border.
- اضافة مساحات فارغة حول الصور بواسطة خاصية padding.
- اضافة نصوص فوق الصورة باستخدام خاصية position.
- دوران إطار الصورة الخارجي عن طريق خاصية border-radius.
- عرض الصورة بشكل thumbnail بإطار خارجي عن طريق خاصية border.
- التحكم في تجاوب الصورة علي حسب حجم الجهاز عن عن طريق خاصية height وخاصية width.
- التحكم في اضافة تأثيرات وهمية على الصور مثل التعديل في درجة اللون عن طريق خاصية filter
- محاذاة الصور داخل صفحة الويب سواء كانت يمين الصفحة أو يسار الصفحة أو منتصف الصفحة عن طريق خاصية align.
لعمل صور في المنتصف في لغة CSS يجب إستخدام خاصية display:block وخاصية margin:auto أو margin-left:auto مع margin-right:auto.
التحكم في تدوير الصور وزوايا الصور في لغة CSS عن طريق خاصية border-radius ويمكن تكبير التدوير وتصغيره عن طريق قيمة الخاصية.
التحكم إطارات الصور الخارجية في لغة CSS عن طريق خاصية border ويمكن عمل صور مع روابط لها إطار خارجي.
CSS Thumbnail Images
صورة صغيرة تعطي ملخص عن منتج أو شخص مربعة في لغة CSS.
CSS Thumbnail Images link
صورة صغيرة تعطي ملخص عن منتج أو شخص مربعة في لغة CSS مع رابط.
تُستخدم خاصية opacity مع القيمة number في لغة CSS للتحكم في درجة شفافية الصور والعناصر والخلفيات.
CSS Opacity 0.1
خاصية opacity مع القيمة 0.1 في لغة CSS.
CSS Opacity 0.3
خاصية opacity مع القيمة 0.3 في لغة CSS.
CSS Opacity 0.5
خاصية opacity مع القيمة0.5 في لغة CSS.
CSS Opacity 0.7
خاصية opacity مع القيمة 0.7 في لغة CSS.
CSS Opacity 1
خاصية opacity مع القيمة 1 في لغة CSS.
تستخدم خاصية opacity مع hover في لغة css لتغيير قيمة opacity عند الوقوف علي العنصر ليتغير شكل العنصر بطريقة جذابة.
CSS opacity with hover
خاصية opacity مع hover في لغة CSS.
الصور المتجاوبة التي تم ضبطها بواسطة CSS والطول تلقائي تتمدد وتنكمش علي حسب حجم الشاشة قم بتصغير حجم نافذة المتصفح لتكتشف تجاوب الصور.
CSS Polaroid Images - Cards
صور البطاقات بلغة CSS.
.polaroid
{
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}في لغة CSS يمكن وضع نصوص توضيحية أعلي الصور يمكن أن تظهر هذة النصوص مباشرة أو ممكن أن تظهر عند تمرير زر mouse أعلي الصورة.
CSS Image Text
نصوص أعلي الصورة في لغة CSS.
خاصية filter في لغة CSS تُضيف تأثيرات وهمية على الصور مثل التعديل في درجة اللون والسطوع وتغيير الصور من لوان أبيض إلي لون أسود ومن لون أسود إلي أبيض.
CSS Image Filters
خاصية filter في لغة CSS.
يمكن عمل صندوق معلومات يظهر فقط عند تمرير مؤشر mouse علي الصور يمكن التحكم في ألوان هذا الصندوق وحجمة وطريقة عرضة في في لغة CSS.
CSS image hover overlay fade top
ظهور صندوق معلومات وإخفاؤه من أعلي في لغة CSS.
CSS image hover overlay fade opacity
ظهور صندوق معلومات وإخفاؤه مع الشفافية في لغة CSS.
CSS image hover overlay fade
ظهور صندوق معلومات وإخفاؤه في لغة CSS.
CSS image hover overlay right
ظهور صندوق معلومات وإخفاؤه من اليمين في لغة CSS.
CSS image hover overlay left
ظهور صندوق معلومات وإخفاؤه من اليسار في لغة CSS.
CSS image hover overlay bottom
ظهور صندوق معلومات وإخفاؤه من أسفل في لغة CSS.
في لغة CSS يمكن تغيير إتجاه الصورة عن طريق خاصية flip يمكن أن تتغير عن طريق الزوايا 90 درجة أو أقل أو أكثر.
move mouse
قم بتحريك الماوس على الصورة سوف يتغير اتجاه الصورة.
CSS Flip an Image
عن طريق خاصية box-reflect لأنعكاس الصورة في لغة CSS وإنعكاس الصورة يعني أن تتكرر الصورة مرة ثانية والتحكم في تكررارها بطريقة مختلفة وهو ان تظهر الصورة ولها ظل.
قيم خاصية box-reflect في لغة CSS:
- below
- above
- left
- right
CSS Image Reflection
إنعكاس الصور في لغة CSS.
img
{
-webkit-box-reflect: right 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}عن طريق خاصية opacity تستطيع التحكم في شفافية وضوح الصور وعن طريق القيمة الخاصة بها يمكن التحكم في درجة وضوح الصور ودرجة وضوع الصورة تبدأ من 0.1 الي 0.9 والقيمة 0.1 اقل قيمه وهي تتسبب في عدم وضوح الصور.
CSS Image Opacity
شفافية الصور في لغة CSS.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات30
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Images صور
- للمراجعة
- 02 Opacity مستوي الشفافية
- للمراجعة
- 03 Borders حدود
- للمراجعة
- 04 Margin هامش
- للمراجعة
- 05 Width عرض
- للمراجعة
- 06 Height ارتفاع
- للمراجعة
- 07 Style نمط أو شكل
- للمراجعة
- 08 Property خاصية
- للمراجعة
- 09 Thumbnail حجم مصغر / رؤية مصغرة
- للمراجعة
- 10 Align محاذاة
- للمراجعة
- 11 Padding حشو
- للمراجعة
- 12 Radius منتصف القطر / الكوع الجانبي
- للمراجعة
- 13 Position موقع / وضعية
- للمراجعة
- 14 Rounded مدور / دائري
- للمراجعة
- 15 Value قيمة
- للمراجعة
- 16 Responsive متجاوب
- للمراجعة
- 17 Center في المنتصف
- للمراجعة
- 18 Right يمين
- للمراجعة
- 19 Left يسار
- للمراجعة
- 20 Auto آلي
- للمراجعة
- 21 Filter منقي / تنقية
- للمراجعة
- 22 Cards بطاقات
- للمراجعة
- 23 Transparent شفافية
- للمراجعة
- 24 Text نص
- للمراجعة
- 25 Overlay تركيب
- للمراجعة
- 26 Flip عكسي
- للمراجعة
- 27 Reflection إنعكاس
- للمراجعة
- 28 Box صندوق
- للمراجعة
- 29 Above فوق
- للمراجعة
- 30 Below تحت
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
- 02 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.