Sunday 7 Feb 2010
http://csseven.com و http://cssguy.net للبيع، الدومينين يصلحان للحديث عن CSS (دروس، روابط، حيل …)
بدون أي محتوى أو استضافة، وتم تجديدهما منذ أسابيع قليلة.
يقبل الدفع عبر Paypal أو Moneybookers
إذا لم يتقدم أحد للشراء يمكنني إهدائهما لشخص مهتم ب CSS إن كنت كذلك رجاء راسلني.
16 تعليقات »
Wednesday 3 Feb 2010
إليك طريقة سريعة وبسيطة، لإضافة Icons لنموذج بريدي
الصفحة مجربة على: Chrome, Safari, Opera, Firefox و IE7

مثال مباشر
بناء نموذج بريدي:
<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
11 تعليقات »
Wednesday 3 Feb 2010
يمكن الحصول على نماذج بريدية أنيقة، بإضافة خصائص قليلة عن طريق CSS3، ومع أن هناك متصفحات (IE وأحيانا Opera) لا تدعم الخصائص الجديدة ل CSS3 وبالتالي ستظهر التأثيرات فقط لمن يستعمل متصفحات حديثة، (التصاميم الحديثة للمتصفحات الحديثة)

مثال مباشر
بناء النموذج:
<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;
}
8 تعليقات »