گروه مقاله : مثال های کاربردی CSS
تاريخ انتشار : 1394/06/09 - 16:27
كد :6100
CSS transforms این امکان را به ما می دهد تا یک نوار پیمایش (NAVIGATION) زاویه دار ایجاد کنیم. در این قسمت از آموزش CSS نحوه ایجاد این NAVIGATION را با استفاده از عکس های زاویه دار به شما آموزش می دهیم. پس از اتمام کار یک NAVIGATION به شکل بالا خواهید داشت.
تصاویر به شکل الماس
به آسانی میتوان برای تصاویر یک فریم زاویه دار به شکل الماس ایجاد کرد. ما با انجام 5 مرحله زیر این کار را انجام می دهیم :
مرحله 1 : ایجاد فریم (قاب) برای عکس
اکثر عنصرها می توانند فریم ایجاد کنند: در این مثال من از تگ <a> برای ایجاد تصاویر به صورت لینک شده استفاده می کنم. عناصر <a> بوسیله display: inline-block و تنظیم کردن مقدار height به صورت مربع در می آیند. من در اینجا برای سهولت استفاده، مربع بیت مپ نیز ساخته ام، هرچند که این کار ضروری نیست.
مرحله 2 : چرخاندن فریم
تصویر و محتوای داخل آن را به اندازه 45 درجه بچرخانید.
مرحله 3 : چرخاندن عکس
برای حفظ حالت عکس باید محتوای فریم را دوباره در جهت مخالف بچرخانیم. به همین دلیل من بجای اینکه از background images استفاده کنم از تگ <img> استفاده می کنم : هنوز از background-transform استفاده نشده است.
مرحله 4 : تنظیم کردن Scale مقیاس عکس برای پر کردن فضاهای خالی
تصویر مربعی مرحله قبل قاب ما را پر نمی کند، بنابر این کمی آن را بزرگ تر می کنیم تا فضاهای خالی قاب پر شود.
مرحله 5 : حذف کردن overflow
مقدار overflow را روی hidden تنظیم کنید (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>
با توجه به اینکه 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;
}
همانطور که گفتم ، 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%;
}