حيل CSS الأساسية لتخطيطات صفحة الويب

This post is also available in: English (الإنجليزية)

CSSهي أوراق الأنماط المتتالية وتستخدم لوصف كيفية عرض عناصر HTML. إنها واحدة من أولى التقنيات التي تم تعلمها من قبل مطوري الويب والواجهة الأمامية قريبًا ، وهي من الأساسيات المطلقة التي يجب معرفتها.

على الرغم من أنه يبدو أن CSS لا يمكنها فعل الكثير إلى جانب توفير ألوان ومواضع HTML الخاصة بنا وما إلى ذلك ، إلا أنها تتيح لنا أيضًا إنشاء رسوم متحركة وإضفاء بعض الحيوية على تطبيقاتنا ومواقعنا الإلكترونية. ربما يهتم الكثير منا الآن بإتقان CSS وتعلمه بعمق ، ولكن الأمر يستحق تمامًا معرفة بعض النصائح والحيل المفيدة التي قد تساعدك في إنشاء مواقع ويب مذهلة!

حيل CSS لتخطيطات صفحات الويب

فيما يلي 10 نصائح وحيل لتخطيطات صفحات الويب المذهلة:

1. أوضاع المزج CSS

تعد صور Duotone وتأثيرات colourizer من أهم اتجاهات تصميم الويب. إنها شائعة على نطاق واسع عبر الويب. الآن يمكنك أخيرًا التوقف عن إنشاء إصدارات ملونة مختلفة متعددة من الأصول الخاصة بك وتطبيق التأثيرات مباشرة في المتصفح.

لا يعد استخدام أوضاع المزج CSS طريقة رائعة لتوحيد مظهر المحتوى عبر مواقع الويب فحسب ، ولكنه يمكّنك أيضًا من تعيين إصدارات ألوان مختلفة للصورة ، وتغيير قيمة واحدة فقط في CSS: اللون. هناك 15 قيمة ممكنة لوضع المزج ، بما في ذلك الشاشة والتراكب والتفتيح والتغميق.

هناك طريقتان للتنفيذ ، اعتمادًا على نوع العنصر الذي ترغب في تطبيق التأثير عليه. على سبيل المثال ، يمكنك استخدام مجموعة ألوان الخلفية وصورة الخلفية في وضع دمج الخلفية للحاوية: قم بتغميق أو إنشاء تراكب باستخدام عناصر زائفة (على سبيل المثال: قبل و: بعد) على غلاف الصورة للحصول على تأثير تلوين .

لتحقيق تأثير مرضي للون الثنائي ، يوصى باستخدام صورة بالأبيض والأسود عالية التباين. يمكنك القيام بذلك عن طريق تطبيق مرشحات CSS لتعيين التدرج الرمادي ومستوى التباين العالي.

خاصية أخرى رائعة هي وضع mix-blend ، والذي يتيح لك مزج محتوى العنصر مع المحتوى أو الخلفية لأصله المباشر. هذا يعمل بشكل جيد بشكل خاص مع الحروف المتداخلة. قد تسأل لماذا في هذه الحالة لا نقوم فقط بضبط التعتيم – الإجابة بسيطة: يمكننا بسهولة أن نفقد وضوح اللون باستخدام الشفافية فقط.

يقترب عصر الصور التي يمكن تحريرها مباشرة في متصفح الويب الخاص بك ، ولكن لا يمكننا أن ننسى توافق المتصفح – الدعم محدود لأوضاع الدمج في الوقت الحالي. وللحفاظ على هذه الصور آمنة ، تأكد من استكشاف خيارات التخزين السحابي.

دعونا نرى كيف يتم تنفيذ وضع المزج.

<div class="blend1">
  <img src="monkey.jpg" width="400" height="400">
  <img src="sky.jpg" width="400" height="400">
</div>

وتطبيق هذه الأوضاع بسيط للغاية.

.blend1 img:first-child {
  position: absolute;
  mix-blend-mode: soft-light;
}

2. إضافة قناع

يخبر الإخفاء متصفحك عن عناصر الأصول التي يجب أن تكون مرئية ومفيدة جدًا لبناء الأشكال والتخطيطات الإبداعية. يمكن إجراء التقنيع بثلاث طرق: استخدام صورة نقطية (مثل تنسيق PNG بأجزاء شفافة) أو تدرجات CSS أو عناصر SVG.

لاحظ أنه ، على عكس الصورة النقطية النموذجية ، يمكن تحجيم SVG أو تحويله دون خسارة كبيرة في الجودة.

img { mask-image: url(‘mask.png’) linear-gradient(-45deg, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%); mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/ }

من المهم الإشارة إلى أن Firefox يدعم الإصدار الأحدث فقط ، لذلك نحتاج إلى استخدام عنصر قناع SVG مضمن. ماذا لو استخدمنا صورة نقطية بمستويات شفافية؟ لن يتم رؤية الأجزاء الشفافة من الصورة – بمعنى آخر ، سيتم عرض الأجزاء غير الشفافة ، مما يؤدي إلى إخفاء الأجزاء الأخرى.

لن يتم رؤية الأجزاء الشفافة من الصورة – بمعنى آخر ، سيتم عرض الأجزاء غير الشفافة ، مما يؤدي إلى إخفاء الأجزاء الأخرى.

إحدى حالات الاستخدام الرائعة لإخفاء CSS هي المقالات التي تجمع بين النص والصور. تحظى الحاويات والصور غير المنتظمة بشعبية كبيرة في الطباعة ، ولكنها مملة وتستغرق وقتًا طويلاً لتنفيذها على الويب. لكن بفضل التقنيع ، ليس بعد الآن!

يمكنك أيضًا الاستمتاع باستخدام مستويات الشفافية لقص أجزاء من الصور المتحركة (مثل ملفات GIF). ومع ذلك ، عند استخدام هذه الخصائص ، لا تنس دعم المتصفحات ، وأضف بادئات المورد.

3. لقطة

ميزة أخرى رائعة هي قص CSS. يُطلق على حدود الشكل اسم مسار المقطع (يجب عدم الخلط بينه وبين خاصية المقطع التي تم إيقاف العمل بها) ، ويحدد القص أي مساحة الصورة يجب أن تكون مرئية. يشبه الاقتطاع قطع قطعة من الورق – سيتم إخفاء أي شيء خارج المسار ، بينما سيكون أي شيء بداخل المسار مرئيًا.

<img src="https://images.unsplash.com/photo-1563805042-7684c019e1cb"
 class="myimg" />
.myimg{
  width:300px;
  height:300px;
  object-fit:cover;
  border-radius:50%;
}

على سبيل المثال ، إذا قامت وظيفة الدائرة بتعيين قناع قص فوق الجزء العلوي من الصورة ، فسترى فقط جزء الصورة داخل هذه الدائرة.

الشيء الرائع هو أنه يمكننا استخدام وظائف الشكل و SVG كمسارات للقصاصات ، مما يمنحنا الكثير من الفرص – على سبيل المثال ، يمكننا تحريكها إلى أشكال متحولة.

إذا كنت تتساءل عن الفرق بين القص والإخفاء ، فتذكر أن الأقنعة عبارة عن صور وأن المقاطع ما هي إلا مسارات متجهة. من الجدير بالذكر أن التقنيع سيستهلك المزيد من الذاكرة ، لأنك تعمل على صورة كاملة لذلك يجب القيام بكل شيء بكسل تلو الآخر.

هذا هو السبب في أنه يوصى باستخدام الأقنعة عندما تريد تأثير شفافية جزئي ؛ إذا كنت تريد حوافًا واضحة ، فمن الأفضل استخدام مسارات القصاصة.

4. الشكل الخارجي والشكل في الداخل

الشكل الخارجي والشكل الداخلي للإنقاذ! من قال أن حاويات النص يجب أن تكون دائمًا مستطيلة؟ دعنا نخرج من المربع ، حرفيًا ، ونكتشف أشكالًا جديدة تجعل تنسيقات صفحاتنا أكثر ثراءً وأقل كثافة. تسمح لك خصائص الشكل الخارجي وداخل الشكل بلف المحتوى الخاص بك حول المسارات المخصصة في CSS.

فكيف يعمل؟ ما عليك سوى تطبيق الكود التالي على الصورة أو الحاوية العائمة المحددة:

shape-outside: circle(50%); /* content will flow around the circle*/

من المهم ملاحظة أنه يجب تحديد خاصية الطفو وأبعاد العنصر – الارتفاع والعرض – وإلا فلن ينجح ذلك. بالنسبة للشكل ، يمكنك استخدام circle() أو polygon() أو الشكل insert () أو القطع ecllipse ().

القيمة الأخرى المحتملة هي وظيفة url (). في هذه الحالة ، يتيح هذا لخاصية الشكل الخارجي تحديد شكل عنصر بناءً على الصورة. قد تختار استخدام وظيفة url () بدلاً من polygon() عندما يكون لديك رسم معقد بشكل خاص مع العديد من المنحنيات والنقاط ، وتريد أن يلتف المحتوى حوله بسلاسة.

إذا كنت ترغب في إنشاء مساحة أكبر بين عنصرك والمحتوى ، فاستخدم خاصية Shape-margin ، والتي ستعمل تمامًا مثل الهامش. يمكن تحريك وظائف الشكل ، ولكن فقط للمضلعات المحددة – لسوء الحظ ، لا يمكن تحريك وظيفة url ().

دعم المتصفح للشكل الخارجي محدود في الوقت الحالي ، لكن حافظ على أصابعك متقاطعة لتنفيذه السريع في المتصفحات الأخرى.

5. عناصر الانحراف

في الوقت الحاضر ، أصبحت جماليات الفوضى والضوضاء والتشويش اتجاهًا شائعًا في التصميم. يمكن رؤية الاحتفال بالأخطاء والإخفاقات والأخطاء على الويب أيضًا. إذا كنت ترغب في اللعب بمنظور وأن تكون أكثر فوضوية من الناحية المرئية ، فيمكنك القيام بذلك بسهولة عن طريق تحويل عناصر موقعك وتعديلها.

سطر واحد من التعليمات البرمجية يفعل السحر:

transform:skew(60deg, -30deg) scaleY(.66667);

لفهم أفضل ، دعنا نفكر في الكود التالي:

<html>
	<head>
		<style>
			body {
  				margin: 20px;
				}

			div {
  				width: 80px;
  				height: 80px;
  				background-color: skyblue;
				}

			.skewed {
  				transform: skew(10deg); /* Equal to skewX(10deg) */
  				background-color: pink;
				}
		</style>
	</head>
	<body>
		<div>Normal</div>
		<div class="skewed">Skewed</div>
	</body>
</html>

6. خطوط متحركة

غالبًا ما تريد إنشاء تأثيرات مثيرة للاهتمام مثل تسطير متحرك ، وخلفية الظهور والاختفاء ، وما إلى ذلك.

لا تنشئ عنصرًا جديدًا ، فقط استخدم :: afterو :: beforepseudoselectors. إنهم يعملون بشكل رائع لهذه الأشياء. لا تنس تعيين خاصيةالمحتوى: إذا نسيتها ، فلن يتم عرض العنصر الزائف.

.item::after {
content: "";
position: absolute;
top: xyz;
left: xyz;
... properties you want;
}

7. تأثير النص الفائض

غالبًا ما تستخدم الرسوم المتحركة لموقع الويب الحديث هذا النوع من النص الفائض الذي يظهر من الأسفل.

دعونا نرى الحد الأدنى من الشفرة المطلوبة.

.parent {
height: /*something similar to child's font size*/;
overflow-y: hidden;
display: block;
}
.parent .child {
animation-name: appear;
animation-duration: ...s;
}
@keyframes appear {
 from { transform: translateY(/* parent's height*/) }
 to {   transform: translateY(0)}
}

8. إسقاط قبعات

الجميع يحب إسقاط قبعات. إنه يذكرنا بالكتاب التقليدي المطبوع وهو طريقة رائعة لبدء صفحة من المحتوى. الأول ، حرف كبير يلفت ^{انتباهك}حقًا. هناك طريقة سهلة لإنشاء حرف استهالي كبير في CSS ، وذلك باستخدام العنصر الزائف: الحرف الأول. هذا مثال:

p:first-letter{
    display:block;
    float:left;
    margin:3px;
    color:#f00;
    font-size:300%;
}

ما يفعله هذا هو ضبط الحرف على 3x حجم الأحرف الأخرى. يقوم بتعيين مساحة 3 بكسل حول الحرف لمنع التداخل ويضبط لون الحرف على اللون الأحمر.

9. Parallax Scrolling

المنظر هو اتجاه شائع جدًا في تصميم الويب الحديث. يتعلق الأمر بالتمرير لمحتوى الخلفية بسرعة مختلفة عن محتوى المقدمة عندما نقوم بالتمرير في الصفحة. دعونا نرى كيف يمكن تحقيق هذا السحر باستخدام CSS:

.wrapper {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f6f6f6;
}

.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20vh 0;
}

img {
  width: 100%;
}

h3 {
  font-size: 60px;
  color: white;
}

.box.box-back {
  transform: translateZ(0);
  z-index: 99;
  text-align: center;
}
.box.box-front {
  width: 1500px;
  transform: translateZ(-1px) scale(2);
}

في المثال ، يمكنك أن ترى كيف يتحرك النص وصورة الخلفية بشكل مختلف. استخدمنا التحويل Z ، لربط أحد العناصر وإبطاء عنصر آخر.

10. مرشحات الصور

قد يجلب اللعب بالصور الكثير من التأثيرات المدهشة للتخطيط ويساعد في إنشاء نتائج مذهلة. يسمح CSS باستخدام الكثير من المرشحات على الصور لمساعدة المطورين على اللعب مع الرسم دون تغييره في Photoshop. دعونا نلقي نظرة على عوامل التصفية التي قد نستخدمها:

.image img {
  max-width: 300px;
}

.blur {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

.brightness {
  filter: brightness(150%);
}

.saturate {
  filter: saturate(200%);
}

.invert {
  filter: invert(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}

في المثال أعلاه ، يمكنك رؤية سبعة مرشحات مختلفة مستخدمة في نفس الصورة.