مثال مباشر

بناء نموذج بريدي:

<p>
    <label>username</label>
    <input type='text' name='username' size='30' />
</p>
<p>
    <label>password</label>
    <input type='password' name='password' size='30' />
</p>

إضافة Icon لكل حقل:

form input[type=text] {
    background: url(/images/user.png) no-repeat
}
form input[type=password] {
    background: url(/images/key.png) no-repeat
}

ثم إزاحة الكلمات عن Icon بمقدار معين:

form input {
    text-indent: 1.2em;
}

يمكن أيضا إضافة Class لكل حقل وعدم استعمال Attribute Selectors إن رغبت بإضافة حقول أخرى لا يوفرها Input Type

مثال مباشر

بناء النموذج:

<form method='post' action='#'>
  <p>
    <label>name</label>
    <input type='text' name='name' size='30' />
  </p>
</form>

خصائص CSS:

form textarea,
form input {
    border:1px solid #C3A6E1;
    color:#333;
    padding:.3em;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

أضفت منحنى دائري بقيمة 3px لإطار النموذج البريدي سواء كان input أو textarea
خاصية Radius للمتصفحات التي تعتمد على محرك Webkit

form textarea,
form input {
    -webkit-border-radius:3px
}

عند وضع الفارة على النموذج Focus يتم تغيير Border وإضافة Shadow بقيمة خفيفة

form textarea:focus,
form input:focus {
    border:1px solid #96C;
    -moz-box-shadow:0 0 4px #E6D9F2; 
    -webkit-box-shadow:0 0 4px #E6D9F2; 
}

لنفترض أنه لدي صفحات Pages كالموجودة في Wordpress وأرغب بإظهار عناوين الصفحات بتنسيق معين ب CSS كأن أفصل بين كل عنوان وآخر ب Border وآخر عنوان في القائمة سيكون بدون إطار

صورة توضح ما أرغب به:

إن كان Code عبارة عن XHTML فقط، سأضيف Class لآخر  رابط كالتالي:

<li class="last">link 4</li>

CSS

ul li.last {border:none}

بينما إن كانت البيانات عبارة عن حلقة While يتم الاستعلام عنها من جدول MySQL ف Jquery توفر حلا (IE لا يدعم pseudo element ولن تظهر التأثيرات معه، يمكن اللجوء إلى بعض Fix):
ببساطة بعد استدعاء ملف jquery (الذي سأستدعيه غالبا لشيء آخر أكثر أهمية)، أضيف ما يلي:

$('ul li:last').css('border','none');

كذلك يمكن هذه الطريقة للحصول على حقول ملونة عند عرض بيانات Tabular كما في الصورة:

JS

$('table tr:odd').css('background','#fff');
$('table tr:even').css('background','#B0D9EC');

الملفات مرفقة

يمكن استعمال CSS() مع Jquery في أكثر من موضع.

مثال مباشر لما أتحدث عنه

فكرة الدرس هي تصميم خطة اشتراك واحدة وإعطاء بعض الخصائص لاظهار السعر ومميزات الخطة .. ثم تكرار الخطة وتغيير بيانات الخطة، مع إمكانية تمييز Plan معين بلون أو حجم وشكل مختلف ..

XHTML 1.0

<div class="plan">
<h3>Personal</h3>
<strong>$20</strong>
    <span>per month</span>
Use for your work team or project ..
<ul>
	<li>250 Mb storage</li>
	<li>support SSl</li>
	<li>15 users per project</li>
</ul>
<a class="button" href="#">sign up</a></div>

وسوم Tags لا تحتاج لشرح، سأتحكم فيها عن طريق CSS، قبل ذلك أكرر Class عدة مرات حسب عدد الخطط الذي لدي، ويمكنني اضافة Class جديد لخطة معينة كالاتي:

<div class="plan free">
Code ..
</div>

سأغير فقط بعض الخصائص الخصة ب Class الجديد:

CSS

#main .free {
 background-color: #9CC9E3;
 font-size:large; font-weight: bolder;
 border-color:#4A9CCB
}

ولا حاجة لأن أعيد كتابة كل خصائص Class الجديد

CSS

ساضع أهم خصائص يجب اعطائها ل Class الأول هو Plan هنا، والبقية من اختيار رغبة المطور ..

#main .box {
    float: left;
    width: 196px;
    margin: 05px 05px 05px 0;
}

إن كانت الصفحة من اليمين إلى اليسار فغير الاتجاه فقط، وبقية الخصائص متوفرة في الصفحة المثال. وهذه طريقة من بين طرق عديدة.

أمثلة من مواقع أجنبية لمزيد من الإلهام:

• Peashootapp
• Freckle
• Base Camp
• form Spring

يمكن أن يكون Pricing بسيطا وفي جدول عادي:

• Blinksale
• Zendesk

اضغط هنا للتجربة:

قم بوضع صورة صغيرة بحجم الإيقونات الأصلية:

<img src="spacer.gif" class="icon" alt="" />

واستخدم الكلاس icon لاظهار الصورة الأصلية:

img.icon {
	background: url(folder.png) no-repeat 0 0
}

يمكنك جمع كل الإيقونات في صورة واحدة واستعمال background-position سيكون أفضل بالتأكيد .

الطريقة بسيطة وأكثر احترافية من الطريقة المستعملة في Youtube حيث استعمل الموقع وسوم div بكثرة.

استعمال Bulleted List:

<h2></h2>
<ul>
	<li> <span></span></li>
	<li> <span></span></li>
	<li> <span></span></li>
	<li> <span></span></li>
	<li> <span></span></li>
</ul>

طبع البيانات:

<h2>Profile</h2>
<ul>
	<li>name: <span>cssbit</span></li>
	<li>channel views: <span>158</span></li>
	<li>age: <span>54</span></li>
	<li>joined: <span>february 12, 2007</span></li>
	<li>last sign in: <span>1 week ago</span></li>
	<li>videos watched <span>1,505</span></li>
	<li>subscribers: <span>5</span></li>
	<li>country: <span>morocco</span></li>
</ul>

ما ستضيفه الان في CSS:

ul {
	position: relative;
}
ul li {
	border-bottom:1px dotted #ccc
}
ul li span {
	position: absolute;
	right:05px
}

من المهم جدا أن تعطي الخاصية: relative للقائمة UL كي تستطيع تحريك القائمة او تغيير العرض والمكان وستبقى البيانات دائما في صندوق UL كذلك هذا مهم كي يتم احتساب المسافة في Right من يمين UL وليس من يمين الصفحة Body

الان استعمل مهارتك في CSS لتنسيق البيانات بخط جميل ولون مناسب ..

مثال مباشر

سنتعمل Class داخل Footer ونعطيه بعض الخصائص، وداخل هذا Class سنستعمل Heading (لك حرية الاختيار) والقوائم Bulleted List

<div id="footer">
	<div class="section">
	  <h2>title</h2>
	  <ul>
		 <li>link</li>
	  </ul>
	</div>
</div>

#footer .section {
	float: left;
	width:200px;
	padding:1em;
	margin: 10px;
}

كرر Class section في صفحة HTML حسب ما لديك من روابط، بعد ذلك أضف خلفية وألوان وخصائص حسب رغبتك.

ul {
	margin: 10px 0 0 0
}
ul li {
	text-transform: capitalize;
	display: block;
	padding:.2em;
	border-bottom:1px solid #BCD19E
}
ul li a {
	color:#BCD19E;
}
ul li a:hover {
	color:#fff
}

ولا تنس إضافة بعض Fix ل IE6:

/* IE Hacks */
*html #footer {
	height:1%;
}

لديك صفحة دخول إلى لوحة تحكم في مشروعك مثلا، افتح المحرر وأنشئ صفحتين:

login.html
css/reset.css
css/login.css

استعمل ملف reset لتصفير الاعدادات الافتراضية ل Elements وأنصح باستعماله.

اختر لونا مختلفا للخلفية Body وليكن بدرجة خفيفة:

body {
	background:#f2f5ec;
}

ضع النموذج البريدي في وسط الصفحة:

#page {
	width:385px;
	margin:60px auto
}

<div id="page">
</div>

غير لون الخلفية الخاص بالنموذج الى الأبيض:

form {
	background:#fff;
}

أضف خلفية مختلفة للحقول Input سواء باستعمال لون ب CSS أو على شكل صورة:

form input {
	background:url(../images/input.png) repeat-x 0 0;
	border:1px solid #ddd;
}

وخلفية أو لون مختلف عند وضع مؤشر الفأرة Focus:

form input:focus {
	background:url(../images/input-focus.png) repeat-x 0 0;
	border:1px solid #bbddfc
}

وأخيرا، استعمل Class لتغير خصائص زر الأرسال Submit:

<input type="submit" value="login" class="login" />

form input.login:hover {
	background:#666
}

يمكنك الان البدأ بتصميم واجهة UI للوحة التحكم الخاصة بتطبيقك.

يجب أن تقدم تجربة فريدة وممتعة للزائر وهو يتصفح وينتقل بين صفحات الموقع، وأن يشعر بأن الموقع يهتم به كإنسان وليس ك Robot، وسأعود لاحقا للحديث عن هذا الموضوع من وجهة نظري.

في هذا الدرس، سأقوم بتصميم نموذج تسجيل مع تغيير طريقة عرض الحقول ولما لا إضافة عبارات أداعب بها الزائر، كي لا يشعر أنه أمام نموذج بريدي عادي لا يختلف عن ملايين اللنماذج التي يصادفها كل يوم.

تجربة النموذج البريدي:

اضغط هنا لرؤية المثال

الطريقة:

بعد أن نضع النصوص والحقول في نفس السطر أو في فقرة، نضيف بعض الخصائص على Input

form input {
	border:0;
	border-bottom:1px dotted #666;
	background: none;
	color:#C13E1F
}

من المهم أن نضيف هذا السطر في البداية، كي لا يظهر border على كامل input

form input {
	border:0;
}

زر الأرسال كي يظهر بشكل مختلف نضيف له Class وخصائص مختلفة:

<input type="submit" value="sign up" class="submit" />

form input.submit {
	background: #467B2C;
	color:#fff;
	border:none;
	padding:.5em
}

يمكن إنتقاء عبارات تضعها بدل your username .. والعبارات العادية، طالما أنك صممت النموذج على شكل فقرة أو رسالة ان صح التعبير، يمكن أيضا تغيير لون وشكل الحقول لتكون أكثر وضوحا ..

تمة عدة طرق لحل مشكلة عدم ظهور صور PNG بشكل شفاف في متصفحات IE6 فما تحت، من بينها استعمال ملف IE7، و بعض المواقع ك woothemes تستعمله في أعمالها الجميلة

يمكن تحميل الملف ووضعه في مجلد JS ضمن ملفات مشروعك، كما يمكن استدراجه مباشرة من مكتبة google code

<!--[if lt IE 7]>
 <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
 type="text/javascript"></script>
< ![endif]-->

الان اي صورة او ايقونة شفافة بصيغة PNG يجب أن تضيف لها -trans كالتالي:
logo-trans.png
edit-trans.png
..

وستظهر بشكل شفاف في متصفح IE6 (والأقل)

تجربة بدون ملف ie7
تجربة بملف ie 7

جرب المثالين على متصفح IE6

ملاحظة مهمة جدا، بعد استعمال ملف IE7 قد تظهر بعض الصور أو الإيقونات بشكل صغير في IE6 لذا من الأفضل إضافة width و height

<img src="10-trans.png" alt="" width="48" height="48" />

من المؤسف أننا كمطورين، مضطرين للمرور بكل هذا التعب والازعاج، فقط لدعم شفافية PNG في متصفحات IE