با سلام ;
چند روز پیش یک دعوتنامه برای گوگل موزیک دریافت کردم و بعد از پیوستن به سایت و گشت زدن در آن یه چیز کوچک توجه ام را جلب کرد و آن کادرهای ساده و تب مانندی بود که با همان کدهای css قدیمی یعنی 2 ایجاد شده بودند.حالا می خواهیم با هم نحوه ایجاد شان را بررسی کنیم شاید شما هم در کارهای آینده تان تصمیم گرفتید از آنها استفاده کنید 🙂
یک آموزش ویدیوی را ترجیح نمی دهید ؟!
قدم 1 : کدهای پایه
اول با کدهای ساده زیر شروع می کنیم :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="#">New Music</a>
<div>
<h3> Hello, Everyone! </h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</body>
</html>حالا نتیجه کار به این شکل خواهد بود:
قدم 2
حالا برای بهبود نمای کار کمی رنگ پس زمینه و نیز مقداری فاصله به تگ body اضافه می کنیم :
body {
background: #e3e3e3;
font-family: sans-serif;
width: 400px;
margin: 100px auto;
}
قدم 3
حالا به همان صورت به سراغ تگ لینک می رویم تا مقداری رنگ ،کلفتی ،مرزبندی و … به آن اضافه کنیم :
a {
padding: 10px;
text-decoration: none;
color: white;
font-weight: bold;
display: block;
border-right: 30px solid red;
border-bottom: 30px solid #4c4c4c;
}
توجه کنید که چگونه وقتی شما عرض border را زیاد در نظر می گیرید ،در گوشه های از وسط بریده می شوند .جالا آیا می توانیم از این بریدگی به عنوان گوشه تب در بخش عنوان کادر استفاده کنیم ؟اجازه دهید با 0 کردن height امتحان کنیم .
a {
padding: 10px;
text-decoration: none;
color: white;
font-weight: bold;
display: block;
border-right: 30px solid red;
border-bottom: 30px solid #4c4c4c;
height: 0;
}
کمی بهتر شد ! شاید حالا اگر خصیصه line-height را برای تگ لینک اعمال کنیم بتوانیم متن را کاملا داخل کادر قرار دهیم
a {
padding: 10px;
text-decoration: none;
color: white;
font-weight: bold;
display: block;
border-right: 30px solid red;
border-bottom: 30px solid #4c4c4c;
height: 0;
line-height: 50px;
}
قدم 4
حالا رسیدیم اینجا ! چیزی که کاملا تو ذوق می زند border قرمز سمت راست است .برای پاک کردن آن می توانیم رنگ قرمز را به رنگ پس زمینه تغییر دهیم ولی اگر بعدا رنگ پس زمینه هم تغییر کرد دوباره باید این بخش نیز تغییر کند که زیاد جالب نیست.پس رنگ آن را بی رنگ قرار می دهیم ! بله همان transparent معروف !
a {
padding: 10px;
text-decoration: none;
color: white;
font-weight: bold;
display: block;
border-right: 30px solid transparent;
border-bottom: 30px solid #4c4c4c;
height: 0;
line-height: 50px;
}
قدم 5
یک مشکل اساسی ! همانطور که مشاهده می کنید وقتی طول border با طول کل کادر برابر است اصلا حس یه تب واقعی را منتقل نمی کند و خیلی زمخت است .راه حل اولیه که ممکن است به ذهن برسد این است که به جای block از inline استفاده کنیم.گرچه تصویر زیر عدم کارایی این روش را نشان می دهد :
پس باید حالت آن را به همان block بر گردانیم تا height برابر 0 را قبول کند.ولی جواب در استفاده از display: inline-block و یا float کردن تگ a یا همان لینک و clear کردن عناصر پشت آن است .ما از راه حل اول استفاده می کنیم :
a {
padding: 10px;
text-decoration: none;
color: white;
font-weight: bold;
display: inline-block;
border-right: 30px solid transparent;
border-bottom: 30px solid #4c4c4c;
height: 0;
line-height: 50px;
}
خیلی بهتر شد ، نه !
قدم 6
در انتها اجازه دهید کمی روی div زیر آن نیز کار کنیم :
div {
border: 1px solid #4c4c4c;
border-top: 3px solid #4c4c4c;
padding: 20px;
}
بله به سلامتی یک مشکل جدید داریم (البته در طراحی وب طبیعی است!) و آن هم اینکه فایرفاکس و وب کیت هر کدام ساز خود را می زنند و هنوز در نحوه نمایش یک عنصر با height صفر و نمایش inline-block اتفاق نظر ندارند.
قدم 7
@media screen and (-webkit-animation) {
a {
margin-bottom: -4px;
}
}محصول نهایی
امیدوارم استفاده کرده باشین 🙂
عالی ممنون
خیلی عالی بود. ممنونم. کمک خیل بزرگی برای کارم بهم کردین.
مشکلی که داره اینکه بعد از اجرای کار اگر شما یک المان دقیقا بخواهید بالا ی برچسب عنوان قرار دهید کار خوب نمیشه با فاصله نمایش داده میشه
خیلی عالی بود ممنون
ممنونم .خوشحالم مفید بوده
هو،
سلام علیکم،
جالبه!
هفته ی پیش این پستو خوندم 🙂
تکنیکهای CSS خیلی بیشتر از این حرفهاست.
ممنون بابت ترجمه.
یا حق ج
سلام
جالبه خوب برای اینکه سلیقه ها شبیه به همه ^.^
ممنون
ممنون علی جان.
من همیشه دوست دارم تا جایی که امکان داره طرح گرافیکیمو با css اجرا کنم.
آموزش بسیار خوبیه،مخصوصاً اینکه با css2 کار شده.
سلام آقا حامد عزیز
خواهش ، بله به علاوه اینکه باعث سبکتر شدن سایت هم میشه
موفقیت