ابزاردونی طرح های لایه باز

اضافه کردن box-shadow داخلی به تصاویر در css

box-shadow-css-img
سلام دوستان ، اگه تا حالا توی طراحی وب به این مورد نیاز پیدا کرده باشید که برای تصاویر در css ، box-shadow به صورت inset قرار بدین ، متوجه شدید که این کار در اولین تلاش بی نتیجه خواهد بود ، اما طی این آموزش کوتاه این کار رو میسر خواهیم کرد.
خب ابتدا باید مطمئن بشید که تصویر یک div به عنوان مادر با وضعیت relative داشته باشه ، به این صورت :

<div class="abzardooni">
<img src="https://www.abzardooni.ir/wp-content/uploads/2013/10/thumbnail.jpg" width="190" height="140" alt="abzardooni"/>
</div>
abzardooni

در اینجا ما یک div با کلاس abzardooni ایجاد کردیم و تصویر مورد نظر رو داخلش قرار دادیم…
خب حالا توی css اینطوری بهش استایل میدیم :

.abzardooni {
	position:relative;
	width:190px;
	height:140px;
	float:left;
}
.abzardooni:before {
	content:'';
	top:0;
	right:0;
	bottom:0;
	left:0;
	position:absolute;
	box-shadow: inset 0px 0px 5px #000;
}

براتون موفقیت آرزو می کنم

اضافه کردن box-shadow داخلی به تصاویر در css

سلام دوستان ، اگه تا حالا توی طراحی وب به این مورد نیاز پیدا کرده باشید که برای تصاویر در css ، box-shadow به صورت inset قرار بدین ، متوجه […]

Rating: 5 Review by Abzardooni on 2014-01-28

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.