ماهو CSS3 ؟
CSS3 هو الجيل الثالث من CSS وهو حاليا قيد التطوير, ولكن مع ذلك العديد من المتصفحات أصبحت بالفعل تتضمن الكثير من ميزاته الرائعة في إصداراتها الجديدة وهي:الأشياء الجديدة التي يمكن أن تقوم بها بإستخدام CSS3 هي (الظل - التدرج - الحواف الدائرية - التحريك - إلخ) كلها تخدمك لكي تقوم بإبداع أشياء أكثر جمالاً بدون الحاجة للصورة والجافا سكربت وفي النتيجة لتكون أسرع بكثير في تحميل الصفحات.
الخطوة الأولى كود HTML :
كود PHP:
<form class="form">
<input id="name" type="text" name="name" />
<label for="name">الاسم</label>
<input id="email" type="text" name="email" />
<label for="email">البريد الإلكتروني</label>
<input id="web" type="text" name="web" value="http://www.urfile.com" />
<label for="web">موقع الانترنت</label>
<textarea name="text"></textarea>
<label for="msg">نص الرسالة</label>
<input type="submit" value="ارسل" /> </form>
<pre>
يبدو مشروعنا الآن بدون إضافة الستايل كما في هذه الصورة :
الخطوة الثانية : إضافة بعض أكواد الستايل الأساسية : بدون CSS3
كود PHP:
form{
float:right;
}
input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 9pt Tahoma, ِarial;
width: 400px;
background: #FFFFFF;
text-align:right;
}
textarea {
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
}
.form label {
margin-left: 10px;
color: #999999;
text-align:right;
float: right;
}
.submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
}
ليبدو مشروعنا الآن كما في الصورة التالية :
أعتقد بما أن الدرس مقدم للمستوى المتوسط فهذه الأكواد الخاصة بالستايل هي بسيطة وتعودنا على استعمالها ولا داعي لشرحها ومع ذلك في حال وجود أي استفسار
أنا جاهز من خلال التعليقات.
الخطوة الثالثة : Box-shadow
هذه الصفة تعطي تماما خيال أو ظل حول الأشياء والسينتاكس (تركيب الجملة ) الخاصة بهذه الصفة يكون كالتالي :
كود PHP:
box-shadow: <color> <horizontal offset> <vertical offset> <blur>;
Horizontal offset: تعني مكان ظهور الظل من اليسار إلى اليمين, فإذا قمنا بوضع القيمة 2 بيكسل فهذا يعني أن الظل سيظهر بمقدار 2 بيكسل من اليمين.
Vertical offset: نفس الشيء ولكن من الأعلى للأسفل.
Blur: ببساطة هي كمية ضبابية الظل التي سنراها, مع الملاحظة أن اقل قيمة لها هي 0
وهكذا نقوم بإستعمالها في ملف الستايل :
كود PHP:
input, textarea {
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
تلاحظ أن هذه الأسطر الثلاثة متشابهة جدا.- box-shadow : من خصائص الـ CSS3 الأساسية ولا تستعمل إلا في أوبرا.
- -webkit-box-shadow: تستعمل فقط في المتصفحات التي تعمل وتدعم محرك Webkit مثل كروم وسفاري .
- -moz-box-shadow: تستعمل فقط في المتصفحات التي تعمل وتدعم محرك Mozilla’s Gecko مثل فايرفوكس , كامينو , فلوكس , سيو مانكي.
- وحتى إكسبلورر لديه طريقته الغريبة في التعامل مع الأمور حيث يمكنك متابعة الرابط التالي لتفهم آلية عمل الكود في إكسبلورر capable of making a shadow ولكن مع ذلك لن يظهر التصميم كما تريد بشكل كامل.
box-shadow: لا يتعامل مع الألوان الطبيعية RGB لأنه يجب عليك التعامل مع تقنيات CSS3 حيث يكون اللون على الشكل RGBA وهي تعني بكل بساطة اللون مع الشفافية وتكتب بالشكل التالي RGBA(أحمر , أخضر , أزرق , ألفا )
السينتاكس الخاص بها أو تركيب الجملة كالتالي :
كود PHP:
rgba(<red>,<green>,<blue>,<opacity>);
فعند إعطائنا لهذه الصفة اللون الأسود مع قيمة شفافية 10 بالمئة (0.1) وبدون إزاحة عرضية أو طولية وبقيمة ضبابية على الظل تبلغ 8 بيكسل سيبدو الفورم بالشكل التالي:
سنقوم في الدرس التالي بإستعمال الخاصية Background Gradient و border-radius والشرح بالتفصيل الممل ماهي هتين الخاصيتين وكيفية التعامل معهم. نلتقي غداً مع الدرس الثاني والأخير لإنهاء الفورم .
هذا الشرح مقدم من جديد مشاريع الويب
المصدر
رد مع اقتباس
