ایجاد افکت بلوک گالری عکس با CSS3

نوشته شده توسط حسام در 14 آبان 1392. ارسال شده در اینترنت

به نام خدا و سلام خدمت دوستان عزیز

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

در این آموزش ما از CSS3 برای جلوه ها استفاده میکنیم و برای نمایش هم از HTML استفاده میکنیم. تمامی این کد ها توسط بنده نوشته شده و برای نوشتن از نرم افزار DreamWeaver استفاده کردم که به شما هم توصیه میکنم از اون استفاده بکنید.

در آخر کار حاصل کار ما شبیه این خواهد شد:

در ابتدا به برخی از ویژگی های بلوک عادی (بلوک سمت چپ در تصویر بالا) اشاره میکنیم:
این بلوک دارای یک سایه ی باریک در کنار خود است:

شما در داخل اون میتونید از المان های HTML مانند تصویر ، لینک ، متن و ... استفاده کنید.
در ضمن یک درخشندگی بسیار زیبا هم زیر بلوک قرار داره:

اگر به تصویر اول نگاه کنید متوجه برخی تغییرات میشید که هنگام بردن ماوس روی بلوک ، ایجاد میشن.(بلوک سمت چپ در حالت عادی و بلوک سمت راست هنگام نگه داشتن ماوس روی بلوک)
در قسمت جلویی ما یک لایه سبز رنگ روی قسمت زیری نمایش میدیم تا بتونیم محتویات قسمت رویی رو بهتر نمایش بدیم.
همچنین میتونیم روی هر دو قسمت افکت بزاریم و یک تولتیپ هم نشون بدیم:

در ضمن درخشندگی پایین بلوک هم بیشتر میشه:

خب حالا میخوایم که کد هارو بنویسیم.
برای شروع از HTML شروع میکنیم:

<!doctype html>
<!--
Code by : Hesam Gholami
Website : http://hesam.org
11/05/2013 - 14/08/1392
-->



Block Hover Effect





<br /><br /><br /><br />
	<!--Fade Effect Without Zoom-->
<div class="block">
<div>
        	<br /><br />
            Text1
            <br /><br /><br /><br />
            <img src="/browser_support.png" alt="Browsers" />
        </div>
<div class="over effect1" data-title="Title!">
            <br /><br /><br /><br />
            Text2
            <br /><br /><br /><br />
            <img src="/info_icon_128.png" alt="Info" />
        </div>

        
    </div>

    <!--Scroll Effect Without Zoom-->
<div class="block">
<div>
        	<br /><br />
            Text1
            <br /><br /><br /><br />
            <img src="/browser_support.png" alt="Browsers" />
        </div>
<div class="over effect2">
            <br /><br /><br /><br />
            Text2
            <br /><br /><br /><br />
            <img src="/info_icon_128.png" alt="Info" />
        </div>

        
    </div>


    <!--Fade Effect With ZoomIn-->
<div class="block">
<div class="zoomin">
        	<br /><br />
            Text1
            <br /><br /><br /><br />
            <img src="/browser_support.png" alt="Browsers" />
        </div>
<div class="over effect1" data-title="Title!">
            <br /><br /><br /><br />
            Text2
            <br /><br /><br /><br />
            <img src="/info_icon_128.png" alt="Info" />
        </div>

        
    </div>

    <!--Scroll Effect With ZoomIn-->
<div class="block">
<div class="zoomin">
        	<br /><br />
            Text1
            <br /><br /><br /><br />
            <img src="/browser_support.png" alt="Browsers" />
        </div>
<div class="over effect3">
            <br /><br /><br /><br />
            Text2
            <br /><br /><br /><br />
            <img src="/info_icon_128.png" alt="Info" />
        </div>

        
    </div>

    
    <!--Fade Effect With ZoomOut-->
<div class="block">
<div class="zoomout">
        	<br /><br />
            Text1
            <br /><br /><br /><br />
            <img src="/browser_support.png" alt="Browsers" />
        </div>
<div class="over effect1">
            <br /><br /><br /><br />
            Text2
            <br /><br /><br /><br />
            <img src="/info_icon_128.png" alt="Info" />
        </div>

        
    </div>

    
    <!--Left Scroll Effect Without ZoomOut-->
<div class="block">
<div class="zoomout">
        	<br /><br />
            Text1
            <br /><br /><br /><br />
            <img src="/browser_support.png" alt="Browsers" />
        </div>
<div class="over effect3">
            <br /><br /><br /><br />
            Text2
            <br /><br /><br /><br />
            <img src="/info_icon_128.png" alt="Info" />
        </div>

        
    </div>
<p><a title="See Article in Hesam Website" href="http://go.hesam.org/cssblockhover">See Article in Hesam Website...</a></p>

همونطوری که مشاهده میکنید، بنده شش بلوک ایجاد کردم تا افکت های مختلف رو روشون نمایش بدم.
حالا میخوایم CSS هارو ببینیم:
ابتدا بدنه و بلوک رو آماده سازی میکنیم:

/*
Code by : Hesam Gholami
Website : http://hesam.org
11/05/2013 - 14/08/1392
*/
@charset "utf-8";

body
{
	text-align:center;
	font-family:"Segoe UI", Tahoma, serif;
	font-size:20px;
}

.block
{
		
	display:inline-block;
	position: relative;
	width:400px;
	height:400px;
	margin:2cm;
	border:groove 1px rgba(100,100,100,0.37);
	background-color:#FFFFFF;
	text-shadow:0px 0px 3px rgba(70,70,70,1.00);
	
	-webkit-box-shadow:0 1px 4px rgba(142,142,142,0.91);
            box-shadow:0 1px 4px rgba(142,142,142,0.91);
			
}

.block .over
{
	z-index:1;
	
	opacity:0;
	position:absolute;
	left: 0px;
	background-color:rgba(79,240,212,0.9);
	text-shadow:0px 0px 4px rgba(70,70,70,.4);

}

.block:hover .over
{
	opacity:1;
	
}

حالا سایه ی زیر بلوک رو اضافه میکنیم:

/* Shadow */

.block:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 50px rgba(255,0,255,0.8);
    		box-shadow:0 0 50px rgba(255,0,255,0.8);
    bottom:0px;
	width:80%;
	height:50%;
    -moz-border-radius:100%;
    border-radius:100%;
	left:10%;
	right:10%;
	
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}

.block:hover:after
{
    -webkit-box-shadow:0 0 114px rgba(255,0,255,0.8);
    		box-shadow:0 0 114px rgba(255,0,255,0.8);
}

بعد از این کار، کد های مربوط به تولتیپ رو مینویسیم:

/* ToolTip */

[data-title]:after 
{
    content: attr(data-title);
	padding: 4px 8px;
	color: #333;
	position: absolute;
	left: 140px;
	top: -14px;
	width:100px;
	overflow:visible;
	z-index: 3;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0px 0px 4px #222;
	-webkit-box-shadow: 0px 0px 4px #222;
	box-shadow: 0px 0px 4px #222;
	background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
	background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
	background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
	
	-webkit-transition:all .4s ease-in-out;
	-moz-transition:all .4s ease-in-out;
	-o-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out;
	
	opacity:0;
}

[data-title]:hover:after 
{
    opacity:1;
	top: -44px;
}

ما از data برای نمایش تولتیپ استفاده کردیم ، چون اگر بخوایم از صفت title استفاده کنیم ، مرورگر علاوه بر تولتیپ ما، تولتیپ پیشفرض خودش رو هم نشون میده.
و در آخر افکت هارو اضافه میکنیم:

/* Effects */

.zoomin
{
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}

.block:hover .zoomin
{
	-moz-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
}

.zoomout
{
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}

.block:hover .zoomout
{
	-moz-transform: scale(.5);
	-webkit-transform: scale(.5);
	-o-transform: scale(.5);
	-ms-transform: scale(.5);
	transform: scale(.5);
}

.effect1
{
	height:400px;
	width:400px;
	top:0px;
	
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}

.block:hover .effect1
{
	height:400px;
	top:0px;
}

.effect2
{
	height:10px;
	width:400px;
	top:98%;
	overflow:hidden;
	
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
}

.block:hover .effect2
{
	height:400px;
	top:0px;
}

.effect3
{
	height:400px;
	width:0px;
	top:0px;
	overflow:hidden;
	
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
}

.block:hover .effect3
{
	width:400px;
}

پس از اینکه این کد هارو اضافه کردید دیگه کار تموم شده و میتونید نتیجه رو ببینید!
اگه به کدها دقت کنید میبینید که با اینکه تعداد خط کدها زیاد هست، اما کدهای سختی نیستن و براحتی میشه اونهارو متوجه شد.

امیدوارم که از این مطلب لذت برده باشید و با به خرج دادن خلاقیت خودتون اونها رو تغییر بدید و لینکش رو توی نظرات بزارید ما هم ببینیم.

مشاهده دموی آنلاین

چاپ

نوشتن دیدگاه

• لطفاً توجه داشته باشید که آدرس ایمیل www ندارد.
•اگر میخواهید پاسخ نظر شما به ایمیلتان ارسال شود تیک گزینه ی "مرا برای دیدگاه‌های بعدی به یاد بسپار" را علامت بزنید.
•همچنین استدعا دارم که هرگز عبارات سیاسی در نظر خود به کار نبرید

JComments

اشتراک در خبرنامه ایمیل

مطالب جدید وبسایت حسام را در ایمیل خود دریافت کنید

(ما هم مثل شما از اسپم متنفریم!)

آدرس ایمیل خود را برای دریافت، ثبت کنید