CSS Alerts

by Tim Ko

HTML

<input type="checkbox" class="hide" id="alert1">
<label for="alert1" class="show-alert">Show error alert</label>

<input type="checkbox" class="hide" id="alert2">
<label for="alert2" class="show-alert">Show warning alert</label>

<input type="checkbox" class="hide" id="alert3">
<label for="alert3" class="show-alert">Show info alert</label>

<div class="alert error fadeout">error</div>
<div class="alert warning fadeout">warning</div>
<div class="alert info fadeout">info</div>

CSS

.alert {
    background-color: #fffccd;
    border: 1px solid #e5de7d;
	border-radius: 4px;
	line-height: 1.2;
	margin: 10px 0;
	padding: 10px 10px 10px 35px;
	position: relative;
}
 
.alert.error {
	background-color: #fef3f4;
	border-color: #ed1c24;
}
 
.alert.warning {
	background-color: #fffccd;
	border-color: #e5de7d;
}
.alert.info {
    background-color: #e5f1f6;
    border: 1px solid #317cb9;
}
.fadeout {
    opacity:0;
    max-height: 0px;
    padding: 0;
    margin: 0;
    transition: opacity 1s, min-height 1s, max-height 1s, padding-top 1s, padding-bottom 1s, margin-top 1s, margin-bottom 1s;
    -webkit-transition: opacity 1s, min-height 1s, max-height 1s, padding-top 1s, padding-bottom 1s, margin-top 1s, margin-bottom 1s;
    -moz-transition: opacity 1s, min-height 1s, max-height 1s, padding-top 1s, padding-bottom 1s, margin-top 1s, margin-bottom 1s;
}
.fadein {
    opacity:1;
    min-height: 10px;
    max-height: 200px;
    transition: opacity 1s, min-height 1s, max-height 1s, padding-top 1s, padding-bottom 1s, margin-top 1s, margin-bottom 1s;
    -webkit-transition: opacity 1s, min-height 1s, max-height 1s, padding-top 1s, padding-bottom 1s, margin-top 1s, margin-bottom 1s;
    -moz-transition: opacity 1s, min-height 1s, max-height 1s, padding-top 1s, padding-bottom 1s, margin-top 1s, margin-bottom 1s;
}
.hide {
    display: none;
}
#alert1:checked ~ .error {
    opacity:1;
    min-height: 10px;
    max-height: 200px;
    margin-top: 10px;
}
#alert2:checked ~ .warning {
    opacity:1;
    min-height: 10px;
    max-height: 200px;
    margin-top: 10px;
}
#alert3:checked ~ .info {
    opacity:1;
    min-height: 10px;
    max-height: 200px;
    margin-top: 10px;
}
.show-alert {
    background: lightgray;
    border: 1px black;
    padding: 6px;
}