Flat infobox styling

09.14.2013 by Ilia Raiskin

HTML CSS

In this tutorial I'm going to show you how to create flat infoboxes with HTML and CSS. Tell me whether you like it or not in the comments (no login required).

Demo

Example Title

Marzipan jelly-o cookie. Powder jelly-o dragee bonbon. Cupcake oat cake dessert fruitcake lollipop souffle candy. Macaroon toffee tiramisu cupcake croissant. Caramels halvah apple pie sugar plum gingerbread. Tiramisu macaroon gummi bears halvah bonbon chocolate chocolate bar. Chupa chups donut marzipan marzipan cotton candy halvah caramels. Lollipop tart lemon drops cotton candy.

Example Title

HTML

<div class="tut-info-box">
<h3>Example Title</h3>
<p>
Marzipan jelly-o cookie. Powder jelly-o dragee bonbon. Cupcake oat cake dessert fruitcake lollipop souffle candy. Macaroon toffee tiramisu cupcake croissant.
Caramels halvah apple pie sugar plum gingerbread. Tiramisu macaroon gummi bears halvah bonbon chocolate chocolate bar. Chupa chups donut marzipan marzipan cotton candy halvah caramels. Lollipop tart lemon drops cotton candy.
</p>
</div>	
<div class="tut-info-box confirm">
<h3>Example Title</h3>
<p>
Marzipan jelly-o cookie. Powder jelly-o dragee bonbon. Cupcake oat cake dessert fruitcake lollipop souffle candy. Macaroon toffee tiramisu cupcake croissant.
Caramels halvah apple pie sugar plum gingerbread. Tiramisu macaroon gummi bears halvah bonbon chocolate chocolate bar. Chupa chups donut marzipan marzipan cotton candy halvah caramels. Lollipop tart lemon drops cotton candy.
</p>
</div>
<div class="tut-info-box error">
<h3>Example Title</h3>
<p>
Marzipan jelly-o cookie. Powder jelly-o dragee bonbon. Cupcake oat cake dessert fruitcake lollipop souffle candy. Macaroon toffee tiramisu cupcake croissant.
Caramels halvah apple pie sugar plum gingerbread. Tiramisu macaroon gummi bears halvah bonbon chocolate chocolate bar. Chupa chups donut marzipan marzipan cotton candy halvah caramels. Lollipop tart lemon drops cotton candy.
</p>
</div>	
<div class="tut-info-box warning">
<h3>Example Title</h3>
<p>
Marzipan jelly-o cookie. Powder jelly-o dragee bonbon. Cupcake oat cake dessert fruitcake lollipop souffle candy. Macaroon toffee tiramisu cupcake croissant.
Caramels halvah apple pie sugar plum gingerbread. Tiramisu macaroon gummi bears halvah bonbon chocolate chocolate bar. Chupa chups donut marzipan marzipan cotton candy halvah caramels. Lollipop tart lemon drops cotton candy.
</p>
</div>

CSS

.tut-info-box {
background: white;
border: 2px solid rgb(121, 207, 223);
padding: 20px;
-webkit-font-smoothing: antialiased;
font-family: Helvetica;
margin: 15px 0px;
}

.tut-info-box h3 {
font-family: Helvetica;
font-weight: bold;
color: white;
background: rgb(121, 207, 223);
margin: -20px -20px 0px -20px;
padding: 20px;
font-size: 24px;
}

.tut-info-box.confirm {
border: 2px solid rgb(124, 223, 124);
}

.tut-info-box.confirm h3 {
background: rgb(124, 223, 124);
}

.tut-info-box.error{
border:2px solid rgb(223, 114, 114);
}

.tut-info-box.error h3 {
background: rgb(223, 114, 114);
}

.tut-info-box.warning {
border: 2px solid rgb(224, 220, 121);
}

.tut-info-box.warning h3{
border: 2px solid rgb(224, 220, 121);
}

.tut-info-box p {
font-family: Helvetica;
font-size: 15px;
}

About the author

Ilia Raiskin

Ilia Raiskin is a web designer, web developer, blogger and founder of Toolinfy.com.

Flat infobox styling

Demo

Example Title

Example Title

Example Title

Example Title

HTML

CSS

About the author

Ilia Raiskin

Did you like this post? Any feedback is highly appreciated. Feel free to leave a comment.

Follow & Subscribe

About us

Info