Beautiful box model, CSS

[bbasujon]

সুন্দর সুন্দর বক্স মডেল: সিএসএস

বক্স প্রপার্টি:

বক্স বানতে চাইলে কয়েকটি প্রপার্টি সেট করতে হবে।
width বক্সের প্রস্থ
border বক্সের বর্ডারের পিক্সেলের পরিমান,রং ইত্যাদি প্রপার্টি সেট করা হয়
padding বক্সের ভেতরে যে পরিমান যায়গা ফাকা রেখে লেখাগুলো আসবে
margin বক্সের বাইরের যে দূরত্ব রেখে শুরু হবে



ছবিটিতে width, padding, margin ও padding দেখানো হলো।
উদাহরণ:

এবার কোডিংয়ে হাত দেয়া যাক
নিচের প্রপার্টি সেট করতে হবে

box {
width: 200px;
border: 10px solid #99c;
padding: 20px;
margin: 20px;
}

এই কোড লেখার পর নিচের মতো বক্স তৈরী হবে:

এছাড়া আরও অনেক প্রপার্টি রয়েছে:

border-style
border-width
border-color
margin-left
margin-right
margin-bottom
margin-top
padding-left
padding-right
padding-top
padding-bottom
নিচের ছবির মতো মেসেজ বক্সও সিএসএস এ বানানো যায়:

এর জন্য কোড

body{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}

HTML কোড

<div class="info">Info message</div>

<div class="success">Successful operation message</div>

<div class="warning">Warning message</div>

<div class="error">Error message</div>