اعتذر لاني لم أستطع وضع كل الدرس في صفحة واحدة وذلك لظروفي الخاصة ..
نتابع بمشيئة الله تعالى ...:::...:::
الخلفيات
مدعومة من كل المتصفحات ..
التأثيرات ::
- background-size
- background-origin
background-size
نقوم بتحديد حجم الخلفية وبهذا يضيف شكل جميل للصورة والموقع ..
لنفرض أن لدي صورة كبيرة جدا وأريد أن لأأضعها كخلفية .. لايوجد مشكلة بعد الأن لو فكرت قليلا لإستطعت تصميم كود لتصغير حجم الصورة ..
الخيارات ::
- الطول والعرض بالكسل .
- الطول والعرض بالنسبة المؤوية ..
- كلمة (cover). تغطي كامل الصفحة .وتتمدد .
- كلمة (contain)تغطي الصفحة فقط .. عليك كتابة أمثلة لتراها وكيف تنفذ وتظهر .
أمثلة :
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:100px 100px;
}
div.s
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
div.contain
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:contain;
}
div
background-origin
هذه الخاصية تقوم بتحديد موضع الصورة .. له ثلاث خيارات ::
- content-box:: وهنا تحديد الصورة في مكان الكتابة فقط
- border-box:: ملئ الصورة حتى الحدود .
- padding-box:: ملئ الصورة لحدود البادينغ (الهوامش الخارجية ).
أمثلة ::
{
border:1px solid black;
padding:35px;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
div
تأثيرات النصوص
أخوتي الأعزاء .. فكرة الـCSS3 هي أن نقلل من استخدام javascript إلا في ajax وبذلك يصبح التصميم متكامل أكثر وأجمل كثيرا .
تأثيرات النصوص تحوي بداخلها العديد من الخيارات الرائعة التي تثرينا بها css3
- text-shadow (غير مدعومة IE)
- word-wrap
الخيارات : بالترتيب .
- البعد العامودي
- البعد الأفقي
- الشفافية (blur)
أمثلة ::
color:white;
text-shadow:2px 2px 4px #000000;
text-shadow:0 0 3px #FF0000;
text-shadow:2px 2px 8px #FF0000;
word-wrap
هذا يجبر النصوص الطويل على النزول لسطر جديد ..
لها خياران ::
normal
break-word
مثال :
word-wrap:break-word;
إضافة الخطوط للموقع
أحد التقنيات الجميلة في CSS3 هي اننا نستطيع أن نضيف الخطوط التي نريدها وبأي شكل نريدها ولكن بالطريقة التالية
تستطيع في الCSS3 أن تضع متغيرات جديدة
ركزو معي قليلا ..
الطريقة كالتالي ::
- عليك وضع الخطوط التي تريد اضافتها لموقعك في نفس موقع ملف css وهي تكون بتردد .ttf أو eof
- تكتب الكود التالي :
{
font-family: myFirstFont;
src: url('Test.ttf'),
url('Test.eot') format("opentype");
}
@font-face
الشرح هو أننا اطلقنا اسم على الخط الجديد وأسميناه myfirstFont
ثم src : وضعنا رابط الملف ..
3. نكتب أيضا في المكان الذي نريد استخدامه به
font-family:myFirstFont;