دهکده بزرگ برنامه نویسی

آموزش ساخت card با css

آموزش ساخت card با css

خب همانطور که می بینید تصویر بالا یک نمونه ساده از کارت است. و می توانید مانند شکل زیر چندین کارت را در کنار یکدیگر قرار

دهید:

آموزش ساخت card با css

برای کد نویسی یکی از این کارت ها می توانید از کد های زیر استفاده کنید:


1     <div style="position:relative; box-shadow: 0 0 5px silver;width:300px;height:400px;display: inline-block;margin-bottom:40px;margin-left:20px">

2     <div style="background-image: url('sample.jpg'); background-size: cover;background-position:center;height:300px"></div>

3     <div style="padding:5px">

4     <h2 style="margin:0">Sample Page</h2>

5     <h4 style="color:gray;margin:0;margin-top:5px;">subtext</h4>

6     </div>

7     </div>

اما یک توضیح مختصر در رابطه با کد های بالا می دهم.

برای اینکه کارت ها بتوانند پشت سر هم قرار بگیرند و در ضمن حالت ریسپانسیو نیز به خود بگیرند ؛ لازم است تا در در بخش

استایل کارت خاصیت display را برابر با inline-block قرار دهیم. همچنین برای هر کارت لازم است مقداری را برای حاشیه از سمت

چپ (برای متن های انگلیسی) و حاشیه از سمت پایین قرار دهیم تا کارت ها از هم متمایز و جدا شوند.

همچنین می توانید برای زیبایی کارت ها ، مقداری را برای خاصیت box-shadow آن انتخاب کنید.

اگر کد های بالا را به صورت زیر تغییر دهید ، می توانید یک شی را بر روی عکس اصلی نیز قرار دهید:


1     <div style="position:relative; box-shadow: 0 0 5px silver;width:300px;height:400px;display: inline-block;margin-bottom:40px;margin-left:20px">

2     <div style="background-image: url('sample.jpg'); background-size: cover;background-position: center;height:300px"></div>

3     <div style="padding:5px">

4     <div style="position: absolute;top:5px;left:5px;border-radius:50%;background-color:#00CC00;padding:5px;width:24px;height:24px;text-align:center;font-size:25px">♥</div>

5     <h2 style="margin:0">Sample Page</h2>

6     <h4 style="color:gray;margin:0;margin-top:5px;">subtext</h4>

7     </div>

8     </div>

و نتیجه آن به صورت زیر است:

آموزش ساخت card با css

کلید واژه ها :csshtmlساخت کارتریسپانسیو
نوشته شده توسط : amindelavar  |  ارسال شده در تاریخ : 2017/01/04-21:46   |  تعداد بازدید کنندگان :36
ارسال نظر شما  (شما ابتدا باید در سایت ثبت نام کنید تا بتوانید نظر دهید.)

آیا این مقاله برای شما مفید بود؟    بله    خیر

اگر وقت بیشتری داری ، می تونی نظرت رو به طور کامل تری در زیر توضیح دهی :

جعبه جستجو
مقاله های اخیر
مقاله های پر بیننده
آمار سایت

 تعداد تمامی مقالات موجود : 16

 تعداد اعضای سایت : 3

 آخرین بروز رسانی سایت : 6 ماه پیش

 بازدید کنندگان امروز (آی پی یکتا) : 8

 بازدید کنندگان دیروز (آی پی یکتا) : 7

 بازدید کنندگان کل (آی پی یکتا) : 3686