/* يطبق هذا الكود تأثير التدرج عند تمرير الماوس فوق الرابط*/
أ {
اللون: #007c21؛
الانتقال: سهولة اللون .4s؛
}
أ:تحوم { اللون: #00bf32 }باستخدام CSS3، يمكنك إنشاء زوايا مستديرة لمعظم العناصر، بما في ذلك عناصر النموذج والصور وحتى نص الفقرة، دون تقديم علامات أو صور إضافية.
<!DOCTYPE html> <html لانج="ar"> <الرأس> <meta charset="utf-8" /> <title>زوايا مستديرة</title> <link rel="stylesheet" href="css/rounded-corners.css" /> </الرأس> <الجسم> <div class="all-corners"></div> <div class="one-corner"></div> <div class="elliptical-corners"></div> <div class="circle"></div> </الجسم> </html>
أربعة أمثلة تستخدم زوايا CSS الدائرية، بما في ذلك بادئات البائع الضرورية لدعم الإصدارات الأقدم من متصفحات Android وMobile Safari وSafari. بالنسبة إلى .circle ، فإن استخدام 75px له نفس تأثير 50% لأن العنصر هو 150像素*150像素.
شعبة {
الخلفية: #999؛
تعويم: يسار؛
الارتفاع: 150 بكسل؛
الهامش: 10 بكسل؛
العرض: 150 بكسل؛
}
.جميع الزوايا {
-webkit-border-radius: 20px;
نصف قطر الحدود: 20 بكسل؛
}
.زاوية واحدة {
-webkit-border-top-left-radius: 75px;
نصف قطر الحدود من أعلى اليسار: 75 بكسل؛
}
.زوايا بيضاوية {
-نصف قطر حدود webkit: 50 بكسل / 20 بكسل ؛
نصف قطر الحدود: 50 بكسل / 20 بكسل؛
}
دائرة {
-نصف قطر الحدود لـwebkit: 50%؛
نصف قطر الحدود: 50%؛
} شعبة {
الخلفية: #ff9؛
الحد: 5 بكسل صلب #326795؛
تعويم: يسار؛
الارتفاع: 150 بكسل؛
الهامش: 10 بكسل؛
العرض: 150 بكسل؛
}
.مثال-1 {
/* يجعل نصف قطر الزاويتين العلوية اليسرى والسفلية اليمنى 10 بكسل و
الزوايا العلوية اليمنى والسفلية اليسرى 20 بكسل */
نصف قطر الحدود: 10 بكسل 20 بكسل؛
}
.مثال-2 {
/* يجعل نصف قطر الزاوية العلوية اليسرى 20 بكسل، وكل الزوايا الأخرى 0 */
نصف قطر الحدود: 20 بكسل 0 0؛
}
.مثال-3 {
/* يجعل نصف قطر الزاوية العلوية اليسرى 10 بكسل، والزاوية العلوية اليمنى 20 بكسل،
الزاوية السفلية اليمنى 0، والزاوية السفلية اليسرى 30 بكسل */
نصف قطر الحدود: 10 بكسل 20 بكسل 0 30 بكسل؛
}-webkit-border-radius: r ، حيث r هو نصف قطر الشريحة، معبرًا عنه بالطول (بالوحدات). أدخل border-radius: r ، حيث r هو نصف قطر الشريحة، استخدم نفس القيمة كما في الخطوة الأولى. هذا هو بناء الجملة القياسي القصير لهذه الخاصية.-webkit-border-top-left-radius: r ، حيث r هو نصف قطر الزاوية اليسرى العليا، معبرًا عنه بالطول (بالوحدات). أدخل border-top-left-radius: r ، باستخدام نفس قيمة r كما في الخطوة الأولى. هذا هو بناء الجملة القياسي الطويل لهذه الخاصية. لإنشاء زاوية علوية يمين، استخدم top-right ; لإنشاء زاوية سفلية يمينية، استخدم Lower bottom-left bottom-right ;-webkit-border-radius: x/y ، حيث x هو نصف قطر الشريحة في الاتجاه الأفقي، و y هو نصف قطر الشريحة في الاتجاه الرأسي، ويتم التعبير عن كلاهما بالطول (مع الوحدة) . أدخل border-radius: x/y ، حيث x و y متساويان مع القيمتين في الخطوة الأولى.-webkit-border-radius: r حيث r هو نصف قطر العنصر (مع وحدة الطول). لإنشاء دائرة، استخدم الصيغة المختصرة، حيث يجب أن تكون قيمة r مساوية لنصف ارتفاع العنصر أو عرضه. أدخل border-radius: r حيث r هو نصف قطر العنصر (مع وحدة الطول)، وهو ما يساوي r في الخطوة الأولى. هذا هو بناء الجملة القياسي بدون بادئة. ملاحظة: المتصفحات القديمة التي لا تدعم border-radius ستعرض العناصر ذات الزوايا المربعة فقط. يؤثر border-radius فقط على زوايا العنصر الذي تم تطبيق النمط عليه، وليس على زوايا عناصره الفرعية. لذلك، إذا كان العنصر الفرعي له خلفية، فقد تظهر الخلفية في زوايا عنصر أصلي واحد أو أكثر، مما يؤثر على نمط الزاوية المستديرة. في بعض الأحيان ستظهر خلفية العنصر (وليس خلفية عناصره الفرعية هنا) من خلال زواياه المستديرة. لتجنب ذلك، يمكنك إضافة قاعدة نمط بعد تعريف border-radius للعنصر: background-clip: padding-box;
استخدم text-shadow لإضافة تأثيرات ظل ديناميكية إلى النص في الفقرات والعناوين والعناصر الأخرى دون استخدام الصور لتمثيل النص.
text-shadow: . أدخل القيم التي تمثل x-offset (إزاحة أفقية) y-offset (إزاحة رأسية) blur-radius (نصف قطر التمويه) color على التوالي (القيم الثلاث الأولى لها وحدات طول، ولا توجد فاصلة بين القيم الأربع المنفصلة)، على سبيل المثال -2px 3px 7px #999 .text-shadow: . أدخل قيم x-offset (إزاحة أفقية) y-offset (إزاحة عمودية) blur-radius (نصف قطر التمويه) color على التوالي (القيم الثلاث الأولى لها وحدات طول، ولا توجد فاصلة الفصل بين القيم الأربع). قيمة blur-radius اختيارية. أدخل، (فاصلة). كرر الخطوة الثانية بقيم مختلفة للخصائص الأربعة.<!DOCTYPE html> <html لانج="ar"> <الرأس> <meta charset="utf-8" /> <title>ظل النص</title> <link rel="stylesheet" href="css/text-shadow.css" /> </الرأس> <الجسم> <p class="basic">الظل الأساسي</p> <p class="basic-negative">الظل الأساسي</p> <p class="blur">نصف القطر الضبابي</p> <p class="blur-inversed">نصف القطر الضبابي</p> <p class="multiple">ظلال نص متعددة</p> </الجسم> </html>
جسم {
الخلفية: #ففف؛
اللون: #222؛
الخط: 100%/1.05 هلفتيكا، بلا رقيق؛
الحشو العلوي: 20 بكسل؛
}
ص {
اللون: #222؛ /* أسود تقريبًا */
حجم الخط: 4.5em؛
وزن الخط: غامق؛
الهامش: 0 0 45 بكسل؛
}
ص: الطفل الأخير {
الهامش: 0;
}
.أساسي {
ظل النص: 3px 3px #aaa;
}
/* يستخدم الإزاحات السالبة - يمكنك مزج الإزاحات الموجبة والسالبة أيضًا */.
.الأساسية السلبية {
text-shadow: -4px -2px #ccc; /* رمادي أفتح قليلاً من #aaa */
}
طمس {
ظل النص: 2 بكسل 2 بكسل 10 بكسل رمادي؛
}
.طمس معكوس {
اللون: أبيض؛
ظل النص: 2px 2px 10px #000 /* أسود */
}
/* يحتوي هذا المثال على ظلين، لكن يمكنك تضمينهما
المزيد بفصل كل منها بفاصلة */
.عديد {
ظل النص:
2px 2px أبيض,
6px 6px rgba(50,50,50,.25);
} توضح هذه الفئات العديد من تأثيرات text-shadow . الأول والثاني والخامس يحذفون جميعًا قيمة نصف قطر التمويه. تخبرنا الفئة .multiple أنه يمكن إضافة أنماط ظل متعددة إلى عنصر واحد، مع وجود فواصل تفصل كل مجموعة من السمات. بهذه الطريقة، ومن خلال الجمع بين أنماط الظل المتعددة، يمكنك إنشاء تأثيرات خاصة ومثيرة للاهتمام.
أي أدخل text-shadow: none; ولا يلزم إدخال هذه السمة وتستخدم بادئة الشركة المصنعة.
تقبل خاصية text-shadow أربع قيم: x-offset مع وحدات الطول، y-offset مع وحدات الطول، blur-radius الاختياري مع وحدات الطول، وقيمة color . إذا لم يتم تحديد blur-radius ، فمن المفترض أن تكون قيمته 0. يمكن أن تكون قيم x-offset y-offset أعدادًا صحيحة موجبة أو سالبة، مما يعني أن 1px و -1px صالحان. يجب أن تكون قيمة blur-radius عددًا صحيحًا موجبًا. جميع القيم الثلاث يمكن أن تكون 0. على الرغم من أن بنية text-shadow تشبه بنية خصائص الحدود والخلفية، إلا أنها لا تستطيع تحديد أربع قيم خصائص منفصلة مثل الحدود والخلفية. إذا لم يتم تحديد text-shadow ، فإنه يستخدم القيمة الأولية none .
استخدم خاصية text-shadow لإضافة ظل إلى نص عنصر ما، واستخدم خاصية box-shadow لإضافة ظل إلى العنصر نفسه. مجموعة الخصائص الأساسية الخاصة بهم هي نفسها، لكن box-shadow يسمح أيضًا باستخدام خاصيتين اختياريتين: خاصية الكلمة الأساسية inset وخاصية spread (المستخدمة لتوسيع الظل أو تقليصه).
تقبل سمة box-shadow ست قيم: x-offset y-offset مع وحدات الطول، blur-radius الاختياري مع وحدات الطول، والكلمة الأساسية inset الاختيارية، وقيمة spread الاختيارية مع وحدات الطول، وقيمة color . إذا لم يتم تحديد قيم blur-radius spread ، فسيتم ضبطها على 0.
<!DOCTYPE html> <html لانج="ar"> <الرأس> <meta charset="utf-8" /> <title>ظل الصندوق</title> <link rel="stylesheet" href="css/box-shadow.css" /> </الرأس> <الجسم> <div class="shadow"> <p>ظل مع طمس</p> </div> <div class="shadow-negative"> <p>ظل مع إزاحات سلبية وتمويه</p> </div> <div class="shadow-spread"> <p>الظل مع التمويه والانتشار</p> </div> <div class="shadow-offsets-0"> <p>ظل مع إزاحات صفر، وطمس، وانتشار</p> </div> <div class="inset-shadow"> <p>الظل الداخلي</p> </div> <div class="متعددة"> <p>ظلال متعددة</p> </div> <div class="shadow-negative-spread"> <p>ظل مع تمويه وانتشار سلبي</p> </div> </الجسم> </html>
جسم {
الخلفية: #000؛
اللون: #ففف؛
}
ح1 {
عائلة الخط: بلا الرقيق؛
حجم الخط: 2.25em؛
ارتفاع الخط: 1.1؛
محاذاة النص: مركز؛
}
/* ملاحظة: تختلف عناوين URL لصور الخلفية أدناه عما هو موضح في المثال الموضح في الكتاب، لأنني وضعت الصور في مجلد فرعي (يسمى "img")، كما هو معتاد عند تنظيم موقع أيضًا. أعتقد أنه سيكون من المفيد لك معرفة كيفية إنشاء عناوين URL لصور الخلفية في ظل هذه الظروف. لاحظ أن عناوين URL مرتبطة بالمكان الذي توجد فيه ورقة الأنماط، وليس بصفحة HTML التي تعرض الصورة */.
.سماء الليل {
لون الخلفية: كحلي /* اللون الاحتياطي */
صورة الخلفية:
رابط (../img/ufo.png)،
رابط (../img/stars.png)،
رابط (../img/stars.png)،
url(../img/sky.png);
موقف الخلفية:
50% 102%,
100% -150 بكسل،
0 -150 بكسل،
50% 100%;
تكرار الخلفية:
عدم التكرار،
عدم التكرار،
عدم التكرار،
تكرار س؛
الارتفاع: 300 بكسل؛
الهامش: 25 بكسل تلقائي 0؛ /* مختلف قليلاً عن الكتاب */
الحشو العلوي: 36 بكسل؛
العرض: 75%؛
} تم استخدام البرنامج أعلاه لتوضيح تأثير استخدام box-shadow لإضافة ظل واحد أو أكثر. تطبق الفئات الخمس الأولى نمط تظليل مختلف عن بعضها البعض. يطبق الفصل الأخير ظلين (يمكن تطبيق المزيد). المتصفحات التي لا تفهم box-shadow ستتجاهل ببساطة قواعد نمط CSS هذه وستعرض الصفحة بدون ظل.
-webkit-box-shadow: . أدخل القيم التي تمثل x-offset ، y-offset blur-radius ، spread color على التوالي (القيم الأربع الأولى لها وحدات طول)، على سبيل المثال 2px 2px 5px #333 . أدخل box-shadow: وكرر الخطوة الثانية.-webkit-box-shadow: . أدخل القيم التي تمثل x-offset ، y-offset ، blur-radius ، spread color على التوالي (تحتوي القيم الأربع الأولى جميعها على وحدات طول)، على سبيل المثال، 2px 2px 5px #333 . أدخل inset بعد النقطتين، ثم أدخل مسافة (يمكنك أيضًا إدخال inset ومسافة قبل الخطوة الثانية). أدخل box-shadow: وكرر الخطوتين الثانية والثالثة.-webkit-box-shadow: . أدخل القيم التي تمثل x-offset ، y-offset ، blur-radius ، spread color على التوالي (تحتوي القيم الأربع الأولى جميعها على وحدات طول)، على سبيل المثال، 2px 2px 5px #333 . إذا لزم الأمر، قم بتضمين الكلمة الأساسية inset . أدخل فاصلة. كرر الخطوة الثانية بقيم مختلفة لكل سمة. أدخل box-shadow: وكرر الخطوات من الثاني إلى الرابع.-webkit-box-shadow: none; أدخل box-shadow: none; . ملحوظة: يمكن أن تكون قيم x-offset y-offset وقيم spread أعدادًا صحيحة موجبة أو سالبة. يجب أن تكون قيمة blur-radius عددًا صحيحًا موجبًا. يمكن أن تكون القيم الثلاث صفرًا. تسمح الكلمة inset بوضع الظل داخل العنصر.
يمكن تطبيق خلفيات متعددة على أي عنصر تقريبًا.
<!DOCTYPE html> <html لانج="ar"> <الرأس> <meta charset="utf-8" /> <title>خلفيات متعددة</title> <link rel="stylesheet" href="css/multiple-backgrounds.css" /> </الرأس> <الجسم> <div class="night-sky"> <h1>في سماء الليل...</h1> </div> </الجسم> </html>
...
.سماء الليل {
لون الخلفية: كحلي /* اللون الاحتياطي */
صورة الخلفية:
رابط (../img/ufo.png)،
رابط (../img/stars.png)،
رابط (../img/stars.png)،
url(../img/sky.png);
موقف الخلفية:
50% 102%,
100% -150 بكسل،
0 -150 بكسل،
50% 100%;
تكرار الخلفية:
عدم التكرار،
عدم التكرار،
عدم التكرار،
كرر-x؛
الارتفاع: 300 بكسل؛
الهامش: 25 بكسل تلقائي 0؛ /* مختلف قليلاً عن الكتاب */
الحشو العلوي: 36 بكسل؛
العرض: 75%؛
}تطبيق صور خلفية متعددة على عنصر واحد (لا حاجة لاستخدام بادئات البائع)
أدخلbackground-color: b ، حيث b هو لون الخلفية البديل الذي تريد تطبيقه على العنصر. أدخل background-image: u ، حيث u عبارة عن قائمة url المشار إليها بواسطة مسارات مطلقة أو نسبية (مفصولة بفواصل. بالنسبة للمتصفحات التي تدعم خلفيات متعددة، تكون الصور في طبقات ومتداخلة مع بعضها البعض. يتم فصل الصورة الأولى في القائمة بـ فواصل الصورة في الأعلى.) أدخل background-position: p ، حيث p عبارة عن زوج من x-offset y-offset (يمكن أن تكون موجبة أو سالبة؛ مع وحدة الطول أو الكلمة الرئيسية، مثل center top ) مجموعات، مفصولة بـ فواصل. لكل url محدد في الخطوة الثانية، يجب أن يكون هناك مجموعة من x-offset و y-offset . أدخل background-repeat: r ، حيث r هي قيمة repeat-x أو repeat-y أو no-repeat ، مفصولة بفواصل، قيمة واحدة لكل url محدد في الخطوة الثانية.بالنسبة لصور الخلفية المتعددة، يمكن استخدام الصيغة القياسية القصيرة، باستخدام الفواصل لفصل كل مجموعة من معلمات الخلفية. وتتمثل فائدة هذا التمثيل في أنه يمكن للمطورين تحديد لون خلفية بديل أو صورة للمتصفحات الأقدم.
.سماء الليل {
/* البديل مع كل من اللون والصورة */
الخلفية: عنوان url باللون الأزرق الداكن (../img/ufo.png) أسفل المنتصف بدون تكرار؛
/* لدعم المتصفحات */
خلفية:
url(../img/ufo.png) بدون تكرار 50% 102%،
url(../img/stars.png) بدون تكرار 100% -150 بكسل،
url(../img/stars.png) بدون تكرار 0 -150 بكسل،
url(../img/sky.png) كرر-x 50% 100%;
الارتفاع: 300 بكسل؛
الهامش: 25 بكسل تلقائي 0؛
الحشو العلوي: 36 بكسل؛
العرض: 75%؛
}<!DOCTYPE html> <html لانج="ar"> <الرأس> <meta charset="utf-8" /> <title>خلفيات متدرجة</title> <link rel="stylesheet" href="css/gradients.css" /> </الرأس> <الجسم> <div class="vertical-down"><p>الافتراضي</p></div> <div class="vertical-up"><p>إلى الأعلى</p></div> <div class="horizontal-rt"><p>إلى اليمين</p></div> <div class="horizontal-lt"><p>إلى اليسار</p></div> <div class="angle-bot-rt"><p>إلى <br />أسفل اليمين</p></div> <div class="angle-bot-lt"><p>إلى <br />أسفل اليسار</p></div> <div class="angle-top-rt"><p>أعلى اليمين</p></div> <div class="angle-top-lt"><p>أعلى اليسار</p></div> <div class="angle-120deg"><p>120 درجة</p></div> <div class="angle-290deg"><p>290 درجة</p></div> <قسم الفئة = "شعاعي"> <div class="radial-center"><p>الافتراضي</p></div> <div class="radial-top"><p>في الأعلى</p></div> <div class="radial-size-1"><p>100px, 50px</p></div> <div class="radial-size-2"><p>70% 90% في <br />أسفل اليسار</p></div> <div class="radial-various-1"><p>مختلف 1</p></div> <div class="radial-various-2"><p>مختلف 2</p></div> </قسم> <قسم الفئة = "توقف اللون"> <div class="color-stops-1"><p>أصفر 10%، أخضر</p></div> <div class="color-stops-2"><p>أعلى اليمين، أصفر، <br>أخضر 70%، <br>أزرق</p></div> </قسم> </الجسم> </html>
جسم {
المساحة المتروكة: 1.25em؛ /* 20 بكسل/16 بكسل، أي 20 بكسل على كل جانب */
حجم الخط: 100%؛
}
شعبة {
تعويم: يسار؛
الارتفاع: 150 بكسل؛
الهامش: 10 بكسل؛
العرض: 150 بكسل؛
}
ص {
اللون: #ففف؛
الخط: غامق 1.25em/1 بلا serif /* 20px/16px */
المساحة المتروكة: 1.65em /* 33px/16px */
محاذاة النص: مركز؛
}
/* ملاحظة: التدرجات أدناه موجودة في بناء جملة CSS3 القياسي. والمتصفحات التي تدعمها هي Chrome 26+ وFirefox 16+ وIE 10+ وOpera 12.10+ راجع gradients-with-browser-prefixes.css تأثيرات متدرجة، ولكن مع تضمين رمز بادئة البائع أيضًا، لذلك ستعمل التدرجات على العديد من المتصفحات القديمة. الخلفية التي تحتوي على تعليق "احتياطي" هي اللون الذي سيظهر في المتصفحات التي لا تدعم صيغة التدرج، يمكنك استخدام صورة خلفية كصورة احتياطية أيضًا (إما بمفردها أو مع لون). على سبيل المثال، الخلفية: red url(gradient-image.jpg) no-repeat؛ .*/
/* التدرجات الخطية
------------------------------------------ */
/* :::: رَأسِيّ :::: */
.عمودي للأسفل {
الخلفية: فضي /* احتياطي */
/* التدرج الافتراضي، لذلك لا تحتاج إلى تحديد "إلى الأسفل" قبل الألوان */
الخلفية: متدرج خطي (فضي، أسود)؛
}
.عمودي لأعلى {
الخلفية: فضي؛
الخلفية: متدرج خطي (إلى الأعلى، فضي، أسود)؛
}
/* :::: أفقي :::: */
.أفقي-رت {
الخلفية: فضي /* احتياطي */
الخلفية: متدرج خطي (إلى اليمين، فضي، أسود)؛
}
.أفقي-لتر {
الخلفية: فضي /* احتياطي */
الخلفية: متدرج خطي (إلى اليسار، فضي، أسود)؛
}
/* :::: الزوايا القطرية :::: */
/* ملاحظة: تُظهر الأشكال الموجودة في الصفحة 377 اللون المائي باعتباره اللون الاحتياطي، لكنني قمت بتبديله
إلى اللون الأزرق الداكن أدناه لأن النص الأبيض سيكون أسهل في القراءة على خلفية بحرية */.
زاوية بوت-رت {
الخلفية: البحرية /* احتياطي */
الخلفية: متدرجة خطية (أسفل اليمين، مائي، بحري)؛
}
زاوية بوت-لتر {
الخلفية: البحرية /* احتياطي */
الخلفية: متدرجة خطية (أسفل اليسار، مائي، بحري)؛
}
.زاجل-توب-رت {
الخلفية: البحرية /* احتياطي */
الخلفية: متدرجة خطية (أعلى اليمين، مائي، بحري)؛
}
زاوية أعلى لتر {
الخلفية: البحرية /* احتياطي */
الخلفية: متدرجة خطية (أعلى اليسار، مائي، بحري)؛
}
/* :::: الزوايا بالدرجات :::: */
زاوية 120 درجة {
الخلفية: البحرية /* احتياطي */
الخلفية: متدرج خطي (120 درجة، مائي، بحري)؛
}
.زاوية-290 درجة {
الخلفية: البحرية /* احتياطي */
الخلفية: متدرج خطي (290 درجة، مائي، بحري)؛
}
/* التدرجات الشعاعية
------------------------------------------ */
/* :::: شعاعي :::: */
.شعاعي ع {
ظل النص: 0 0 3px #000;
}
.مركز شعاعي {
الخلفية: أحمر /* احتياطي */
الخلفية: تدرج شعاعي (أصفر، أحمر) ؛
}
.شعاعي أعلى {
الخلفية: أحمر /* احتياطي */
الخلفية: متدرج شعاعي (في الأعلى، أصفر، أحمر)؛
}
.حجم شعاعي-1 {
الخلفية: أحمر /* احتياطي */
الخلفية: تدرج شعاعي (100 بكسل 50 بكسل، أصفر، أحمر)؛
}
.حجم شعاعي-2 {
الخلفية: أحمر /* احتياطي */
الخلفية: تدرج شعاعي (70% 90% في أسفل اليسار، أصفر، أحمر)؛
}
.شعاعي-مختلف-1 {
الخلفية: أحمر /* احتياطي */
الخلفية: تدرج شعاعي (أقرب جانب عند 70 بكسل 60 بكسل، أصفر، ليموني، أحمر)؛
}
.شعاعي-مختلف-2 {
الخلفية: أحمر /* احتياطي */
الخلفية: متدرج شعاعي (30 بكسل 30 بكسل عند 65% 70%، أصفر، ليموني، أحمر)؛
}
/* التدرجات الخطية مع توقفات اللون
------------------------------------------ */
.color-stops div {
الهامش السفلي: 30 بكسل؛
}
.توقف اللون ع {
الحشو العلوي: 25 بكسل؛
ظل النص: 0 0 3px #000;
}
.color-stops-2 ع {
حجم الخط: 18 بكسل؛
ارتفاع الخط: 1.05؛
}
.color-stops-1 {
الخلفية: أخضر /* احتياطي */
الخلفية: متدرج خطي (أصفر 10%، أخضر)؛
}
.color-stops-2 {
الخلفية: أخضر /* احتياطي */
الخلفية: متدرجة خطية (أعلى اليمين، أصفر، أخضر 70%، أزرق)؛
} أدخل background: color أو background-color: color ، حيث يمكن أن يكون color رقمًا سداسيًا عشريًا أو قيمة RGB أو أي اسم لون آخر مدعوم. من الأفضل عدم استخدام قيم RGBA أو HSL أو HSLA كألوان خلفية احتياطية (لا تقلق إذا كنت لا تخطط لدعم IE)، لأن IE8 والإصدارات السابقة لا تدعمها.
background: linear-gradient( . إذا كنت تريد أن يكون اتجاه التدرج من أعلى إلى أسفل (الاتجاه الافتراضي)، فيمكنك تخطي هذه الخطوة. أضف فاصلة بعد اتجاه الإدخال، وتشير الاتجاهات to top ، to right ، to bottom right ، to top right ، وما إلى ذلك. أو أضف فاصلة بعد اتجاه الإدخال، حيث يشير الاتجاه إلى قيمة الزاوية (مثل 45deg ، 107deg ، وما إلى ذلك). حدد لون التدرج وفقًا لـ "اللون المحدد" المذكور لاحقًا ); أكمل التدرج.background: radial-gradient( . حدد شكل التدرج. إذا كنت تريد تحديد الحجم، يمكنك تحديده بنفسك بناءً على الحجم المحدد في الخطوة 3. بخلاف ذلك، أدخل circle أو ellipse . حدد حجم التدرج إذا كنت تريد أن يكون الحجم هو القيمة المحددة تلقائيًا (القيمة الافتراضية هي ·الزاوية الأبعد·، الزاوية الأبعد)، وإلا فأدخل قيمة طول تمثل عرض التدرج وارتفاعه (مثل 200px أو 7em ) أو زوجًا. من القيم التي تمثل العرض والارتفاع ( 390px 175px أو 60% 85% ) لاحظ أنه إذا تم استخدام قيمة واحدة فقط، فلا يمكن أن تكون القيمة نسبة مئوية أو إدخال closest-side أو farthest-side أو closest-corner أو farthest-corner . تمثل هذه الكلمات الأساسية المدى الذي يمكن أن يمتد at right التدرج بالنسبة إلى مركزه. تحدد الحدود حجم التدرج. يمكنك تخطي هذه الخطوة إذا كنت تريد أن يبدأ التدرج at top منتصف العنصر. at bottom left ، at top right ، وما إلى ذلك لتمثيل موضع مركز التدرج أو أدخل زوجًا من الإحداثيات التي تمثل موضع مركز التدرج، بدءًا at at 200px 43px ، at 30% 40% ، at 50% -10px ، إلخ. حدد لون التدرج ); أكمل التدرج. استخدم خاصية opacity لتعديل شفافية عنصر ما. تتمثل الطريقة في إدخال opacity: x ، حيث تمثل x عتامة العنصر (منزلتان عشريتان، بدون وحدة).
القيمة الافتراضية opacity هي 1 (معتم تمامًا)، والنطاق هو 0~1 .
باستخدام السمة opacity والسمة الزائفة :hover ، يمكنك إنتاج بعض التأثيرات المثيرة للاهتمام والعملية. على سبيل المثال، img { opacity: .75; } يمكن أن يضبط الصورة على عتامة بنسبة 75% بشكل افتراضي، ويمكن أن يتسبب img:hover { opacity: 1; } في أن يصبح العنصر معتمًا عندما يمرر المستخدم الماوس فوقه. غالبًا ما يظهر هذا التأثير عند ربط الصور المصغرة بإصدارات بالحجم الكامل. بالنسبة للزائرين، يؤدي الارتفاع إلى تعزيز حركة الصورة.
تعد سمة opacity ومجموعة ألوان الخلفية الشفافة باستخدام RGBA أو HSLA مفهومين يمكن الخلط بينهما بسهولة. تؤثر opacity على العنصر بأكمله (بما في ذلك محتواه)، في حين أن background-color: rgba(128,0,64,.6); يؤثر هذا الإعداد فقط على شفافية الخلفية.
يعد استخدام العناصر الزائفة :before و :after طريقة رائعة لإضافة بعض تأثيرات التصميم الرائعة إلى صفحاتك. يمكن دمجها مع سمة content لإنشاء ما يسمى بالمحتوى الذي تم إنشاؤه. يشير المحتوى الذي تم إنشاؤه إلى المحتوى الذي تم إنشاؤه من خلال CSS بدلاً من HTML.
... <p>تعد هذه المنطقة واحدة من أكثر الأماكن هدوءًا في الفيلا. وبينما كنت أتجول في الأنحاء، مستمتعًا بالظل الذي توفره أشجار الجميز والغار وأغانيها المتناثرة من نافورتين منحوتتين، لم أستطع إلا أن أفكر &هليب؛ href="victoria.html" class="more">اقرأ المزيد</a></p> ...
/* المحتوى الذي تم إنشاؤه */
.المزيد:بعد {
محتوى: " ""؛
} من خلال الكود أعلاه، يمكن للعنصر ذو class="more" عرض سهم مزدوج بعده. إذا كنت بحاجة إلى تغييره في المستقبل، فما عليك سوى تعديل فئة .more دون تغيير عدد كبير من صفحات HTML.
يتم عرض النص بسرعة في المتصفح، لكن الصور تميل إلى إبطاء تحميل الصفحة. لحل هذه المشكلة، يمكنك دمج صور متعددة في صورة خلفية واحدة ( sprite )، ثم التحكم في أي جزء من الصورة يتم عرضه من خلال CSS، باستخدام سمة background-position .
المستندات لي {
الهامش العلوي: .45em؛
}
/* كل رابط في HTML يحتوي على هذه الفئة */
أيقونة {
العرض: كتلة مضمنة؛
ارتفاع الخط: 1.1؛
حجم الخط: .875em؛
min-height: 16px; /* تم ضبطه على ارتفاع الأيقونة بحيث لا يتم قطعها على الإطلاق */
المساحة المتروكة لليسار: 23 بكسل؛
الحشو العلوي: 2 بكسل؛
/* يسمح بوضع الأيقونة بشكل نسبي تمامًا مع العناصر ذات الفئة = "icon" في HTML */
الموقف: نسبي؛
}
أيقونة: قبل {
صورة الخلفية: url(../img/sprite.png);
محتوى: " "؛
عرض: كتلة؛
الارتفاع: 16 بكسل /* ارتفاع الرمز */
left: 0 /* قم بتغيير هذا إذا كنت تريد ظهور الرمز في مكان مختلف */
الموقف: مطلق؛
العرض: 16 بكسل /* عرض الأيقونة */
top: 0; /* قم بتغيير هذا إذا كنت تريد ظهور الرمز في مكان مختلف */
}
/* تغيير موضع الصورة المتحركة لأي اسم ملف مستند ينتهي بـ .xls */
أ[href$=".xls"]:قبل {
موقف الخلفية: -17px 0؛
}
/* تغيير موضع الصورة المتحركة لأي اسم ملف مستند ينتهي بـ .docx */
أ[href$=".docx"]:قبل {
موضع الخلفية: -34 بكسل 0;
} يمكن تطبيق sprite على أي عدد من العناصر. في المثال أعلاه، استخدم .icon:before لتحقيق التأثير المطلوب. بهذه الطريقة، يكون sprite هو صورة الخلفية للمساحة التي تم إنشاؤها بواسطة content: " "; اضبطه على display: block; حتى تتمكن من ضبط الارتفاع والعرض ليتناسب مع حجم الأيقونة. وبدون هذه الخصائص الثلاثة، لن يتم عرض الصورة. باستخدام background-position يمكنك وضع الرمز الصحيح في هذا الموضع.
بهذا نختتم هذه المقالة حول استخدام CSS3 لتحسين تأثيرات النمط. لمزيد من المعلومات حول تحسين تأثيرات نمط CSS3، يرجى البحث في المقالات السابقة على موقع downcodes.com أو الاستمرار في تصفح المقالات ذات الصلة أدناه.