ساخت صفحه Intro لوزی شکل به صورت ریسپاسنیو

در این پست یک صفحه Intro آماده را برای شما کاربران گرامی آماده ساخته ام که انشالله مورد پسند شما دوستان قرار گیرد .

این صفحه به صورت تک پیچ بوده و به صورت 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

پخش اختصاصی

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