جهت ورود به تالار گفتمان سایت کلیک کنید


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

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

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

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

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

و اما آموزش :

ابتدا کد 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

پخش اختصاصی

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

جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

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

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