إضافة اللمسات النهائية
جزء من قسم إتقان CSS في رحلة HTML على Coddy. الدرس 30 من 43.
التحدي
سهلفي هذا الدرس، ستضيف تأثير تحويم بسيطًا إلى البطاقات لتبدو أكثر تفاعلية وصقلًا.
تحدي CSS هو جعل بطاقات .feature تستجيب عند تحويم المؤشر فوقها:
- استخدم
:hoverلرفع البطاقة قليلًا باستخدامtransform: translateY(-5px). - أضف
box-shadowإلى البطاقة لإنشاء تأثير عائم. - طبّق
transitionلجعل حركة التحويم سلسة.
جرّب بنفسك
<html>
<head>
<title>Hobby Club Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="hero">
<div class="container">
<h1>Welcome to Hobby Club</h1>
<p>Find your passion. Join a community. Grow your skills.</p>
<a href="#" class="btn">Get Started</a>
</div>
</header>
<section class="features">
<h2 class="section-title">Popular Clubs</h2>
<div class="cards">
<div class="feature">
<div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Android_Emoji_1f4f7_red.svg" width="20px"></div>
<h3>Photography</h3>
<p>Capture the moment and share your perspective.</p>
</div>
<div class="feature">
<div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Emoji_u1f3a8.svg" width="20px"></div>
<h3>Art & Design</h3>
<p>Draw, paint, and bring your creative ideas to life.</p>
</div>
<div class="feature">
<div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Emoji_u1f3ae.svg" width="20px"></div>
<h3>Gaming</h3>
<p>Connect with fellow gamers and play your favorite titles.</p>
</div>
</div>
</section>
</body>
</html>
جميع دروس إتقان CSS
1إتقان المحددات – الربط
مقدمةمحدد الأحفادمحدد الأبناءمحدد الأشقاء المتجاورينمحدد الأشقاء العامتحدي المراجعة3الأصناف الزائفة الهيكلية (Structural pseudo-classes)
الأصناف الزائفة الهيكلية (Structural pseudo-classes)استهداف الابن الأولاستهداف الابن الأخيرقوة الأنماط: استخدام nth-childتحدي المراجعةتدرّب بنفسك: Playground لـ Web