CSS

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

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

التاريخ

12 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

8989

المواضيع

24
الشروحات chevron_left CSS Images chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

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

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.

img:hover
{
  opacity: 1.0;
}

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

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

img {
  max-width: 100%;
  height: auto;
}

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

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

Cinque Terre

Norther Lights

Northern Lights

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

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

CSS Image Text

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

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}

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

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

CSS Image Filters

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

.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
img:hover
{
  transform: scaleX(-1);
}

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

عن طريق خاصية 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));
}

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

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

CSS Image Opacity

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

img 
{
  opacity:0.4;
  width:100%
}
مصطلحات الدرس
Images
Images

صور

Opacity
Opacity

مستوي الشفافية

Borders
Borders

حدود

Opacity
Opacity

مستوي الشفافية

Margin
Margin

هامش

Width
Width

عرض

Margin
Margin

هامش

Height
Height

ارتفاع

Style
Style

نمط أو شكل

Property
Property

خاصية

Thumbnail
Thumbnail

حجم مصغر / رؤية مصغرة

Align
Align

محاذاة

Radius
Radius

منتصف القطر / الكوع الجانبي

Radius
Radius

منتصف القطر / الكوع الجانبي

Position
Position

موقع / وضعية

Rounded
Rounded

مدور / دائري

Value
Value

قيمة

Responsive
Responsive

متجاوب

Center
Center

في المنتصف

Right
Right

يمين

Center
Center

في المنتصف

Left
Left

يسار

Auto
Auto

آلي

Filter
Filter

منقي / تنقية

Filter
Filter

منقي / تنقية

Cards
Cards

بطاقات

Transparent
Transparent

شفافية

Overlay
Overlay

تركيب

Flip
Flip

عكسي

Reflection
Reflection

إنعكاس

Box
Box

صندوق

Above
Above

فوق

Box
Box

صندوق

Below
Below

تحت

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات