ساخت کارت (card) : ایجاد حاشیه سایه دار (bordered shadow) به دور عنصر، با کلاس های w3-card و w3-card-2 و w3-card-4 ، در W3.CSS
منظور از کارت (card)، قسمتی از صفحه است که با ایجاد حاشیه سایه دار (bordered shadow) برای آن، شبیه به یک کارت (card) کاغذی خواهد شد و نسبت به سایر بخش های صفحه، کمی برجسته به نظر می آید.
کلاس های (Class) زیر در چارچوب W3.CSS ، برای ساخت کارت (card) به کار می روند :
مشاهده می کنید که در نامگذاری همه آنها، کلمه card به کار رفته است.
دو کلاس w3-card و w3-card-2 مشابه می باشند و هر دو به اندازه 2px حاشیه سایه دار (bordered shadow) ایجاد می کنند.
کلاس w3-card-4 نیز به اندازه 4px حاشیه سایه دار (bordered shadow) ایجاد خواهد کرد. در وافع، عددی که در انتهای نام کلاس ها (Class) ذکر شده است، میزان حاشیه سایه دار (bordered shadow) را بیان می کند، البته به جز کلاس w3-card که عملکردش دقیقا مثل کلاس w3-card-2 می باشد.
با توجه به مناسب بودن مثال های وب سایت w3schools.com ، مثال های این آموزش را بر اساس آنها خواهیم نوشت.
ساخت کارت (card) ساده (بدون رنگ پس زمینه) :
برای ساخت یک کارت (card) ساده و بدون رنگ پس زمینه، تنها کافی است که کلاس w3-card را به عنصر مورد نظر اضافه کنیم :
به مثال زیر توجه کنید :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
ساخت کارت (card)، با تعیین رنگ پس زمینه :
چنانچه قصد داشته باشیم که رنگ پس زمینه کارت (card) را مشخص کنیم، باید کلاس (Class) مربوط به رنگ مورد نظرمان را نیز برای عنصر مورد نظر، ذکر نماییم ( کلید شماره 26146 ). به عنوان مثال، فرض کنید که بخواهیم رنگ پس زمینه کارت (card) برابر رنگ سبز (green) باشد، بنابراین باید کلاس w3-green برای عنصر مورد نظر ذکر شود :
به مثال زیر توجه کنید :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
ساخت کارت (card) دارای Header و Footer :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
ساخت کارت (card) دارای عکس (Photo Card) :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
نمایش عنصر به شکل کارت (card)، هنگام بردن موس بر روی عنصر :
برای نمایش عنصر به شکل کارت (card)، در هنگام بردن موس بر روی عنصر، کلید شماره 26173 را بخوانید.
چند مثال :
در ادامه، مثال هایی پیچیده تر را ذکر می کنیم :
مثالی از وب سایت w3schools.com :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
مثالی از وب سایت w3schools.com :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
مثالی از وب سایت w3schools.com :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
- فهرست مباحث
- 1 معرفی چارچوب W3.CSS برای ساخت یک وب سایت واکنش گرا (Responsive) و طراحی گرافیکی آن، تنها با یک فایل CSS
- 2 افزودن چارچوب W3.CSS به صفحات وب سایت
- 3 شیوه نامگذاری کلاس ها (Class)، در چارچوب W3.CSS
- 4 رنگ ها (Color)، در W3.CSS
- 5 ساخت Container : ایجاد padding (حاشیه) به اندازه 16px در سمت چپ و راست عناصر صفحه HTML ، با کلاس w3-container ، در W3.CSS
- 6 ساخت Panel : ایجاد margin (حاشیه) به اندازه 16px در بالا و پایین و همچنین padding (حاشیه) به اندازه 16px در سمت چپ و راست عناصر صفحه HTML ، با کلاس w3-panel ، در W3.CSS
- 7 ساخت کارت (card) : ایجاد حاشیه سایه دار (bordered shadow) به دور عنصر، با کلاس های w3-card و w3-card-2 و w3-card-4 ، در W3.CSS
- 8 تعیین اندازه فونت ها (Font)، در W3.CSS
-
نکته : این فهرست مباحث، صرفا منتخبی از کلیدهای آموزشی این موضوع است (که خواندن متوالی آنها توصیه می شود) و برای دیدن کلیدهای آموزشی بیشتر از این موضوع، می توانید بر روی دسته بندی های ستون سمت راست کلیک نمایید.
