Стильные информационные блоки на CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
.message { background-color: white; width: 400px; padding: 1em 1em 1em 1.5em; border-left-width: 6px; border-left-style: solid; border-radius: 3px; position: relative; line-height: 1.5; margin: 50px; } .message + .message { margin-top: 2em; } .message:before { color: white; width: 1.5em; height: 1.5em; position: absolute; top: 1em; left: -3px; border-radius: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-weight: bold; line-height: 1.5; text-align: center; } .message p { margin: 0 0 1em; } .message p:last-child { margin-bottom: 0; } .message--error { border-left-color: firebrick; } .message--error:before { background-color: firebrick; content: "‼"; } .message--warning { border-left-color: darkorange; } .message--warning:before { background-color: darkorange; content: "!"; } .message--success { border-left-color: darkolivegreen; } .message--success:before { background-color: darkolivegreen; content: "✔"; } |
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="message message--error"> <p>Это блок, в котором содержится сообщение об ошибке или просто важная информация.</p> </div> <div class="message message--warning"> <p>Это блок, в котором содержится какое-то предупреждение или просто информация средней важности.</p> </div> <div class="message message--success"> <p>Это блок, в котором содержится сообщение об успешном выполнении чего-либо или просто любая информация.</p> </div> |
