CSS Images
الصور في لغة CSS
سوف تتعلم في هذا الدرس كيفية التحكم في الصور الموجودة بداخل صفحة الويب باستخدام عدة خواص مختلفة مثل (height , width , margin , borders , opacity ) في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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 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
Cinque Terre
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 Hover Overlay
صندوق معلومات الصور في لغة CSS
يمكن عمل صندوق معلومات يظهر فقط عند تمرير مؤشر mouse علي الصور يمكن التحكم في ألوان هذا الصندوق وحجمة وطريقة عرضة في في لغة CSS.
CSS image hover overlay fade top
ظهور صندوق معلومات وإخفاؤه من أعلي في لغة CSS.
CSS image hover overlay fade opacity
ظهور صندوق معلومات وإخفاؤه مع الشفافية في لغة 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 درجة أو أقل أو أكثر.
</>
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%
}
صور
مستوي الشفافية
حدود
مستوي الشفافية
هامش
عرض
هامش
ارتفاع
نمط أو شكل
خاصية
حجم مصغر / رؤية مصغرة
محاذاة
حشو
منتصف القطر / الكوع الجانبي
منتصف القطر / الكوع الجانبي
موقع / وضعية
مدور / دائري
قيمة
متجاوب
في المنتصف
يمين
في المنتصف
يسار
آلي
منقي / تنقية
منقي / تنقية
بطاقات
شفافية
نص
تركيب
عكسي
إنعكاس
صندوق
فوق
صندوق
تحت
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
