تعلم كيفية أسلوب الصور باستخدام CSS.
صور مدورة
استخدام border-radius الملكية لخلق صور مدورة:
الصور المصغرة
استخدام border الملكية لخلق الصور المصغرة.
صورة مصغرة:
مثال
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
< img src="paris.jpg"
alt="Paris" > انها محاولة لنفسك » صورة مصغرة كما الرابط:
مثال
a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0
0 2px 1px rgba
(0, 140, 186, 0.5);
}
< a href="paris.jpg" >
< img src="paris.jpg" alt="Paris" >
< /a > انها محاولة لنفسك » صور تستجيب
والصور التي تستجيب ضبطها آليا لتتناسب مع حجم الشاشة.
تغيير حجم نافذة المتصفح لمعرفة التأثير:
إذا كنت تريد صورة لتوسيع نطاق أسفل إذا كان لديه، ولكن لم تدرج حتى تكون أكبر من حجمها الأصلي، إضافة ما يلي:
نصيحة: اقرأ المزيد عن تصميم الويب سريع الاستجابة في منطقتنا CSS RWD التعليمي .
نص الصورة
كيفية وضع نص في صورة:
مثال
انها محاولة لنفسك:
أعلى اليسار » أعلى اليمين» أسفل اليسار » أسفل يمين» توسيط »بولارويد صور / بطاقات
لسان ترول في Hardanger، النرويج
الشفق القطبي الشمالي في النرويج
مثال
div.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);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
} انها محاولة لنفسك » مرشحات الصورة
المغلق filter الممتلكات يضيف تأثيرات بصرية (مثل طمس والتشبع) إلى عنصر.
ملاحظة: لا يتم اعتماد خاصية مرشح في Internet Explorer، حافة 12 أو Safari 5.1 والإصدارات السابقة.
مثال
تغيير لون جميع الصور إلى الأبيض والأسود (100٪ رمادي):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}نصيحة: اذهب إلى موقعنا CSS مرشح المرجعي لمعرفة المزيد حول عوامل تصفية CSS.
معرض الصور تستجيب
CSS يمكن استخدامه لإنشاء صالات عرض صورة. هذا المثال استخدام استفسارات وسائل الإعلام إلى إعادة ترتيب الصور على أحجام مختلفة للشاشة. تغيير حجم نافذة المتصفح لمعرفة التأثير:
مثال
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and
(max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px
0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
} انها محاولة لنفسك » نصيحة: اقرأ المزيد عن تصميم الويب سريع الاستجابة في منطقتنا CSS RWD التعليمي .
صورة مشروط (متقدم)
هذا مثال لشرح كيفية CSS و JavaScript يمكن أن تعمل معا.
أولا، استخدام CSS لإنشاء إطار مشروط (مربع الحوار)، وإخفاء بشكل افتراضي.
ثم، واستخدام جافا سكريبت لإظهار إطار مشروط ولعرض الصورة داخل مشروط، عندما ينقر المستخدم على الصورة:
مثال
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it
inside the modal - use its "alt" text as a caption
var img =
document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick =
function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span =
document.getElementsByClassName("close")[0];
// When the user clicks
on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
} انها محاولة لنفسك »