طراحی وب
طراحی Tableless چیست؟
شاید توی طراحی قالب، به عبارت Tableless (به معنای "بدون جدول") برخورده باشی یا شنیده باشی که میگن توی طراحی از از جدول کمتر استفاده کنیم.
میخوام توضیح بدم که چرا نباید زیاد از جدول استفاده کنیم یا چرا طراحهای قالب به Tableless بودن قالبهاشون می نازند.
اول از محاسن Table میگم، بعد از معایبش و مقایسه اش با مدل CSS و در آخر یک جدول رو یکبار با تگ TABLE و یکبار توسط CSS خواهی دید. باید و نبایدهای HTMLTABLE
برچسب ها: css,solution
معرفی Selectorهای CSS و کار با مهمترین هاشون
Selector یا انتخابگرهای CSS، فرمتهایی برای دسترسی بیشتر به اجزای صفحه است. برای نمونه،انتخابگر زیر:
div:first-child[id*=some] span.someClass + p ,
.someClass#someID {
color: red;
}
برای اولین P بعد از یک SPAN با کلاس someClass که زیرمجموعه یک DIV باشه DIVای که اولین عضو زیرمجموعه خودش باشه و مقدار مشخصه ID اون کلمه some توش باشه، به اضافه Element با ID برابر someID و class برابر someClass اعمال میشه.
یعنی در کد زیر، P 3 و SPAN 2 و SPAN 4 قرمز میشه.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div:first-child[id*=some] span.someClass + p ,
.someClass#someID {
color: red;
}
</style>
</head>
<body>
<div id="someDiv">
DIV 1
<p>P 1</p>
<p>P 2</p>
<div>DIV 2</div>
<span class="someClass">SPAN 1</span>
<p>P 3</p>
<span id="someID" class="someClass">SPAN 2</span>
</div>
<div id="someDiv">
DIV 3
<p>P 4</p>
<p>P 5</p>
<div>DIV 4</div>
<span class="someClass">SPAN 3</span>
<p>P 6</p>
<span id="someID" class="someClass">SPAN 4</span>
</div>
<p>P 7</p>
<div>
DIV 5
<p>P 8</p>
</div>
</body>
</html>
میخوایم این انتخابگرها رو دونه دونه از ساده به پیچیده با مثال توضیح بدیم. ادامه آموزش
برچسب ها: css,آموزش
ابزارهای طراحی بصورت Cross-Browser
وقتی میخوای CSS بنویسی حتما می دونی که کدهات توی مرورگرهای مختلف که هر روز دارند بیشتر می شن، متفاوت رندر میشه. مخصوصا اینترنت اکسپلورر که به زبون خودش حرف می زنه!
واسه اینکه CSS به اصطلاح Cross-Browser داشته باشیم یعنی توی همه مرورگرها، خروجی ثابتی داشته باشه، دو راه وجود داره:
این دو راه توی ادامه پست توضیح داده شده.
برچسب ها: css,javascript,مرورگر
تعیین رنگ متن و زمینه عباراتی که highlight می کنیم
CSS یه امکان ریزه میزه داره که میشه رنگ highlight متن رو تغییر داد. طبیعتا برای تغییر استایل، فقط رنگ زمینه و رنگ نوشته، تاثیرگذاره. کافیه این دو تا رو توی CSS قرار بدی:
::-moz-selection {
background:#cc0000;
color:#fff;
}
::selection {
background:#cc0000;
color:#fff;
}
اولی مخصوص فایرفاکس و موزیلاست و دومی رو سافاری و گوگل کروم و اپرا ساپورت می کنند. طبق معمول اینترنت اکسپلورر خرس گنده، این سوسول بازیا تو کت و کولش نمیره!
برای نمونه، متن همین صفحه رو highlight کن یا دکمه های Ctrl+A رو بزن.
شنگول باشید
برچسب ها: css
CSS Transparency بصورت Cross-Browser
برای محوسازی اجزای صفحه توسط CSS باید از مشخصه opacity استفاده کرد ولی متاسفانه این مشخصه توی برخی مرورگرها(و برخی نسخه ها) درست عمل نمی کنه. این بخاطر این هست که مثلا نسخه های قدیمی تر اینترنت اکسپلورر اصلا همچین مشخصه ای ندارند و از مشخصه alpha استفاده می کنند. رفتار نسخه های قدیمی موزیلا و سفری هم متفاوته.
در زیر مشخصه های همه مرورگرها لیست شده که اگر بخواید عملیات محوسازی رو بصورت بی نقص در همه جا اجرا کنید باید همه این مشخصه ها رو با هم استفاده کنید:
.transparency {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
توضیح بیشتر.....
برچسب ها: css,opacity
Google Chrome
Smashing Magazine
CSS-Tricks
امیرحسینم. اسمم رو دوست دارم، خودم رو دوست دارم. تهران زندگی می کنم. دانشجوی رشته صنایع هستم شغل درست و حسابی ندارم. طراحی وب می کنم ولی همه اش واسه سرگرمی بوده. برنامه نویس PHP هستم. برنامه نویسی و وقت گذرونی با کامپیوتر تنها کاریه که خسته ام نمی کنه.