این صفحه به صورت تک پیچ بوده و به صورت html5 و css3 می باشد که دارای افکت زیبایی هست .

در این صفحه , فقط یک عکس به کار رفته است که به صورت css sprites تکه هایی از آن جدا شده و در 4 قالب قرار گرفته است که شما میتوانید به راحتی عکس را تغییر داده و از آن استفاده نمایید .

و اما آموزش :

ابتدا کد html زیر را در وب سایت خود قرار داده :

<div class="loz-vms-block">
    <div class="loz-vms-row">
        <div class="loz-vms-wrap">
        </div>
    </div>
    <div class="loz-vms-row">
        <a href="http://xn--mgbguh09aqiwi.com" class="loz-vms-wrap">
        <div class="overlay">
            <div class="overlay-content">
                Portfolio
            </div>
        </div>
        </a> <a href="http://xn--mgbguh09aqiwi.com" class="loz-vms-wrap">
        <div class="overlay">
            <div class="overlay-content">
                About
            </div>
        </div>
        </a>
    </div>
    <div class="loz-vms-row">
        <a href="http://xn--mgbguh09aqiwi.com" class="loz-vms-wrap polygon-clip-rhombus">
        <div class="overlay">
            <div class="overlay-content">
                Contact
            </div>
        </div>
        </a>
    </div>
</div>

    <svg class="vms-svg">
      <defs>
        <clipPath id="clip-diamond-demo" clipPathUnits="objectBoundingBox">
          <polygon points="0.5 0, 1 0.5, 0.5 1, 0 0.5" />
        </clipPath>
      </defs> 
    </svg>

حال کد زیر را در css سایت خود کپی کنید :

.vms-svg {
	width: 0;
	height: 0;
}
.loz-vms-row {
	text-align: center;
}
.loz-vms-row:first-of-type .loz-vms-wrap {
	background-position: top;
}
.loz-vms-row:nth-of-type(2) .loz-vms-wrap:nth-of-type(odd) {
	background-position: left;
}
.loz-vms-row:nth-of-type(2) .loz-vms-wrap:nth-of-type(even) {
	background-position: right;
}
.loz-vms-row:last-of-type .loz-vms-wrap {
	background-position: bottom;
}
.loz-vms-wrap {
	width: 300px;
	height: 300px;
	background-image: url(images/bg_vms.jpg);
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	display: block;
	position: relative;
	-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	clip-path: url("#clip-diamond-demo");
}
.overlay {
	background: rgba(0, 125, 116, 0.6);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	pointer-events: none;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
.overlay-content {
	color: rgba(255, 255, 255, 0.7);
	font-weight: 400;
	font-size: 170%;
	text-transform: uppercase;
	position: absolute;
	left: 50%;
	top: 50%;
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.loz-vms-wrap:hover .overlay {
	-webkit-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	-moz-transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	background: none;
}
.loz-vms-img {
	display: block;
}

@media only screen and (min-width: 650px) {
.loz-vms-row {
	margin-top: -154px;
}
.loz-vms-row:first-of-type {
	margin-top: auto;
}
.loz-vms-wrap {
	display: inline-block;
}
}

نکته 1 : در کد های css به جای bg_vms.jpg میتوانید آدرس عکس مورد نظر خود را وارد نمایید .

نکته 2 : همان طور که گفته شده بود این 4 لوزی همگی از یک عکس استفاده میکنند و نقاط مختلفی از آن را در خود نمایش میدهند , پس برای تعوضی مکان قرار گیری میتوانید در کد های css بالا از خط شماره 11 تا خط 22 را با توجه به سلیقه خود تغییر دهید . منظور top , left , right و bottom است .

دموی قالب Intro

پخش اختصاصی

آموزش وحید مجیدی