news box със заоблени ъгли без изображения

Автор: akolevutd

Сега ще ви покажа един начин как можете да си направите някакъв блок за новини примерно, без да ползвате таблици и изображения! Може да не слагате контейнерите center и right и да ги замените с left, но сьм го написал така за ваше влеснение.

css code

body {
background-color: #FFFFFF;
}
.nifty {
width: 250px;
background: #C5E100;
margin: 0 auto;
color: #FFFFFF;
}
b.rtop, b.rbottom {
display:block;
background: #FFF
}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #C5E100;
}
b.r1 { margin: 0 5px }
b.r2 { margin: 0 3px }
b.r3 { margin: 0 2px }
b.rtop b.r4, b.rbottom b.r4 { margin: 0 1px;height: 2px }

.title {
font-size: 19px;
font-weight: bold;
text-align:center;
font-family: arial, sans-serif, helvetica;
}
.new {
padding: 5px 5px 5px 5px;
text-align: center;
color: #fff;
font-size: 15px;
font-family: arial, sans-serif, helvetica;
}
#left {
width: 250px;
border: 1px solid #C5E100;
padding: 3px 3px 3px 3px;
float: left;
}
#center {
width: 250px;
border: 1px solid #C5E100;
padding: 3px 3px 3px 3px;
float: left;
margin-left: 20px;
}
#right {
width: 250px;
border: 1px solid #C5E100;
padding: 3px 3px 3px 3px;
float: left;
margin-left: 20px;
}

html code

<div id="left">
<div class="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="title">Code good with CSS!</div><hr color="#FFFFFF" width="230" align="center" />
<div class="new">

Coding with css can be quite pleasent experience. You only have to jknow what you are doing why you are doing it and how exactly to do it! There might be many problems concerning the layout and making it look all the same under different browsers, but you must not hate CSS for this, instead focus and try to overcome this difficulties.</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</div>
<div id="center">
<div class="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="title">Code good with CSS!</div><hr color="#FFFFFF" width="230" align="center" />
<div class="new">
Coding with css can be quite pleasent experience. You only have to jknow what you are doing why you are doing it and how exactly to do it! There might be many problems concerning the layout and making it look all the same under different browsers, but you must not hate CSS for this, instead focus and try to overcome this difficulties.</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</div>
<div id="right">

<div class="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="title">Code good with CSS!</div><hr color="#FFFFFF" width="230" align="center" />
<div class="new">
Coding with css can be quite pleasent experience. You only have to jknow what you are doing why you are doing it and how exactly to do it! There might be many problems concerning the layout and making it look all the same under different browsers, but you must not hate CSS for this, instead focus and try to overcome this difficulties.</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</div>