CSS

Part 14 مشروعات تطبيقية (Practice Projects) – سلسلة FSWD -CSS

ahmedمنذ 4 أسابيع

0 127 3 دقائق

مشروعات تطبيقية (Practice Projects)

في هذا الدرس، سنتعرف على كيفية تطبيق كل ما تعلمناه من CSS في مشاريع تطبيقية. سنغطي ثلاثة أنواع من المشاريع التطبيقية:

تصميم صفحة ويب بسيطة باستخدام الأساسيات.
إنشاء تصميم ريسبونسيف باستخدام Flexbox و Grid.
إضافة تأثيرات انسيابية باستخدام Transitions و Animations.

1. تصميم صفحة ويب بسيطة: استخدام الأساسيات لتصميم صفحة بسيطة

في هذا المشروع، سنقوم بتصميم صفحة ويب بسيطة تحتوي على بعض النصوص والصور. سنستخدم الأساسيات مثل color, font-family, background-color, وmargin.

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحة ويب بسيطة</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>مرحبًا بك في صفحتي البسيطة!</h1>
    </header>
    <main>
        <section class="intro">
            <h2>مقدمة عن التصميم</h2>
            <p>هذه صفحة ويب بسيطة تستخدم أساسيات CSS لتصميم الصفحة.</p>
        </section>
        <section class="image">
            <img src="https://via.placeholder.com/400" alt="Placeholder Image">
        </section>
    </main>
    <footer>
        <p>حقوق الطبع والنشر © 2025</p>
    </footer>
</body>
</html>

CSS (styles.css)

/* القواعد العامة */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
}

/* تصميم الهيدر */
header {
    background-color: #3498db;
    color: white;
    text-align: center;
    padding: 20px;
}

/* تصميم الأقسام */
h1, h2 {
    font-size: 2rem;
}

/* تنسيق القسم الأول */
.intro {
    margin: 20px;
    text-align: center;
}

.intro h2 {
    color: #3498db;
}

/* تنسيق الصورة */
.image img {
    display: block;
    max-width: 100%;
    margin: 20px auto;
}

/* تصميم الفوتر */
footer {
    background-color: #2ecc71;
    color: white;
    text-align: center;
    padding: 10px;
}

الشرح:

تم استخدام الأساسيات مثل font-family, background-color, color, وpadding لإنشاء صفحة بسيطة.
تم تصميم الهيدر و الفوتر باستخدام خلفيات ملونة (#3498db و #2ecc71) وجعل النصوص تتوسطها باستخدام text-align: center.

2. إنشاء تصميم ريسبونسيف باستخدام Flexbox و Grid

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

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تصميم ريسبونسيف</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>تصميم ريسبونسيف باستخدام Flexbox و Grid</h1>
    </header>
    <main>
        <section class="content">
            <div class="card">
                <h2>البطاقة 1</h2>
                <p>محتوى البطاقة 1.</p>
            </div>
            <div class="card">
                <h2>البطاقة 2</h2>
                <p>محتوى البطاقة 2.</p>
            </div>
            <div class="card">
                <h2>البطاقة 3</h2>
                <p>محتوى البطاقة 3.</p>
            </div>
        </section>
    </main>
    <footer>
        <p>حقوق الطبع والنشر © 2025</p>
    </footer>
</body>
</html>

CSS (styles.css)

/* القواعد العامة */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

/* تصميم الهيدر */
header {
    background-color: #3498db;
    color: white;
    text-align: center;
    padding: 20px;
}

/* تصميم القسم الرئيسي */
.content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

/* تنسيق البطاقة */
.card {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card h2 {
    color: #3498db;
}

/* تصميم الفوتر */
footer {
    background-color: #2ecc71;
    color: white;
    text-align: center;
    padding: 10px;
}

/* ريسبونسيفية */
@media (max-width: 768px) {
    .content {
        grid-template-columns: repeat(2, 1fr); /* عرض عمودين على الشاشات الصغيرة */
    }
}

@media (max-width: 480px) {
    .content {
        grid-template-columns: 1fr; /* عرض عمود واحد على الشاشات الصغيرة جدًا */
    }
}

الشرح:

تم استخدام CSS Grid لتصميم بطاقة تحتوي على 3 أعمدة بشكل افتراضي.
في حالات الريسبونسيفية باستخدام @media، يتم تغيير عدد الأعمدة بناءً على عرض الشاشة:
- أقل من 768px: يتم عرض عمودين.
- أقل من 480px: يتم عرض عمود واحد.

3. إضافة تأثيرات انسيابية باستخدام Transitions و Animations

في هذا المشروع، سنضيف بعض التأثيرات الانسيابية باستخدام Transitions و Animations.

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تأثيرات انسيابية</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button class="btn">اضغط هنا</button>
</body>
</html>

CSS (styles.css)

/* القواعد العامة */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* تنسيق الزر */
.btn {
    background-color: #3498db;
    color: white;
    padding: 20px 40px;
    font-size: 1.2rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* تأثير التغيير في اللون والحجم */
}

/* تأثير التفاعل مع الزر */
.btn:hover {
    background-color: #2980b9;
    transform: scale(1.1); /* تكبير الزر عند التفاعل */
}

/* إضافة تأثيرات انيميشن */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* تأثير التحريك المتكرر */
.btn:active {
    animation: pulse 0.5s ease-in-out infinite; /* تأثير التحريك عند النقر */
}

الشرح:

تم استخدام transition لإضافة تأثيرات انسيابية عند التفاعل مع الزر مثل تغيير اللون background-color وتكبير الحجم باستخدام transform.
تم استخدام @keyframes لإنشاء تأثير pulse الذي يجعل الزر يتنقل بين الحجم الطبيعي والحجم المكبر عند النقر عليه.

الخلاصة:

تصميم صفحة ويب بسيطة باستخدام الأساسيات مثل background-color, font-family, وmargin لتصميم صفحة سهلة الاستخدام.
إنشاء تصميم ريسبونسيف باستخدام Flexbox و Grid لتصميم صفحة قابلة للتكيف مع مختلف أحجام الشاشات.
إضافة تأثيرات انسيابية باستخدام Transitions و Animations لتوفير تجربة مستخدم أكثر تفاعلية وسلاسة.

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