آموزش رایگان CSS- جلسه 14

آموزش رایگان CSS- جلسه 14

آنچه در این مقاله میخوانید

در این جلسه از سری جلسات آموزش CSS قصد داریم به موضوع تصاویر در CSS بپردازیم. اینکه چطور یک تصویر را در پس زمینه ی یک عنصر قرار دهیم یا آن را ویرایش کنیم؟ یا اینکه اصلا می توان یک تصویر را به عنوان حاشیه استایل دهی کرد یا نه؟ تا پایان این آموزش با ما همراه باشید.
یک تصویر می تواند در حالت های مختلفی قرار بگیرد. برای مثال می توان تصویر را پس زمینه یا در حاشیه‌ی یک عنصر قرار داد. یا اینکه تصاویر می توانند به عنوان آیتم های یک لیست نیز قرار بگیرند. در ادامه به بررسی هر کدام می پردازیم.

 

در جلسه ی سیزدهم از آموزش CSS به آموزش لینک ها در CSS  پرداختیم. اگر هنوز این جلسه را مطالعه نکرده اید از لینک قرار داده شده به این مقاله دسترسی خواهید داشت.

 

قرار دادن تصویر در پس زمینه ی یک عنصر

همانطور که در جلسه ششم CSS گفته شد برای اینکه یک تصویر را در پس زمینه ی عنصری قرار دهیم از ویژگی background-image استفاده می کنیم. به مثال زیر نگاه کنید؛

<style>
body{
background-image:url(“images/mybg.jpg“);
}
</style>

پس زمینه ی انتخابی ممکن است پس زمینه ی یک پارگراف باشد, در این صورت مانند مثال زیر میتوان عمل کرد؛

<style>
p{
background-image:url(‘images/mybg.jpg‘);
}
</style>

Border-Image در CSS

در جلسات قبل به طور مفصل در مورد Border ها صحبت کردیم و گفتیم که خط هایی هستند که دور عناصر کشیده میشوند. گاهی به جای این خط ها می توان از تصاویر استفاده کرد.
یعنی با استفاده از ویژگی Border-Image می توانیم تصاویر را در حاشیه ی عناصر قرار دهیم.

ویژگی های Border-Image شامل موارد زیر است:

border-image-source: مسیر تصویر برای استفاده به عنوان حاشیه
border-image-slice : نحوه ی برش تصویر حاشیه است که از اعداد ، درصد یا fill برای مقداردهی استفاده می کنیم و تصویری که به عنوان تصویر حاشیه در نظر گرفتیم همیشه به 9 بخش تقسیم می شود: چهار گوشه ، چهار لبه و وسط مانند تصویر زیر؛

اموزش رایگان CSS- جلسه 14| تصاویر در CSS
تصاویر در CSS

توجه: ویژگی border-image-slice می تواند از یک تا چهار مقدار باشد.

border-image-width : عرض تصویر حاشیه را مشخص می کند. ویژگی عرض تصویر حاشیه می تواند از یک تا چهار مقدار (طرفین بالا ، راست ، پایین و سمت چپ) باشد.
border-image-outset : میزان تصویر حاشیه به بیرون از عنصر نیز می تواند گسترش پیدا کند. این ویژگی تصویر حاشیه نیز می تواند از یک تا چهار مقدار (طرفین بالا ، راست ، پایین و سمت چپ) باشد که از واحد پیکسل ، اعداد یا initial برای مقداردهی استفاده می کنیم.

border-image-repeat : این که آیا تصویر حاشیه باید تکرار شود ، گرد باشد یا کشیده شود که از سه مقدار stretch ، repeat و round استفاده می شود. برای این ویژگی دو مقدار می توانیم بنویسیم که اولی برای border بالا و پایین و دومی برای border راست و چپ استفاده می شوند.

تمامی این ویژگی ها را می توان در یک خط به صورت زیر نوشت نوشت:

border-image : border-image-source border-image-slice / border-image-width border-image-outset border-image-repeat
border-image: url(border.png) 6% 6% 6% 6% fill / 8% 8% 8% 8% / 7 stretch round;

مثال؛

از این تصویر به عنوان تصویر border استفاده می کنیم.

اموزش رایگان CSS- جلسه 14| تصاویر در CSS

<div id=”myDIV”>
استفاده از تصویر برای حاشیه
</div>
<style>
#myDIV {
border: 15px solid transparent;
padding: 15px;
border-image: url(border.png);
border-image-slice:20%;
border-image-repeat: round;
border-image-outset:10px 5px 2px;
}
</style>

نتیجه کد بالا تصویر زیر است؛

اموزش رایگان CSS- جلسه 14| تصاویر در CSS

برای درک بهتر border-image از ابزار زیر استفاده کنید.

Border Image Generator

 

در جلسه ی 4 از آموزش HTML به ” اضافه کردن تصاویر به HTML ” پرداختیم, که پیشنهاد می کنیم برای مطالعه‌ی بیشتر به آن مراجعه کنید.

 

List-Style-Image در CSS

با استفاده از ویژگی List-Style-Image می توان در لیست های موجود به جای عدد, تیک و… از تصاویر استفاده کرد؛
نمونه ای از List-Style-Image در مثال زیر آورده شده است. به نظر شما کد زیر چگونه نمایش داده میشود؛

<style>
ul {
list-style-image: url(‘flower.png‘);
}
</style>

اموزش رایگان CSS- جلسه 14| تصاویر در CSS

 

ویژگی Display در تصاویر

این ویژگی کاربردهای زیادی دارد اما در اینجا برای تغییر حالت های تصویر مورد استفاده قرار میگیرد. یعنی چی ؟ یعنی وقتی چند تصویر را با تگ img ایجاد می کنیم. این تصاویر کنار هم و به صورت درون خطی قرار می گیرند. اما شاید ما بخواهیم که زیر هم یا هر کدام در یک خط باشند. در این صورت از ویژگی Display استفاده می کنیم.

در حالت های دیگر ممکن است بخواهیم تصویر در وسط صفحه قرار بگیرد یا اصلا مخفی شود. مثال های زیر نمونه هایی از این حالت ها هستند؛

<style>
img{
display:block;
}
</style>

 

وقتی display را block قرار می دهیم آن عنصر به عنوان عنصر بلوک نمایش داده می شود و از یک خط جدید شروع می شود و کل عرض را اشغال می کند.

مثال دوم؛

<style>
img{
display:none;
}
</style>

 

در اینجا مقدار  none برای display قرار گرفته است. یعنی تصویر مورد نظر مخفی خواهد شد.

مثال سوم؛

در این مثال تصویر در وسط صفحه قرار می گیرد؛

 

<style>
img{
display:block;
margin:0 auto;
}
</style>

Float در CSS

Float در CSS برای شناور سازی تصاویر در بلوک های متنی مورد استفاده قرار می گیرد. اما کاربردهای دیگری نیز دارد.
برای درک مفهوم شناور بودن تصاویر صفحه ی یک مجله را تصور کنید که تصاویر در بخش های مختلف آن قرار دارند و متن فضای خالی باقی مانده را اشغال کرده است. دقیقا این ویژگی را میتوان با خاصیت Float در صفحات وب ایجاد کرد.

خاصیت Float میتواند مقادیر زیر را دریافت کند؛

  •  none
  •  right
  •  left
  •  inherit

مقدار none برای زمانی است که می خواهم عنصر مورد نظر ما خاصیت Float را نداشته باشد.
مقدار right و left برای زمانی است که می خواهیم عنصر مورد نظر ما که در اینجا یک تصویر است, در راست یا چپ قرار بگیرد.
و در نهایت مقدار inherit به معنی به ارث بردن است. یعنی عنصر یا تصویر ما همان مقداری را می پذیرد که عنصر والد آن اختیار کرده.

<style>
p{
border:2px solid blue;
padding:10px;
overflow:hidden;
}
img.t1{
float:left;
}
img.t2{
float:right;
}
</style>

😊✌از بقیه ی جلسات آموزش CSS جا نمونید.✌😊

 

چند مثال دیگر؛

p ,h1 {text-align:right;
line-height:2;
}
img {
float:right;
margin:10px;
}

در این مثال تصویر در سمت راست قرار می گیرد و متن در کنار تصویر با فاصله ی 10 پیکسل نمایش داده می شود.

مثال؛

<div class=”div1“>بخش 1</div>
<div class=”div2“>بخش 2</div>
<div class=”div3“>بخش 3</div>

<style>
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
</style>

شما می توانید با حذف float از div و قرار دادن در هر یک از کلاس ها تغییرات را مشاهده کنید.

4.5/5 - (2 امتیاز)
ارسال نظر

آدرس ایمیل شما منتشر نخواهد شد.