انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 64
دورة لغة CSS

الصور في لغة CSSCSS Images

سوف تتعلم في هذا الدرس كيفية التحكم في الصور الموجودة بداخل صفحة الويب باستخدام عدة خواص مختلفة مثل (height , width , margin , borders , opacity ) في لغة CSS.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
14
الأمثلة
9
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
22,502
محتوى الدرس
في هذا الدرس 14تصفّح المواضيع

CSS Image Style التحكم في شكل الصور في لغة CSS

عن طريق لغة CSS يمكن التتحكم في الصور بأكثر من خاصية:

  • طول الصورة عن طريق خاصية height.
  • عرض الصورة عن طريق خاصية width.
  • شفافية الصور عن طريق خاصية opacity.
  • هوامش حول الصور عن طريق خاصية margin. 
  • اضافة إطارات خارجية عن طريق خاصية border.
  • اضافة مساحات فارغة حول الصور بواسطة خاصية padding.
  • اضافة نصوص فوق الصورة باستخدام خاصية position.
  • دوران إطار الصورة الخارجي عن طريق خاصية border-radius.
  • عرض الصورة بشكل thumbnail بإطار خارجي عن طريق خاصية border.
  • التحكم في تجاوب الصورة علي حسب حجم الجهاز عن عن طريق خاصية height وخاصية width.
  • التحكم في اضافة تأثيرات وهمية على الصور مثل التعديل في درجة اللون عن طريق خاصية filter
  • محاذاة الصور داخل صفحة الويب سواء كانت يمين الصفحة أو يسار الصفحة أو منتصف الصفحة عن طريق خاصية align.

CSS Center an Image توسيط الصورة في لغة CSS

لعمل صور في المنتصف في لغة CSS يجب إستخدام خاصية display:block وخاصية margin:auto أو margin-left:auto مع margin-right:auto.

جرّب بنفسك
HTML 
img 
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width:200px;
}
جرّب بنفسك

CSS Rounded Images الصورة الدائرية في لغة CSS

التحكم في تدوير الصور وزوايا الصور في لغة CSS عن طريق خاصية border-radius ويمكن تكبير التدوير وتصغيره عن طريق قيمة الخاصية.

جرّب بنفسك
جرّب بنفسك

CSS Thumbnail Images الصور مع إطارات خارجية في لغة CSS

التحكم إطارات الصور الخارجية في لغة CSS عن طريق خاصية border ويمكن عمل صور مع روابط لها إطار خارجي.

CSS Thumbnail Images

صورة صغيرة تعطي ملخص عن منتج أو شخص مربعة في لغة CSS.

جرّب بنفسك

CSS Thumbnail Images link

صورة صغيرة تعطي ملخص عن منتج أو شخص مربعة في لغة CSS مع رابط.

جرّب بنفسك

CSS opacity number خاصية opacity مع القيمة number في لغة 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.

جرّب بنفسك

CSS opacity with hover خاصية opacity مع hover في لغة CSS

تستخدم خاصية opacity مع hover في لغة css لتغيير قيمة opacity عند الوقوف علي العنصر ليتغير شكل العنصر بطريقة جذابة.

جرّب بنفسك
جرّب بنفسك
جرّب بنفسك

CSS opacity with hover

خاصية opacity مع hover في لغة CSS.

HTML 
img:hover
{
  opacity: 1.0;
}
جرّب بنفسك

CSS Responsive Images صورة متجاوبه مع جميع الأجهزة في لغة CSS

الصور المتجاوبة التي تم ضبطها بواسطة CSS والطول تلقائي تتمدد وتنكمش علي حسب حجم الشاشة قم بتصغير حجم نافذة المتصفح لتكتشف تجاوب الصور.

جرّب بنفسك
HTML 
img {
  max-width: 100%;
  height: auto;
}
جرّب بنفسك

CSS Polaroid Images - Cards صور البطاقات بلغة CSS

يمكن عمل صندوق متكامل به عنوان ووصف وصورة يسمي cards صندوق البطاقة يمكن أن يُعرض لداخلة بيانات مُنتج أو بيانات شخصية أو معلومات عن السيارات الخ.

CSS Polaroid Images - Cards

صور البطاقات بلغة CSS.

HTML 
.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 Image Text نصوص الصور في لغة CSS

في لغة CSS يمكن وضع نصوص توضيحية أعلي الصور يمكن أن تظهر هذة النصوص مباشرة أو ممكن أن تظهر عند تمرير زر mouse أعلي الصورة.

جرّب بنفسك
جرّب بنفسك

CSS Image Text

نصوص أعلي الصورة في لغة CSS.

HTML 
img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
جرّب بنفسك

CSS Image Filters خاصية filter في لغة CSS

خاصية filter في لغة CSS تُضيف تأثيرات وهمية على الصور مثل التعديل في درجة اللون والسطوع وتغيير الصور من لوان أبيض إلي لون أسود ومن لون أسود إلي أبيض.

جرّب بنفسك

CSS Image Filters

خاصية filter في لغة CSS.

HTML 
.blur
{
filter: blur(4px);
}
جرّب بنفسك

CSS Image Hover Overlay صندوق معلومات الصور في لغة 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 an Image صور عكسية في لغة CSS

في لغة CSS يمكن تغيير إتجاه الصورة عن طريق خاصية flip يمكن أن تتغير عن طريق الزوايا 90 درجة أو أقل أو أكثر.

move mouse

قم بتحريك الماوس على الصورة سوف يتغير اتجاه الصورة.

جرّب بنفسك

CSS Flip an Image

HTML 
img:hover
{
  transform: scaleX(-1);
}
جرّب بنفسك

CSS Image Reflection إنعكاس الصور في لغة CSS

عن طريق خاصية box-reflect لأنعكاس الصورة في لغة CSS وإنعكاس الصورة يعني أن تتكرر الصورة مرة ثانية والتحكم في تكررارها بطريقة مختلفة وهو ان تظهر الصورة ولها ظل.


قيم خاصية box-reflect في لغة CSS:

  • below
  • above
  • left
  • right
جرّب بنفسك

CSS Image Reflection

إنعكاس الصور في لغة CSS.

HTML 
img
{
  -webkit-box-reflect: right 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}
جرّب بنفسك

CSS Image Opacity شفافية الصور في لغة CSS

عن طريق خاصية opacity تستطيع التحكم في شفافية وضوح الصور وعن طريق القيمة الخاصة بها يمكن التحكم في درجة وضوح الصور ودرجة وضوع الصورة تبدأ من 0.1 الي 0.9 والقيمة 0.1 اقل قيمه وهي تتسبب في عدم وضوح الصور.

جرّب بنفسك

CSS Image Opacity

شفافية الصور في لغة CSS.

HTML 
img 
{
  opacity:0.4;
  width:100%
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات30

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 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

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 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>
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

2أسئلة 1أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي2 أسئلة تنتظرك
01

ماهي الخاصية التي نستخدمها مع الصور لجعلها دائرية ؟

02

ماهي الخاصية التي تمكننا من التحكم في مدي وضوع الصورة ؟