فقط کاربران ثبت نام شده میتوانند لینک های انجمن را مشاهده کنند. ]


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%;
}
- See more at: فقط کاربران ثبت نام شده میتوانند لینک های انجمن را مشاهده کنند. ]