الصفحة الأمامية > برمجة > إنشاء بطاقات سريعة الاستجابة ومتساوية الارتفاع باستخدام CSS الحديث (سحر Flexbox وبدون استعلامات الوسائط)
تصفح:696
مقدمة
ما هو هدفنا؟
بناء البنية باستخدام HTML5 الدلالي
إضافة النمط باستخدام CSS الحديث
- إعادة ضبط CSS
- تصميم تخطيط البطاقة باستخدام Flexbox
- تصميم صورة البطاقة
- تصميم محتوى البطاقة
- تصميم زر البطاقة
- إضافة انتقالات التحويم
- استخدام متغيرات CSS
خاتمة
كمطوري ويب، غالبًا ما نواجه الحاجة إلى إنشاء مكونات البطاقة. سواء كان ذلك لعرض منتج/مشروع، أو ملف تعريف المستخدم، أو مشاركة مدونة، فإن البطاقات موجودة في كل مكان.
في الماضي، كان إنشاء تخطيطات سريعة الاستجابة يمثل تحديًا. لقد أصبح إنشاء هذه التصميمات أكثر بساطة وبديهية بشكل ملحوظ بسبب ظهور تقنيات CSS الحديثة، وتحديداً CSS Flexbox.
يعمل Flexbox على تبسيط عملية إنشاء تخطيطات سريعة الاستجابة. يمكننا بسهولة ترتيب العناصر ومحاذاتها وتباعدها في حاوية دون استخدام استعلامات الوسائط المعقدة. وهذا يعني أنه يمكننا إنشاء تخطيطات تتكيف بشكل جميل مع أحجام واتجاهات الشاشات المختلفة دون تحديد نقاط توقف دقيقة.
الهدف هو إنشاء بطاقات سريعة الاستجابة ذات ارتفاعات متساوية دون الاعتماد على نقاط التوقف باستخدام CSS Flexbox. سوف نتأكد من أن كل بطاقة تحافظ على نفس الارتفاع بغض النظر عن طول المحتوى، وتتكيف بسلاسة مع أحجام الشاشات المختلفة.
خصائص CSS الرئيسية للتخطيط:
الآن دعونا نستكشف سحر CSS flexbox من خلال بناء البطاقات!
Title one
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.
Title two
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.
Title three
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!
/* Basic CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Ensure that our layout is centred horizontally and vertically on the page */
body {
display: flex; /* using CSS flexbox to vertically and horizontally centre all cards */
justify-content: center;
align-items: center;
min-height: 100vh;
overflow-x: hidden; /* Prevent horizontal scrolling */
}
/* Cards */
.card-container {
display: flex; /* using CSS flexbox to display each card at the centre */
justify-content: center;
align-items: stretch; /* use stretch for equal height of all cards */
gap: 1.5625rem; /* add space between each card */
flex-wrap: wrap;
padding: 1rem;
max-width: 100%; /* Prevent container from exceeding viewport width */
}
.card {
display: flex;
flex-direction: column;
width: 20rem;
background-color: #fff;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
text-align: center;
text-wrap: balance; /* ensures content is evenly distributed across multiple lines for better readability. */
overflow: hidden;
}
.card-image {
width: 100%;
height: auto;
object-fit: cover;
margin-bottom: 0.85rem;
}
.card-title {
font-size: 1.25rem;
padding: 1rem;
color: #3ca69f;
}
.card-description {
flex-grow: 1; /* allow the content to take available space, thus maintaining equal height no matter the length of the content */
padding: 0 1rem 1rem;
font-size: 0.975rem;
line-height: 1.5;
}
/* Cards button */
.card-button {
align-self: center; /* placing the button at the center */
margin: 1rem 0 3rem;
padding: 0.625rem 1rem;
font-size: 1rem;
color: #ffffff;
background-color: #3ca69f;
border: none;
border-radius: 0.3125rem;
cursor: pointer;
}
.card {
transition: 0.5s ease all;
}
.card-button {
transition: 0.5s ease all;
}
/* cards hover effect */
.card:hover {
background-color: #276662;
color: #ffffff;
}
.card:hover > .card-button {
background-color: #ffffff;
color: #276662;
font-weight: 700;
}
.card:hover > .card-title {
color: #ffffff;
}
/* Declare variables */
:root {
--primary-color: #3ca69f;
--secondary-color: #276662;
--text-color: #ffffff;
--shadow-color: rgba(0, 0, 0, 0.4);
--border-radius: 0.3125rem;
--spacing: 1rem;
--transition-duration: 0.5s;
}
الذهاب إلى الأعلى
تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.
Copyright© 2022 湘ICP备2022001581号-3
