مشاهده صفحات لینک شده در پنجره جدید
16/12/1395
طراحی وب سایت آژانس مسافرتی
طراحی وب سایت آژانس مسافرتی
18/12/1395
نمایش همه

ایجاد NAVIGATION با کمک CSS

ایجاد NAVIGATION با کمک CSS

آموزش ایجاد NAVIGATION با کمک CSS

CSS transforms این توانایی را به شما میدهد که یک نوار پیمایش که Navigatio نام دارد را به صورت زاویه دار ایجاد کنید. شما با استفاده از ایجاد NAVIGATION با کمک CSS میتوانید عکس های زاویه دار ایجاد کنید. که اینکار در زیباتر شدن طراحی سایت شما موثر میباشد.

تصاویر به شکل الماس در طراحی سایت
به راحتی میتوانید برای عکس ها یک فریم زاویه دار به شکل الماس ایجاد کنید. با استفاده از پنج مراحل زیر میتوانید اینکار را انجام دهید :
مرحله اول ایجاد فریم برای تصویر
بیشتر عنصرها قادر هستند فریم بسازند : در این مثال از تگ <a> برای ایجاد تصاویر به صورت لینک شده استفاده میکنیم. عناصر <a> توسط  display: inline-block و تنظیم کردن مقدار height به شکل مربع در می آیند.
مرحله دوم چرخاندن فریم
تصویر و محتوای موجود در آن را به اندازه ۴۵ درجه بچرخانید.
مرحله سوم چرخاندن عکس 
برای حفظ کردن حالت عکس میبایست محتوای فریم را دوباره در جهت مخالف بچرخانیم.  به همین علت بجای اینکه از background images استفاده کنیم از تگ <img> استفاده می کنیم : اما هنوز از background-transform استفاده نشده است.
مرحله چهارم تنظیم کردن Scale مقیاس عکس برای پر کردن فضاهای خالی
در مرحله قبل عکی، قاب ما را پر نمی کند، بپس باید آن را کمی بزرگ تر می کنیم تا فضاهای خالی قاب پر شود.
مرحله پنجم حذف کردن overflow
مقدار overflow را روی hidden تنظیم کنید تا قسمت هایی از عکس که از قاب بیرون زده اند پاک شوند.
ایجاد لینک های زنجیره ای برای پس زمینه در طراحی سایت
در این قسمت سه لینک به عنوان پس زمینه برای تصاویری نیاز داریم. می توان آنها را با استفاده از HTML و CSS ایجاد کرد :
<div id=”pure-container”>
<a href=”#” id=”woman”><img src=”woman.jpg” alt><span>Women</span></a>
<a href=”#” id=”man”><img src=”man.jpg” alt><span>Men</span></a>
<a href=”#” id=”child”><img src=”child.jpg” alt><span>Children</span></a>
</div>
 ایجاد NAVIGATION با کمک CSS
به این دقت کنید که اینکه position لینک ها به شکل absolute خواهد بود، باید به pure-container مقداری padding بدهیم. کد کامل CSS به شکل زیر می باشد :
#purecontainer {
background: url(mesh-grid-background-1x.jpg);
position: relative;
padding-top: 68%;
background-size: cover;
overflow: hidden;
}
#purecontainer a {
display: inline-block;
position: absolute;
width: 33%;
height: 48.4%;
transform: rotate(45deg);
top: 0;
overflow: hidden;
opacity: 0.5;
transition: .6s opacity;
color: #fff;
font-family: Avenir, sans-serif;
text-transform: uppercase;
letter-spacing: .2rem;
font-size: .5rem;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
#purecontainer a:hover, #purecontainer a .highlighted {
opacity: 1;
}
#purecontainer a img {
width: 100%;
transform: rotate(-45deg) scale(1.4);
}
#purecontainer a span {
display: inline-block;
transform: rotate(-45deg);
position: relative;
z-index: 5;
text-align: center;
width: 100%;
left: 25%;
top: -36%;
font-size: 2rem;
}
 ایجاد NAVIGATION با کمک CSS
همانطور که گفتم ،  positionهر لینک باید absolute باشد، با استفاده از واحدهای relative کل طرح ریسپانسیو می شود :
a#woman {
margin-top: 3.2%;
left: 34.4%;
}
a#man {
margin-top: 26.4%;
left: 11%;
}
a#child {
left: 57.8%;
margin-top: 26.5%;
}