تقنيات 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!