استكشف الطرق المختلفة لاستخدام وتخصيص رمز الدرهم الجديد في مشاريعك
<div class="price-display">
<span class="amount">299</span>
<span class="currency-symbol"></span>
</div>
<style>
.price-display {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 2.5rem;
font-weight: 700;
}
.currency-symbol {
color: #007040;
}
</style>
.currency-small { font-size: 16px; }
.currency-medium { font-size: 24px; }
.currency-large { font-size: 32px; }
.currency-xlarge { font-size: 48px; }
.currency-green { color: #007040; }
.currency-red { color: #dc3545; }
.currency-gold { color: #ffd700; }
.currency-blue { color: #007bff; }
| المنتج | السعر |
|---|---|
| منتج أ | 150 |
| منتج ب | 250 |
<table class="data-table">
<tr>
<td>منتج أ</td>
<td><span class="currency-symbol"></span> 150</td>
</tr>
</table>
<div class="input-group">
<span class="input-prefix">
<span class="currency-symbol"></span>
</span>
<input type="number" placeholder="أدخل السعر">
</div>
<div class="product-card">
<div class="product-name">هاتف ذكي</div>
<div class="product-price">
<span class="currency-symbol"></span> 1,299
</div>
</div>
.currency-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.responsive-symbol {
font-size: clamp(16px, 4vw, 32px);
}
/* يتكيف الحجم مع عرض الشاشة */