Real Time Web Analytics کانال تلگرام لرن روت

CSS

ایجاد reflection به کمک CSS

نویسنده : محمد مظفری
تاریخ انتشار:
19:14:56 1394-07-06
reflection,css,html

برای ایجاد یک reflection راههای بسیار زیادی وجود دارد. در این جا یک قطعه کد ساده برای این کار نمایش داده شده است . لطفا با لرن روت همراه باشید.

عکس زیر را در نظر بگیرید:

ابتدا در فایل html خود مانند زیر عمل می کنیم:

<div class="image-block" style="width:350px;">
	<img src="LR.jpg" height="50px" width="100%" />
	<div class="reflection">
		<img src="LR.jpg" height="50px" width="100%" />
	<div class="overlay"></div>
</div>

همانگونه که می بینید یک عکس را دو بار لود می کنیم یک بار برای عکس معمولی و دیگری برای حالت سایه مانند زیر آن ؛ و همچنین یک div نیز در انتهای آن مشخص کنیم. در مورد این div بعدا به تشریح سخن خواهیم گفت.

نکته مهم در این قسمت مشخص کردن عرض است که به div کلی اندازه ای مشخص را می دهیم و بعد برای بقیه فرزندان وی نیز عرض 100% و یا همان پیکسل مشخص را معین می کنیم. در غیر اینصورت عکس و سایه اش نامتناسب می شوند.

حال در فایل css خود به مانند زیر عمل می کنیم:

.reflection{
	-webkit-transform: scaleY(-1);
	-moz-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	transform: scaleY(-1);
	opacity:0.20;
}
.reflection img{
	border-radius: 10px;
	position: relative;
	top: 250px;
	z-index: -999; 
}
.overlay{
	height: 250px;
	background-image:linear-gradient(to bottom, rgba(255,255,255,1) 85% ,rgba(0,0,0,0) 110%);
	z-index: 999;
}

ابتدا باید به div که عکس reflection درون آن است را باید به صورت کامل بچرخانیم و opacity آن را نیز خیلی کم کنیم.

سپس برای خود عکس reflection نیز باید مشخص کنیم که مانند بالا هم z-index کمتری نسبت به div با کلاس overlay داشته باشد و هم موقعیت آن را نیز باید مشخص کرد که دقیقا زیر عکس باشد.

حالا باید برای div با کلاس overlay مشخص کنیم که z-index بالاتری داشته باشد تا بتوانیم عکس reflection خود را ایجاد کنیم، به این صورت که پشت صفحه div را به وسیله gradient رنگ آمیزی می کنیم به صورتی که ابتدا بالای عکس مشخص باشد ولی انتهای آن کاملا سفید و نامشخص باشد. دو عدد 85 و 110 نیز را باید برای هر عکس به صورت جداگانه تنظیم نمود و هر چه فاصله بین این دو عدد بیشتر شود مقدار بیشتری از عکس را نشان می دهد و بالعکس.

دقت کنید که ارتفاع های عکس الزاماً نباید ابن مقادیر باشند و می توانید برای عکس خود سایز دلخواهی قرار دهید.

برچسب ها:
مقالات مشابه