9 نصائح وحيل لاحتراف سي إس إس (CSS)

زمن القراءة: 4 دقائق

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

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

تأثيرات التحليق (Hover Effects)

يُمكنك إضافة تأثير عند التحليق إلى عنصر من عناصر HTML باستخدام محدد hover.

مثال لكود HTML:

				
					<button>Hover Over Me</button>

كود CSS

				
					button:hover { 
color: #0062FF;
border: #0062FF solid 1px;
background: #FFFF99;
}

تغيير حجم الصور لتناسب حجم الحاوية (div)

يمكنك تغيير حجم الصورة لتناسب حجم الحاوية باستخدام بعض الخصائص مثل خاصية (height) و(width) وخاصية (object-fit).

كود HTML

				
					<img decoding="async" class="random-image" src="https://picsum.photos/200/300" />

كود CSS

				
					.random-image { 
height: 100%;
width: 100%;
object-fit: contain;
}

إلغاء التنسيقات السابقة

يمكنك إلغاء التنسيقات التي تم إضافتها سابقًا باستخدام (important!)

كود HTML

				
					<p class="className" id="idName" style="background-color: orange"> 
Hello World!
</p>

كود CSS

				
					p {background-color: yellow; }
.className { background-color: blue !important; } #idName { background-color: green; }

في هذا المثال سيكون لون الخلفية هو اللون الأزرق؛ وذلك بسبب استخدام خاصية (important!)

اقتطاع النص باستخدام (Ellipsis)

يمكنك قطع النص الزائد باستخدام خاصية (text-overflow) مع إعطائها قيمة (Ellipsis).

كود HTML

				
					<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.
</p>

كود CSS

				
					.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}

تحويل النص باستخدام خاصية (text-transform)

كود HTML

				
					<p class="text-trans"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>

كود CSS

				
					.text-trans { text-transform: uppercase; }
.text-trans { text-transform: capitalize; }

الخصائص المختصرة

يمكنك استخدام الخصائص المختصرة في لغة برمجة CSS لجعل رمزك موجزًا ويمكن قراءته بسهولة.

على سبيل المثال، عند تحديد خصائص مثل: لون الخلفية، وصورة الخلفية، وتكرار الخلفية، وموقع الخلفية، يمكنك تنفيذ ذلك من خلال كتابة الأسطر التالية:

				
					background-color: black;
background-image: url(images/xyz.png);
background-repeat: no-repeat;
background-position: left top;

وكذلك يمكنك تنفيذ نفس الغرض باستخدام سطر واحد:

				
					background: black url(images/xyz.png) no-repeat left top;

التوضيحات (Tooltip)

هي وسيلة لتوفير المزيد من المعلومات حول عنصر ما عندما يحرك المستخدم مؤشر الماوس فوق العنصر.

كود HTML

				
					<div class="tooltip">
Hover over me 
<span class="tooltiptext">’
Tooltip text
</span>
</div>

كود CSS

				
					.tooltip { 
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
} 
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0; 
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
} 
.tooltip:hover .tooltiptext {
    visibility: visible;
}

المؤشرات (Cursors)

يمكنك تغيير شكل المؤشر عن التحليق على عنصر معين في الموقع.

كود HTML

				
					<div>
<div class="demo-waiting">Waiting...</div>
<div class="demo-help">Get help</div>
<div class="demo-crosshair">Crosshair</div>
<div class="demo-grab">Grab</div>
<div class="demo-sad">Sad</div>
<div class="demo-happy">Happy</div>
</div>

كود CSS

				
					div.demo-waiting { cursor: wait; }
div.demo-help { cursor: help; }
div.demo-crosshair { cursor: crosshair; }
div.demo-grab { cursor: grab; }
div.demo-sad {
    cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto;
}
div.demo-happy { 
    cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png"), auto;
}

إنشاء تأثير الآلة الكاتبة

كود HTML

				
					<div class="demo-typewriter">
<span>This is a typewriter effect!</span>
</div>

كود CSS

				
					.demo-typewriter span { 
    color: #262626;
    overflow: hidden;
    border-right: .10em solid #FF8D8D;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .4rem;
    animation: demo-typewriter 3s steps(30, end),
    demo-cursor 1s step-end infinite;
} 

@keyframes demo-typewriter { 
    from { width: 0; } 
    to { width: 100%; }
} 

@keyframes demo-cursor { 
    from, to { border-color: transparent; } 
    50% { border-color: #FF8D8D; } 
}

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

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

No Courses Found!

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