CSS

چگونه : با CSS یک کادر با خطوط اریب بسازیم ؟

تبلیغات
4 سوالی شهرداری
کانال تلگرام فتولیا

سلام ;

چند روز پیش یک دعوتنامه برای گوگل موزیک دریافت کردم و بعد از پیوستن به سایت و گشت زدن در آن یه چیز کوچک توجه ام را جلب کرد و آن کادرهای ساده و تب مانندی بود که با همان کدهای css قدیمی یعنی ۲ ایجاد شده بودند.حالا می خواهیم با هم نحوه ایجاد شان را بررسی کنیم شاید شما هم در کارهای آینده تان تصمیم گرفتید از آنها استفاده کنید :)

 

یک آموزش ویدیوی را ترجیح نمی دهید ؟!

 

قدم ۱ : کدهای پایه

اول با کدهای ساده زیر شروع می کنیم :

حالا نتیجه کار به این شکل خواهد بود:

قدم ۲

حالا برای بهبود نمای کار کمی رنگ پس زمینه و نیز مقداری فاصله به تگ body اضافه می کنیم :

 

قدم ۳

حالا به همان صورت به سراغ تگ لینک می رویم تا مقداری رنگ ،کلفتی ،مرزبندی و … به آن اضافه کنیم :

توجه کنید که چگونه وقتی شما عرض border را زیاد در نظر می گیرید ،در گوشه های از وسط بریده می شوند .جالا آیا می توانیم از این بریدگی به عنوان گوشه تب در بخش عنوان کادر استفاده کنیم ؟اجازه دهید با ۰ کردن height امتحان کنیم .

کمی بهتر شد ! شاید حالا اگر خصیصه line-height را برای تگ لینک اعمال کنیم بتوانیم متن را کاملا داخل کادر قرار دهیم

قدم ۴

حالا رسیدیم اینجا ! چیزی که کاملا تو ذوق می زند border قرمز سمت راست است .برای پاک کردن آن می توانیم رنگ قرمز را به رنگ پس زمینه تغییر دهیم ولی اگر بعدا رنگ پس زمینه هم تغییر کرد دوباره باید این بخش نیز تغییر کند که زیاد جالب نیست.پس رنگ آن را بی رنگ قرار می دهیم ! بله همان transparent معروف !

 

قدم ۵

یک مشکل اساسی ! همانطور که مشاهده می کنید وقتی طول border با طول کل کادر برابر است اصلا حس یه تب واقعی را منتقل نمی کند و خیلی زمخت است .راه حل اولیه که ممکن است به ذهن برسد این است که به جای block از inline استفاده کنیم.گرچه تصویر زیر عدم کارایی این روش را نشان می دهد :

پس باید حالت آن را به همان block بر گردانیم تا height برابر ۰ را قبول کند.ولی جواب در استفاده از display: inline-block و یا float کردن تگ a یا همان لینک و clear کردن عناصر پشت آن است .ما از راه حل اول استفاده می کنیم :

 

خیلی بهتر شد ، نه !

 

قدم ۶

در انتها اجازه دهید کمی روی div زیر آن نیز کار کنیم :

در مرورگر سافاری اپل (Safari)

در مرورگر موزیلا فایرفاکس (Firefox)

بله به سلامتی یک مشکل جدید داریم (البته در طراحی وب طبیعی است!) و آن هم اینکه فایرفاکس و وب کیت هر کدام ساز خود را می زنند و هنوز در نحوه نمایش یک عنصر با height صفر و نمایش inline-block اتفاق نظر ندارند.

 

قدم ۷

 

محصول نهایی

امیدوارم استفاده کرده باشین :)

منبع

6 Comments

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین مقالات فتولیا در ایمیل شما

در خبرنامه ما عضو شوید و آخرین مطالب و مقالات آموزشی را اول شما دریافت کنید