تقنيات CSS Ø§Ù„ØØ¯ÙŠØ«Ø© للمطورين 🎨
تعلم Ø£ØØ¯Ø« تقنيات CSS لإنشاء تصاميم عصرية وجذابة بكود نظي٠وسهل الصيانة.
Ø§Ù„Ù…ØØªÙˆÙŠØ§Øª
1 CSS Variables
المتغيرات تجعل التصميم أسهل وأسرع ÙÙŠ التعديل.
variables.css
:root {
--primary: #0071e3;
--spacing: 16px;
}
.btn {
background: var(--primary);
padding: var(--spacing);
}
الÙوائد
- تغيير الألوان ÙÙŠ مكان ÙˆØ§ØØ¯
- سهولة إنشاء Dark Mode
- كود أنظÙ
2 CSS Grid
grid.css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.responsive {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
3 Flexbox
flex.css
.center {
display: flex;
justify-content: center;
align-items: center;
}
.navbar {
display: flex;
justify-content: space-between;
}
4 Glassmorphism
glass.css
.glass {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 15px;
}
رائع!
الآن ØªØ¹Ø±Ù Ø£ØØ¯Ø« تقنيات CSS!