در این قسمت از فیلم آموزش CSS در مورد Opacity آموزش داده ام ، با استفاده از Opacity شفافیت یک عنصر را مشخص می کنیم . در جلسه قبل در مورد شبه عناصر آموزش داده بودم .
Opacity در CSS :
opacity به معنی کدری ، تاری است ولی در کامپیوتر به معنی شفافیت است ، با استفاده از این ویژگی در CSS می توانیم شفافیت عناصر را مشخص کنیم .
مقداری که Opacity می گیرد مقداری بین 0 تا 1 است ، مقدار صفر کمترین شفافیت و مقدار یک بیش ترین شفافیت را نشان می دهد .
حال شما می توانید از مقدار اعشاری بین عدد صفر تا یک استفاه کنید تا عددی را برای شفافیت عنصر مورد نظر خود تعیین کنید.
از این ویژگی به صورت زیر استفاده می کنیم :
کد CSS :
.image{
opacity: 0.5;
}
کد HTML :
<!Doctype html> <head> <title>Web30ty</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <img src="image.png" alt="عکس" class="image"> </body> </html>
در مثال بالا شفافیت عکس را برابر مقدار 0.5 قرار داده ایم و این یعنی عکس به طور کاملاً شفاف نمایش داده نخواهد شد و شفافیت آن نصف خواهد شد .
حتی می توانید از این ویژگی برای زمان Hover یا Active شدن عکس هم استفاده کنید یعنی وقتی Hover یا Acitve شد شفافیت آن تغییر کند ، مانند مثال زیر :
.image{
opacity: 0.5;
}
.image:hover{
opacity: 1;
}
.image:active{
opacity: 0.2;
}
از Opacity فقط برای تصاویر استفاده نمی کنیم برای عناصر دیگر هم می توان از این ویژگی استفاده کرد اگر به مثال زیر توجه کنید به این موضوع پی خواهید برد :
سورس کد HTML :
<!Doctype html> <head> <title>Web30ty</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="text"> Web30ty.com </div> </body> </html>
کد CSS :
.text{
width: 400px;
height: 400px;
border: 3px solid green;
background-color:red;
color: white;
font-size:35px;
}
.text:hover{
opacity: .2;
}
اگر سورس کد بالا را اجرا کنید و باکس ایجاد شده را Hover کنید خواهید دید که از شفافیت آن عنصر کاسته می شود .
اگر سوال ، انتقاد و یا پیشنهادی برای بالا بردن کیفیت فیلم های آموزشی داشتید حتما در قسمت نظرات آن را بنویسید .
باعرض سلام وخداقوت
لطفا چندنمونه پروژه قراردهید برای یادگیری ورفع اشکال.
یه سوال داشتم چرا وقتی هرعنصری با مختصات خاص خودش وارد صفحه میکنیم عناصر دیگر جابجا میشوند وکلا ترتیب صفحه بهم میخورد
سلام
این آموزش ها فقط برای یادگیری هست و ان شالله آموزش های پروژه محور به زودی در سایت قرار داده خواهند شد .
در مورد سوالتون باید بگم که اول باید کد رو ببینم و نظر بدم .