بروز رسانی بهمن ۱ام, ۱۳۹۹ ۳:۳۴ بعد از ظهر
اسفند ۱۹, ۱۳۹۴ admin آموزش پیشرفته css, آموزش مقدماتی css 0
فرض کنید بخواهیم یک عنصر, مثلا یک دکمه را به شکل متوازی الاضلاع بسازیم. شاید بگویید خیلی راحت از تابع skew بهره بری و استفاده می کنیم:
.button
transform: skewX(45deg);
ولی باید توجه داشت در صورتی که نگاهی به پس نتیجه آن می شود که داشته باشیم متوجه می شویم که همچنین و علاوه بر نگهدارنده, محتوا هم کج می می شود:
آیا راهی جهت ساخت یک متوازی الاضلاع بدون آنکه محتوا کج و همچنین ناخوانا می شود وجود دارد؟
می قدرت محتوا را درون یک تگ نگهدارنده قرار دهیم و همچنین سپس آن هم تگ را در جهت مخلاف کج کردن نگهدارنده اصلی کج کنیم تا تاثیر آن هم خنثی می شود.
<button class="button">
<div>Click me</div>
</button>
.button transform: skewX(45deg);
.button > div transform: skewX(-45deg);
پس نتیجه آن می شود که بصورت زیر خواهد بود:
در صورتی که آن کار را بر روی عنصری که از نوع inline
هست انجام دهیم پس نتیجه آن می شود که مورد نظر را نخواهیم گرفت مگر اینگه آن هم را تغییر پیدا کردن به نوع block
و همچنین یا inline-block
کنیم که آن کار توسط ویژگی display انجام می گیرد.
See the Pen Parallelograms by Mojtaba Seyedi (@seyedi) on CodePen.
آن روش ما را مجبور می کند تا از یک عنصر اضافه بهره بری و استفاده کنیم. ولی باید توجه داشت خوشبخانه یک روش کامل CSSی هم وجود دارد:
در آن روش استایل های مرتبط به عنصر مثل رنگ پس باره, چرخش و همچنین یا حاشیه و همچنین غیره, به شبه عنصر آن هم تعلق می گیرد. در اینجا از before به عنوان شبه عنصر بهره بری و استفاده می کنیم.
نقطه دیگر آنکه: زیرا و به درستی که می خواهیم شبه عنصر انعطاف پذیر باشد و همچنین هر زمان که عنصر اصلی کوچک و همچنین یا پهناور و بزرگ شد شبه عنصر هم مقدار و اندازه آن هم را به ارث ببرد, کافی می باشد از position: absolute
جهت شبه عنصر بهره بری و استفاده کنیم و همچنین مختصات آن هم را برابر با صفر قرار دهیم تا کاملا گوشه هایش با گوشه های عنصر اصلی مطابق می شود. همینطور زیرا و به درستی که می خواهیم شبه عنصر نسبت به عنصر اصلی مختصات بگیرد از position: relative
جهت عنصر اصلی نیز بهره بری و استفاده می گیریم.
همچنین جهت آنکه شبه عنصر بصورت پیش فرض روی عنصر اصلی قرار می گیرد, مجبور هستیم تا به آن هم z-index: -1
بدهیم تا زیر عنصر نگهدارنده اش قرار بگیرد. و همچنین در آخر هم شبه عنصر را به مقدار و اندازه مناسبی کج می کنیم:
.button
position: relative;
display: inline-block;
padding: .5em 1em;
border: 0;
background: transparent;
color: white;
.button::before
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);
توجه داشته باشیم که بهره بری و استفاده از آن تکنیک تنها جهت کج کردن عنصر مفید نیست بلکه می توانیم جهت دیگر موارد مثل چرخش و همچنین غیره هم بهره بری و استفاده کنیم. و همچنین در کل بهره بری و استفاده از شبه عناصر کاربردهای فراوانی دارند.
See the Pen Parallelograms — with pseudoelements by Mojtaba Seyedi (@seyedi) on CodePen.
بهمن ۰۱, ۱۳۹۹ 0
دی ۲۶, ۱۳۹۹ 0
خرداد ۰۳, ۱۳۹۹ 0
اردیبهشت ۰۹, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0