Skip to content

Instantly share code, notes, and snippets.

@aviaryan

aviaryan/css-box-noimage.html

Last active August 19, 2023 03:10
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aviaryan/4125787eaec46348268e to your computer and use it in GitHub Desktop.
Save aviaryan/4125787eaec46348268e to your computer and use it in GitHub Desktop.
Download ZIP
CSS message boxes without using any image or icon
Raw
css-box-noimage.html
<html>
<head><title>Testing boxes</title>
<style>
.symbol {
font-size: 0.9em;
font-family: Times New Roman;
border-radius: 1em;
padding: .1em .6em .1em .6em;
font-weight: bolder;
color: white;
background-color: #3229CF;
}
.icon-info { background-color: #3229CF; }
.icon-error { background: #e64943; font-family: Consolas; }
.icon-tick { background: #13c823; }
.icon-excl { background: #ffd54b; color: black; }
.icon-info:before { content: 'i'; }
.icon-error:before { content: 'x'; }
.icon-tick:before { content: '\002713'; }
.icon-excl:before { content: '!'; }
.notify {
background-color:#e3f7fc;
color:#555;
border:.1em solid;
border-color: #8ed9f6;
border-radius:10px;
font-family:Tahoma,Geneva,Arial,sans-serif;
font-size:1.1em;
padding:10px 10px 10px 10px;
margin:10px;
cursor: default;
}
.notify-yellow { background: #fff8c4; border-color: #f7deae; }
.notify-red { background: #ffecec; border-color: #fad9d7; }
.notify-green { background: #e9ffd9; border-color: #D1FAB6; }
</style>
</head>
<body>
See <a href="http://aviaryan.github.io/blog/css-notification-bubble-box.html">http://aviaryan.github.io/blog/css-notification-bubble-box.html</a>
<br>
<br>
<br>
<div class="notify"><span class="symbol icon-info"></span> A kind of a notice box !</div>
<div class="notify notify-red"><span class="symbol icon-error"></span> Error message</div>
<div class="notify notify-green"><span class="symbol icon-tick"></span> A positive/success/completion message</div>
<div class="notify notify-yellow"><span class="symbol icon-excl"></span> A warning message</div>
<br>
<span class="notify"><span class="symbol icon-info"></span> A kind of a notice box using span</span>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment