بسم الله الرحمان الرحيم
شاهد أيضاً: تعلم تصميم المواقع – تعلم HTML, HTML5, CSS, CSS3: المقدمة
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
احتياجات قبل البدء:
نظام التشغيل:
Windows أو Linux أو MAC OS …
متصفح ويب:
Chrome أو Firefox أو Opera …
محرر الأكواد:
Notepad++ أو Komodo Edit أو Netbeans أو Sublime Text …
أيقونات: https://www.iconfinder.com
ألوان: https://html-color-codes.info
المقدمة – Introduction:
الجديد في لغة CSS3 هو تم تقسيم اللغة الى مجلدات “Modules” في كل مجلد خواص معينة لتسهيل التصميم.
التوافق – Vendor Prefixes:
هناك خواص تُكتب في بداية العناصر لجعلها متوافقة مع المتصفحات وهي :
-webkit-attribute: جوجل كروم، سافاري، ios, android
-moz-attribute: فايرفوكس
-o-attribute: اوبرا
-ms-attribute: انترنت اكسبلورر
* يمكن الاستغناء عن هذه الخواص اذا كانت مدعومة مسبقاً من المتصفح.
* استخدم موقع “caniuse” لمعرفة الخواص المدعومة وغير المدعومة للمتصفحات وإصداراتها.
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
حواف دائرية – Border Radius:
إضافة حواف للعنصر.
يمكن عمل عدة أشكال عن طريق تغيير قيمة الخواص بpx او النسبة المئوية.
بنية الكود:
border-radius: px
أعلى اليمين:
border-top-right-radius: px
أعلى اليسار:
border-top-left-radius: px
أسفل اليسار:
border-bottom-left-radius: px
أسفل اليمين:
border-bottom-right-radius: px
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
الظلال – Box Shadow:
إضافة ظل للعناصر.
بنية الكود:
box-shadow: px
القيمة الافتراضية: none أو outset
box-shadow: px px outset
Outset: ظل خارج العنصر
Inset: ظل داخل العنصر
تُكتب القيم بـpx في سطر واحد أو سطر تحت الآخر.
خواص ضرورية:
Horizontal shadow (أفقي)
Vertical shadow (عمودي)
يمكن كتابة قيم سلبية.
خواص اختيارية:
Color: اللون (اللون الافتراضي : أسود)
Blur: تأثير ضبابي
Spread: انتشار الظل
لا يمكن كتابة قيم سلبية.
* لعمل ظل آخر نضع فاصلة بين سطر وسطر آخر.
* تُكتب القيم في سطر واحد بالترتيب التالي:
Horizontal Vertical Blur Spread Color
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
الأحجام – Box Sizing:
تحديد حجم الشكل مسبقاً.
بنية الكود:
border-box:
القيمة الافتراضية: content-box
border-box: يتم كتابته داخل علامة * لتنسيق جميع العناصر ويحتفظ بالمساحة الاصلية للشكل ولا تتأثر بخواص أخرى مثل padding, border, margin.
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
الظلال للنصوص – Text Shadow:
إضافة ظل للنصوص.
بنية الكود:
text-shadow: px
Horizontal (أفقي): تحريك الظل لليمين بقيمة موجبة ولليسار بقيمة سالبة
Vertical (عمودي): تحريك الظل للأعلى بقيمة موجبة وللأسفل بقيمة سالبة
Blur-Radius: نسبة انتشار الظل
Reset (الغاء): none
Hover: إظهار الظل باستخدام الماوس
تُكتب الخواص في سطر واحد على هذا الترتيب:
Horizontal-Shadow, Vertical-Shadow, Blur-Radius, Color
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تحديد النصوص – Text Overflow:
تحديد النصوص عن طريق إظهار بعض الكلمات من نص طويل وتكملته في صفحة أخرى على سبيل المثال بواسطة زر اقرأ المزيد يضغط عليه الزائر ويشاهد التتمة.
بنية الكود:
text-overflow:
clip: القيمة الافتراضية
ellipsis: إظهار علامة الحذف على شكل ثلاث نقط: …
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تنزيل تتمة النص – Word Wrap:
تنزيل تتمة نص لا يحتوي على مسافات أسفل السطر، وهذه الخاصية عكس white-space التي تنزل نص يحتوي على مسافات فقط.
بنية الكود:
word-wrap:break-word
القيمة الافتراضية: normal
break-word: تنزيل النص للأسفل.
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
لف العنصر – 2D Transform Rotate:
بنية الكود:
transform:rotate( deg)
rotate: لف العنصر إلى زاوية معينة بدرجة محددة (deg)
يقبل قيمة موجبة (لف الى جهة اليمين) وقيمة سالبة (لف إلى جهة اليسار)
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تمديد عرض وطول العنصر – 2D Transform Scale:
تمديد عرض وطول العنصر.
بنية الكود:
transform:scale(width,height)
القيمة الافتراضية: مرة واحدة (1,1)
* تمديد الطول فقط:
(ScaleY:)
* تمديد العرض فقط:
(ScaleX:)
* يمكن ادخال القيمة بالفاصلة (0.5 او .5)
* يمكن ادخال نقس القيمة للعرض والطول
القيمة الافتراضية: none
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تحريك العنصر – 2D Transform Translate:
تحريك العنصر (يمين/يسار، أعلى/أسفل).
بنية الكود:
translate:(x,y)
تمديد الطول فقط:
(TranslateY:)
تمديد العرض فقط:
(TranslateX:)
* عند إدخال قيمة موجبة ( يمين، أسفل)
* عند إدخال قيمة سالبة (يسار، أعلى)
* يمكن استخدام خواص أخرى (rotate,scale) لنفس العنصر.
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
إمالة العنصر – 2D Transform Skew:
إمالة العنصر في زاوية معينة ( زوايا انحراف )
transform:skew(x,y):
* تحديد القيمة بـ (deg)
إمالة الطول فقط:
(SkewY:)
إمالة العرض فقط:
(SkewX:)
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
إمالة وتحريك وتمديد العنصر – 2D Transform Matrix:
إمالة وتحريك وتمديد العنصر في كود واحد.
بنية الكود:
matrix( a, b ,c, d, X, Y )
matrix( ScaleX, SkewY, SkewX, ScaleY, TranslateX, TranslateY)
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
لف العنصر (ثلاثي الأبعاد) – 3D Transform Rotate X,Y,Z:
لف العنصر بشكل ثلاثي الأبعاد.
RotateX(): التفاف زاوية (اليمين/اليسار)
RotateY(): التفاف زاوية (الأعلى/الأسفل)
RotateZ(): كود مختصر لـRotate (تحديد الطول والعرض معاً)
transform:RotateZ()
*90°: زاوية قائمة لا تظهر
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تحريك العنصر (ثلاثي الأبعاد) – 3D Transform Translate:
تحريك العنصر بشكل ثلاثي الأبعاد.
transform:translate3d(x, y, z)
translateZ: تقريب أو إبعاد العنصر (تحريكه للامام أو للوراء)
transform:translateZ()
* عند إدخال قيمة موجبة يتم تقريب العنصر
* عند إدخال قيمة سالبة يتم ابعاد العنصر
يجب إضافة خاصية “perspective” لتفعيل الشكل ثلاثي الأبعاد.
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تمديد عرض وطول العنصر (ثلاثي الأبعاد) – 3D Transform Scale3D:
تمديد عرض وطول العنصر بشكل ثلاثي الأبعاد.
transform:scale3d(x,y,z)
scaleZ(): كود مختصر (تحديد الطول والعرض معاً)
transform:scaleZ()
مثال:
تنسيق css3:
الشكل على المتصفح:
1
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
إمالة وتحريك وتمديد العنصر (ثلاثي الأبعاد) – 3D Transform Matrix:
إضافة كل الخواص في كود واحد (شكل ثلاثي الأبعاد).
يمكن إدخال 16 قيمة كالتالي:
matrix3d(ScaleX,0,0,0,0, ScaleY,0,0,0,0,1,0, TranslateX, TranslateY, ScaleZ,1)
موقع لتعلم ومعرفة خواص العنصر:
http://ds-overdesign.com/transform/matrix3d.html
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
المنظور – Perspective:
تفعيل خاصية الشكل ثلاثي الأبعاد.
* يتم إدخال قيمة بـpx لتقريب أو إبعاد الصورة بالنسبة للمشاهد.
* كلما كانت القيمة أكبر كلما كانت الصورة أقرب للعين وكلما كانت أصغر كلما كانت الصورة أبعد من العين.
* الخاصية لا تؤثر على شكل العنصر نفسه.
perspective: px
class:first-of-type: أول عنصر
class:nth-of-type: ثاني عنصر
class:last-of-type: ثالث عنصر
Perspective-origin: نقطة التلاشي (المكان الذي تنظر إليه في العنصر)
perspective-origin:center
* يمكن إدخال قيمة بالنسبة المئوية وpx والاتجاهات (يمين/يسار/أعلى/أسفل)
left: 0% (القيم السالبة تقرب الصورة الى اليسار)
right: 100% (القيم الموجبة تقرب الصورة الى اليمين)
center: 50% (الوسط)
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تغيير مكان العنصر – 3D Transform Origin:
تغيير مكان العنصر (النقطة التي يتحرك منها العنصر)
transform-origin:top left
شكل التحويل:
transform-style:preserve-3d
يقبل قيمتين:
flat: لا تحافظ على حالة 3D (القيمة الإفتراضية)
preserve-3d: تحافظ على حالة 3D
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
19. إظهار / إخفاء ظهر العنصر – 3D Transform Backface Visibility:
إظهار / إخفاء ظهر العنصر (معكوس)
backface-visibility:visible
visible: إظهار ظهر العنصر
hidden: اخفاءه
* تُستخدم مع خاصية rotate (أفقي rotateY او عمودي rotateX ).
مثال:
تنسيق css3:
الشكل على المتصفح:
تطبيق إنشاء بطاقة:
عند اخفاء ظهر العنصر يظهر العنصر الثاني مكانه (قلب العنصر الى عنصر اخر)
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
خواص جديدة للخلفية – Background New Features:
تحديد حجم الخلفية حسب حجم العنصر:
background-size: width height
القيمة الافتراضية: auto auto (تأخذ من حجم الصورة الاصلي)
* قبل CSS3 كانت الخلفية تاخذ من حجم الصورة نفسها (العرض والطول).
* يمكن تحجيم الصورة بالبكسل أو بالنسبة المئوية
contain: لا يتم ملئ خلفية العنصر (الخلفية تتكرر في العنصر)
cover: يتم ملئ خلفية العنصر بطريقة صحيحة (خلفية كاملة للعنصر)
* الخلفية تتمدد مع الشاشة ولا تتكرر وتُستخدم في تصميمات متجاوبةresponsive.
تحديد مكان ابتداء الخلفية:
background-clip:
border-box: تبدأ من الحواف border
padding-box: تبدأ من أول الهامش
content-box: تبدأ من أول محتوى نصي
تحديد مكان ابتداء صورة الخلفية:
background-origin:
نستخدم نفس الخواص السابقة (border-box, padding-box, content-box)
عدم تكرار الخلفية:
background-repeat:no-repeat
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تنسيق المحتوى خارج العنصر (ميزات جديدة) Overflow New Features:
هذه الخاصية في CSS2 كان تخفي أي نص خارج العنصر (في الأعلى والأسفل)،
في CSS3 يمكن تنسيق المحتوى بالطول لوحده والعرض لوحده بواسطة علامة النزول والهبوط scroll ونفس خواص CSS2 السابقة (visible/hidden)
في CSS3 يوجد خاصيتين:
اخفاء المحتوى خارج العنصر أفقيا (بالعرض):
overflow-x:visible
اخفاء المحتوى خارج العنصر عموديا (بالطول):
overflow-y:visible
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
مكان العناصر – Flex Direction – Flex Wrap Flex Box:
وضع العناصر بمرونة في الصفحة (خاصية تعمل مع المتصفحات الحديثة)
* Container: إطار العمل
وضع العناصر بجانب بعضها داخل الاطار:
display: flex
وضع العناصر بجانب بعضها خارج الإطار:
display: inline-flex
اتجاه العناصر:
flex-direction:
القيمة الافتراضية: row
اتجاه العناصر أفقي حسب اتجاه الصفحة (صف واحد):
flex-direction: row
عكس اتجاه العناصر في الصفحة:
flex-direction: row-reverse
اتجاه العناصر عمودي حسب اتجاه الصفحة:
flex-direction: column
عكس اتجاه العناصر في الصفحة:
flex-direction: column-reverse
لف العنصر:
flex-wrap:
القيمة الافتراضية (لا تتغير): nowrap
التفاف العنصر (يتغير حسب مساحة الإطار):
flex-wrap:wrap
عكس العناصر (يتغير حسب مساحة الاطار بترتيب عكسي):
flex-wrap:wrap-reverse
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
مكان العناصر 2 – Flex Flow Justify Content:
الكود المختصر لـ(Flex-direction و flex-wrap) بنفس الخواص
flex-flow: flex-direction flex-wrap;
محاذاة المحتوى (وضع العنصر بداخل إطار Div)
justify-content:
بدء العنصر من أول الخط بشكل أفقي
القيمة الافتراضية: flex-start
بدء العنصر من آخر الخط بشكل أفقي
flex-end
توسيط العناصر
center:
وضع مساحات متساوية بين العناصر
space-between:
وضع مساحات قبل وبعد العناصر
space-around:
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
محاذاة المحتوى والعناصر – Align Items Align Content:
محاذاة العناصر align-items خاصية شبيهة بjustify-content
الفرق بينهما:
هذه الخاصية تحجم العنصر حسب المحتوى بتنسيق عمودي عكس justify-content تحتفظ بنفس حجم العنصر بتنسيق أفقي
القيمة الافتراضية: stretch
تحتفظ بالعرض والطول كما هو
بدء العنصر من أول الخط بشكل عمودي
flex-start:
بدء العنصر من آخر الخط بشكل عمودي
flex-end:
توسيط العنصر عمودياً
center:
تحجيم العنصر فقط وتنسيقه
baseline:
محاذاة المحتوى align-content : يتم تنسيق العناصر بنفس خواص justify-content لكن بشكل عمودي ونستخدم معها خاصية flex-wrap لوضع العنصر في الاسفل
القيمة الافتراضية: stretch
توسيط العناصر طولياً
center:
بدء العنصر من أول الخط طولياً
flex-start:
بدء العنصر من آخر الخط طولياً
flex-end:
وضع مساحات متساوية بين العناصر طولياً
space-between:
وضع مساحات قبل وبعد العناصر طولياً
space-around:
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
ترتيب العناصر وتحجيمها – Order, Flex Grow, Flex Shrink:
لترتيب العناصر بواسطة flex box
display:flex
لزيادة حجم العنصر بمرونة (ياخذ من حجم العناصر الأخرى حسب الحجم الأصلي للعنصر والإطار)
flex-grow:
القيمة الافتراضية: 0
كلما زادت القيمة يزداد حجم العنصر بمرونة
لتقليص حجم العنصر بمرونة (ياخذ من حجم العناصر الأخرى حسب الحجم الأصلي للعنصر والإطار)
flex-shrink:
القيمة الافتراضية: 1
كلما زادت القيمة يتقلص حجم العنصر بمرونة
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
الحجم الرئيسي – Flex Basis – Shorthand:
تحديد الحجم الرئيسي لعنصر معين من عناصر Flex Box
flex-basis:
القيمة الافتراضية: auto
يتم التحكم في حجم العنصر تلقائياً ويتغير بشكل مرن
الكود المختصر:
Flex: Flex-Grow Flex-shrink Flex-Basis
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
الإنتقالTransition – Intro :
التحكم بكيفية الإنتقال من خاصية إلى خاصية اخرى واضافة مؤثرات على العنصر (انتقال سريع او بطيئ …)
يمكن استخدام 4 خواص:
خصائص الإنتقالProperty
وقت الإنتقالDuration
سرعة الإنتقال Timing Function
مهلة قبل الإنتقال Delay
ملحوظة: property و duration خاصيتين أساسيتين لابد من كتابتهم.
الكود في سطر واحد:
transition : property duration timing function delay
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
خصائص ووقت الإنتقال – Transition Property Duration
لتحديد خصائص الإنتقال:
transition-property:
القيمة الافتراضية: all
يمكن إضافة خواص مثل الحجم والخلفية واللون… واستخدامها مع خاصية:hover
background, width..
وأيضاً الخواص الإضافية مثل background-color – background-image …
الغاء خصائص الإنتقال :
none:
تحديد وقت انتقال العنصر من حالة الى حالة:
transition-duration:
* يجب كتابة الكود مع خاصية Property
القيمة الافتراضية: 0s
تقبل قيم (s, ms)
* يمكن كتابة قيمة واحدة لكل العناصر أو قيمة واحدة كل عنصر لوحده
* لمعرفة الخواص المدعومة نبحث عن CSS Animated Properties MDN
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
سرعة الإنتقال – Transition – Timing Function, Delay:
لتحديد سرعة الإنتقال:
transition-timing-function:
القيمة الافتراضية: ease
لبدء الإنتقال تدريجيا وينتقل بسرعة وينتهي تدريجيا
linear:
لبدأ الإنتقال بشكل فوري وينتهي بشكل فوري بمعدل ثابت
ease-in:
لبدء الإنتقال تدريجيا وينتهي بشكل فوري
ease-out:
لبدء الإنتقال بشكل فوري وينتهي تدريجيا
ease-in-out:
لبدء الإنتقال تدريجياً وينتقل ببطئ وينتهي تدريجياً
تحديد مهلة قبل بدئ الإنتقال :
delay:
خواص إضافية:
الانتقال بالخطوات
steps
لتحديد عدد الخطوات من مكان لآخر, (start أو end)
حالة الانتقال من البداية
start:
حالة الانتقال في النهاية
end:
معادلة تسريع وابطاء سرعة الانتقال على الموقع: http://www.css3beziercurve.net
cubic-bezier(.42, 0, .58, 1)
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
أمثلة لخصائص الإنتقال – Transition – Examples:
– الشفافية Opacity
– لون الخلفية Background Color
– تكبير وتصغير العنصر Transform Scale
– تدوير العنصر Transform RotateZ
– حواف دائرية Border Radius
– الظلال Box Shadow
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تقسيم العنصر إلى أعمدة متعددة Multi Columns – Column Count, Column Gap:
تقسيم العنصر الى أعمدة متعددة
تنسيق عدد الأعمدة :
column-count :
القيمة الإفتراضية: auto
* يمكن إدخال أعداد
تنسيق الفجوة بين الأعمدة :
column-gap :
القيمة الافتراضية: normal
* يمكن إدخال قيم بالبكسل
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تقسيم العنصر إلى أعمدة متعددة 2 Multi Columns – Column Rule, Column Width:
تنسيق المسافات بين الأعمدة (الحواف) :
column-rule :
يمكن إدخال الخواص التالية:
Width | Style | Color
* الكود المختصر يقبل نفس خواص Border
تنسيق عرض الأعمدة (الحد الأدنى):
column-width :
القيمة الافتراضية: auto
* يتم تقسيم الأعمدة حسب حجم الشاشة
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تقسيم العنصر إلى أعمدة متعددة 3 Multi Columns – Column Span, Shorthand:
وضع النص في خانة لوحده:
column-span: all
القيمة الافتراضية: 1
الكود المختصر لتنسيق عرض وعدد الأعمدة :
columns: width(العرض) count(عدد الأعمدة)
القيمة الافتراضية: auto auto
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تحريك العناصر Animation – Name, Duration, Keyframes:
تحريك العناصر عن طريق اضافة خواص في keyframes
بنية الكود Keyframes Syntaxe :
@keyframes Animation-Name
Selectors:
From (0%) to (100% Or 0%, 10%, 20%, 50%, 100%)
CSS Attributes
تحديد اسم العنصر الذي يتم تحريكه :
:animation-name
القيمة الافتراضية: none
تحديد وقت تحريك العنصر بالثواني (s) :
:animation-duration
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تحريك العناصر 2 Animation – Iteration Count, Direction:
تحديد عدد تكرار التحريك Animation Iteration Count
animation-iteration-count:
القيمة الافتراضية (تكرار مرة واحدة): 1
number: عدد التكرار
infinite: تكرار الى ما لا نهاية
تحديد اتجاه التحريك Animation Direction
animation-direction:
القيمة الافتراضية: normal
reverse: بدء التحريك من الاخير الى الاول (اتجاه عكسي)
alternate: بدء التحريك من الأول الى الاخير ثم يرجع من الاخير الى الاول وهكذا
alternate-reverse: بدء التحريك من الاخير الى الاول ثم يرجع من الاول الى الاخير وهكذا
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تحريك العناصر 3 Animation – Delay, Fill Mode:
تحديد مهلة قبل بدء التحريك Animation Delay:
animation-delay :
القيمة الافتراضية: 0
بدء التحريك مباشرة
تحديد موضع التحريك Animation Fill Mode:
animation-fill-mode :
القيمة الافتراضية: none
forwards: تحديد اخر خاصية في keyframes بعد ما ينتهي التحريك
backwards: تحديد اول خاصية في keyframes قبل بدئ التحريك
both: استخدام forwards و backwards معاً
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تحريك العناصر4 Animation Play State, Timing Function:
تحديد وضع تحريك العنصر: إيقاف أو تشغيل.
animation-play-state
القيمة الافتراضية: running
تحديد وقت تحريك العنصر Timing Function
القيمة الافتراضية: ease
يتم إدخال نفس خواص Transition:
Ease – Ease in – Ease out – Ease in out – Linear
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تحريك العناصر 5 Animation Shorthand – الكود المختصر:
القيمة الافتراضية:
animation: none 0s ease 0s 1 normal none running
يتم إضافة الخواص على الترتيب التالي:
* Name
* Duration
* Timing Function
* Delay
* Iteration
* Direction
* Fill Mode
* Play State
تطبيقات تحريك العناصر :
1. Animation – Create Swing Dropdown
تنسيق css:
الشكل على المتصفح:
2. Animation – Create Wave Audio Loading
تنسيق css:
الشكل على المتصفح:
3. Animation – Create Snake Loading
تنسيق css:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تحديد العناصر Selectors – Next, Start With, End With, Contains:
تنسيق عناصر محددة Selectors :
علامة التالي Next: ~
attribute1 ~ attribute2
تنسيق أي عنصر بعد العلامة داخل نفس العنصر الأب
علامة يبدأ بـ Start With: ^
[class^=”name”]
تنسيق أي عنصر يبدأ بحرف كذا او اسم كذا “”
علامة ينتهي بـ End With: $
[class$=”name”]
تنسيق أي عنصر ينتهي بحرف كذا او اسم كذا “”
علامة الكل All: *
* { }
تنسيق أي عنصر يحتوي على حرف كذا او اسم كذا “”
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تحديد العناصر 2 Selectors – Checked, Enabled, Disabled, Empty:
تنسيق اي عنصر عليه علامة Checked ويمكن تحديد عناصر معينة فقط
:checked
تنسيق أي عنصر غير مفعل Disabled ويمكن تحديد عناصر معينة فقط
:disabled
تنسيق أي عنصر مفعل Enabled ويمكن تحديد عناصر معينة فقط
:enabled
تنسيق أي عنصر فارغ Empty ( لا يوجد بداخله عناصر اخرى او نص …) ويمكن تحديد عناصر معينة فقط
:empty
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تحديد العناصر 3 Selectors – Not, Last-Child, First-Of-Type:
عدم تنسيق عنصر معين من العنصر الأب Not ويمكن أن يكون عنصر او class او first-child أو غير ذلك…
parent:not(selector)
تنسيق اخر عنصر طفل Last Child من العنصر الأب
parent:last-child
تنسيق أول عنصر من نفس النوع داخل العنصر الأب First Of Type
parent:first-of-type
تنسيق آخر عنصر من نفس النوع داخل العنصر الأب Last Of Type
parent:last-of-type
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تحديد العناصر 4 Selectors – Only Child, Only Of Type, Selection:
تنسيق العنصر الطفل الوحيد ضمن العنصر الاب Only Child (ليس معه عناصر اطفال آخرين)
attribute:only-child
تنسيق العنصر الطفل الوحيد من نفس النوع ضمن العنصر الاب Only Of Type (ليس معه اطفال اخرين من نفس النوع)
attribute:only-of-type
إضافة تنسيقات عند تحديد العناصر بالماوس Selection مثل تغيير الخلفية واللون
::selection
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تحديد العناصر 5 Selectors – Nth Child, Nth Of Type:
تحديد عنصر معين من العناصر وتنسيقه Nth-Child
تحديد عنصر معين من العناصر حسب نوعه فقط وتنسيقه Nth-Of-Type
Nth: Number th[1st, 2nd, 3rd, 4th, 5th]
يمكن إدخال:
رقم، معادلة، كلمة مفتاحية
attribute:nth-child(Number, Formula, Keyword)
attribute:nth-of-type(Number, Formula, Keyword)
تحديد عنصر معين برقمه فقط Number
attribute:nth-child(Number)
attribute:nth-of-type(Number)
تحديد عنصر معين بكلمة مفتاحية Keyword:
attribute:nth-child(Keyword)
attribute:nth-of-type(Keyword)
even: تحديد العناصر بدءً من العنصر الاخير وتنسيقه وتجاوز العنصر الذي بعده ثم تنسيق العنصر الذي بعده وهكذا
odd: عكس الخاصية السابقة، تحديد العناصر بدءً من العنصر الأول وتنسيقه وتجاوز العنصر الذي بعده ثم تنسيق العنصر الذي بعده وهكذا
Nth Last Child: مثل nth-child لكن يتم تحديد العناصر بدءً من العنصر الاخير
attribute:nth-last-child(Number, Formula, Keyword)
Nth Last Of Type: مثل nth-of-type لكن يتم تحديد العناصر حسب نوعها بدءً من العنصر الاخير
attribute:nth-last-of-type(Number, Formula, Keyword)
مثال:
تنسيق css3:
الشكل على المتصفح:
تحديد العناصر 6 Selectors – Nth Child, Nth Of Type:
تحديد عنصر باستخدام معادلة وتنسيقه Formula
attribute:nth-child(n+number)
تحديد العنصر رقم كذا وكل العناصر التي بعده
attribute:nth-of-type(n+number)
تحديد العنصر رقم كذا وكل العناصر التي بعده حسب النوع
attribute:nth-last-child(n+number)
تحديد العنصر رقم كذا وكل العناصر التي بعده بدءً من العنصر الاخير
attribute:nth-last-of-type(n+number)
تحديد العنصر رقم كذا وكل العناصر التي بعده حسب النوع بدءً من العنصر الاخير
(-n+number): الخواص السابقة معكوسة
(2n+1): مثل خاصية odd، تحديد عنصر وتجاوز عنصر واحد بعده ثم تحديد عنصر اخر وهكذا
شرح المعادلة:
2*n+1 | 2*0 = 0 + 1 = 1
2*n+1 | 2*1 = 2 + 1 = 3
2*n+1 | 2*2 = 4 + 1 = 5
2*n+1 | 2*3 = 6 + 1 = 7
ونفس الأمر ينطبق على باقي المعادلات مثل:
(3n+1)
(4n+1)
….
Range: تحديد عناصر ضمن مجال معين (تحديد من العنصر رقم كذا الى العنصر رقم كذا)
attribute:nth-child(n+number)(-n+number)
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
تنسيق الخطوط Font Face:
يمكن استخدام خطوط خارجية ووضعها في الصفحة لتنسيق النصوص وميزة هذه الخاصية ان الخط يعمل في الصفحة حتى وإن كان غير موجود على نظام التشغيل (ويندوز، ماك، لينكس…)
قائمة الخطوط (مثال):
http://google.com/fonts
بنية الكودsyntaxe:
@font-face { }
font-family: اسم عائلة الخط
src: مصدر الخط
يجب وضع الخطوط بجميع الصيغ حتى تشتغل على كل المتصفحات:
TTF: True Type Font
EOT: Embedded Type Font
OTF: Open Type Font
WOFF: Web Open Font
WOFF2: Web Open Font 2
SVG: Scalable Vector Graphic
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
الاستعلامات Media Queries:
اضافة خواص للصفحة حسب مقاس عرض الشاشة (تفيد في إنشاء صفحات متجاوبة responsive)
بنية الكودsyntaxe:
@media (max-width :px) { }
Range: تنسيق حجم الشاشة ضمن مجال معين (بين كذا وكذا)
* المقاسات التي تستخدم في bootstrap: media queries standard
* اجهزة الهواتف والتابلت لها مقاسات ثابتة.
* موقع لمعرفة مقاسات كل الأجهزة: http://screensize.es
لمعرفة المزيد عن media queries يجب تعلم إنشاء تصاميم متجاوبة responsive في دروس أخرى خاصة.
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
الشفافية Opacity
جعل العنصر شفاف Opacity
opacity:
القيمة الافتراضية: 1 يظهر العنصر كما هو
يمكن إدخال القيم من 0.1 الى 0.9 لزيادة أو تخفيف درجة الوضوح
* عند إدخال القيمة0 يختفي العنصر
* هذه الخاصية غير مدعومة في متصفح أنترنت اكسبلورر
مثال:
تنسيق css3:
الشكل على المتصفح:
شاهد أيضاً: تركيب مواقع ووردبريس
شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript
إعادة تحجيم العنصر Resize
خاصية إعادة تحجيم العنصر
resize:
القيمة الافتراضية: none لا يمكن تحجيم العنصر
both: تكبير او تصغير العنصر بالطول والعرض معاً
vertical: التحكم بالطول فقط
horizontal: التحكم بالعرض فقط
* هذه الخاصية غير مدعومة في أنترنت اكسبلورر
مثال:
تنسيق css3:
الشكل على المتصفح:
