مكتبة أمثلة CSS بالعربي — شرح تطبيقي

<h1>ألوان مبهجة</h1>
<p class="text-1">هذا نص باللون الأزرق.</p>
<p class="text-2">هذا نص بخلفية صفراء.</p>
<div class="box">مربع ملون</div><style>
body { font-family: sans-serif; padding: 20px; }
h1 { color: #333; text-align: center; }
.text-1 { color: #2563eb; font-weight: bold; font-size: 1.2rem; }
.text-2 { background-color: #fef08a; color: #854d0e; padding: 10px; display: inline-block; }
.box { background: linear-gradient(45deg, #ec4899, #8b5cf6); color: white; padding: 20px; margin-top: 20px; text-align: center; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }</style>

<div class="card-1">حدود صلبة (Solid)</div>
<div class="card-2">حدود منقطة (Dotted)</div>
<div class="card-3">زوايا دائرية (Radius)</div><style>
body { font-family: sans-serif; padding: 20px; display: flex; flex-direction: column; gap: 20px; align-items: center; }
div { padding: 15px 30px; background: white; width: 200px; text-align: center; }
.card-1 { border: 3px solid #2563eb; }
.card-2 { border: 3px dotted #dc2626; color: #dc2626; }
.card-3 { border: 2px solid #059669; border-radius: 25px; background-color: #ecfdf5; color: #059669; font-weight: bold; }</style>

<h2 class="title">عنوان مزخرف</h2>
<p class="para">هذا النص يتميز بمسافات بين الأحرف ومحاذاة مضبوطة (Justified) لملء السطر بالكامل بشكل مرتب وجميل.</p>
<a href="#" class="link">رابط بدون خط تحته</a><style>
body { font-family: "Segoe UI", sans-serif; padding: 30px; max-width: 400px; margin: 0 auto; }
.title { text-align: center; text-transform: uppercase; letter-spacing: 2px; color: #4b5563; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); }
.para { text-align: justify; line-height: 1.8; color: #6b7280; }
.link { text-decoration: none; color: #db2777; font-weight: bold; border-bottom: 2px dashed #db2777; }
.link:hover { border-bottom-style: solid; }</style>

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div><style>
body { font-family: sans-serif; padding: 20px; }
.container { display: flex; justify-content: space-between; align-items: center; background-color: #f3f4f6; padding: 20px; border-radius: 10px; height: 150px; }
.item { background-color: #3b82f6; color: white; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: bold; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.item:nth-child(2) { background-color: #ef4444; height: 80px; } /* عنصر أطول */
.item:nth-child(3) { background-color: #10b981; }</style>

<button class="btn">مرر الماوس هنا</button><style>
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f8fafc; }
.btn {
    background-color: #4f46e5;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(79, 70, 229, 0.3);
}
.btn:hover {
    background-color: #4338ca;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.4);
}</style>