چگونگی ایجاد لبه های زاویه دار با استفاده از CSS

چگونگی ایجاد لبه های زاویه دار با استفاده از CSS
در این مقاله ما سعی داریم چگونگی ایجاد لبه های زاویه دار بصورت افقی در صفحات وب را به شما آموزش دهیم.پس با مجیدآنلاین تا انتهای این مقاله همراه باشید.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید

داشتن لبه های کمی زاویه دار باعث میشود که وب سایت شما از حالت کسل کننده و یکنواخت بیرون بیاید و کاربران زیادی را جذب خود کند. برای اینکار میتوانید از فناوریهای جدید CSS3 بهره ببرید و همچنین برای ایجاد این ترفند میتوانید از شبه عناصر ::before و ::after کمک بگیرید.

طریقه استفاده از شبه عناصر

با استفاده از این دو المان ما به شما خواهیم آموخت که چگونه در وب سایت خود لبه های زاویه دار ایجاد کند و وب سایت خود را کاربرپسندتر کنید.
.block{
    height: 400px;
    width: 100%;
    position: relative;
    background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
}
.block::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: inherit;
    z-index: -1;
    bottom: 0;
    transform-origin: left bottom;
    transform: skewY(-3deg);}
برای ایجاد لبه های زاویه دار ابتدا باید مبدا مختصات یعنی نقطه شروع جایی که قرار است تغییر شکل دهد را مشخص کنیم.همانطور که در کدهای بالا میبینید ما مبدا مختصات را با توجه به transform-origin گوشه پایین سمت چپ قرار داده ایم در نتیجه تغییر شکل ما از این نقطه شروع خواهد شد.
اکنون به سراغ قسمت اصلی ماجرا یعنی تغییر شکل میرویم در واقع با استفاده از متد skew() شما میتوانید المان را با دادن درجه بچرخانید میزان چرخش بستگی به پارامترهای عمودی (محور X) وافقی (محور Y) دارد.واحد این متد deg می باشد و چنانچه مقدار آن مثبت باشد عنصر مربوطه به میزان تعیین شده در جهت عقربه های ساعت  و چنانچه منفی باشد در خلاف عقربه های ساعت چرخانده خواهد شد.
در نتیجه با توجه به transform: skewY(-3deg) از آنجایی که مبدا مختصات را پایین سمت چپ قرار دادیم پایین سمت چپ کلاس .block به میزان سه درجه خلاف عقربه های ساعت کاهش پیدا میکند.در زیر برای شما مثالی آورده ایم تا مطلب را بیشتر درک کنید:

روش آسانتر با استفاده از Sass Mixin

روش ساده تر دیگری که برای ایجاد لبه های زاویه دار وجود دارد استفاده از Mixin در Sass است.در واقع با استفاده از Mixin برای ایجاد لبه های زاویه دار تعداد استایلهای کمتری بکار برده میشود در نتیجه مانع گیج شدن و سردرگمی شما میشود. با استفاده از قواعد Mixin شما میتوانید با سرعتی بالا و مشخص هر سمت از عنصر موردنظرتان را که میخواهید منحرف سازید.در زیر به شما این قواعد را نشان خواهیم داد:
@mixin angle-edge($pos-top:null, $angle-top:null, $pos-btm:null, $angle-btm:null){
    width: 100%;
    position: relative;
    background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
    &::before,
    &::after{
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background: inherit;
        z-index: -1;
        transition: ease all .5s;
    }
 
    @if $pos-top{
        &::before{
            @if $pos-top == 'topleft'{
                top: 0;
                transform-origin: right top;
                transform: skewY($angle-top);
            }
            @if $pos-top == 'topright' {
                top: 0;
                transform-origin: left top;
                transform: skewY(-$angle-top);
            }
        }
    }
 
    @if $pos-btm{
        &::after{
            @if $pos-btm == 'bottomleft' {
                bottom: 0;
                transform-origin: right bottom;
                transform: skewY(-$angle-btm);
 
            }
 
            @if $pos-btm == 'bottomright' {
                bottom: 0;
                transform-origin: left bottom;
                transform: skewY($angle-btm);
            }
        }
    }
}
همانطور که در بالا میبینید در Mixin چهار متغیر تعریف شده که همانطور از اسم آنها مشخص است دو متغیر آن جهت ها و دو متغیر دیگر میزان درجه را مشخص میکنند.در نتیجه اگر به متغیرها مقدار بدهیم هر دو سمت بالا و پایین تغییر شکل خواهند داد.
حال که متغیرها را تعریف کردیم به سراغ استفاده از آنها میرویم.نحوه استفاده از متغیرها در Sass بکار بردن @include قبل از آنها است در زیر برای شما مثالی آورده ایم تا مطلب را بیشتر درک کنید:
.block{
    @include angle-edge(topleft, 3deg);
}
کد بالا به این صورت عمل میکند که گوشه بالا سمت چپ کلاس .block را سه درجه در جهت عقربه های ساعت افزایش میدهد.
همچنین برای تغییر شکل پایین سمت چپ عنصر مورد نظر از کد زیر استفاده میشود:
.block{
    @include angle-edge(bottomright, 3deg);
}
و در نهایت اگر بخواهید بر روی دو قسمت از شکل همزمان تغییر شکل ایجاد کنید باید بصورت زیر عمل کنید :
.block{
    @include angle-edge(topleft, 3deg, bottomright, 3deg);
}
با توجه به کد بالا شما میتوانید بطور همزمان هم لبه بالا سمت چپ و هم لبه پایین سمت راست المان را منحرف سازید.
در زیر نسخه نمایشی  آنچه که در بالا برای شما توضیح دادیم را به شما نشان خواهیم داد با انتخاب هر گزینه تغییر شکل مربوط را خواهید دید:
در این مطلب با یکی دیگر از فناوریهای جدید CSS3 آشنا شدید امیدوارم که بتوانید نهایت استفاده را ببرید و با بکار بردن آن در سایتهایتان توجه کاربران بسیاری را جلب نمایید.


 

شیدا استوار، کارشناس رشته فن آوری اطلاعات بیش از 3 سال است که در حوزه طراحی و توسعه وب فعالیت دارم. علاقه شدید در زمینه برنامه نویسی موجب گردید از همان ابتدا به صورت شخصی اقدام به مطالعه و تحقیق در زمینه زبان های برنامه نویسی مختلف نموده و اکنون با تمرکز بر طراحی و توسعه وب فعالیتم را به صورت حرفه ای تر ادامه می دهم

نظرات و سوالات کاربران

هنوز دیدگاه و یا سوالی ارسال نشده است.
هم اکنون شما اولین دیدگاه را ارسال کنید.