Как мы создаем уведомление о CSS-уведомлении в новом дизайне - PullRequest
Новая
       53

Как мы создаем уведомление о CSS-уведомлении в новом дизайне

0 голосов
/ 02 июля 2018

Возможно ли создать подобное [это оповещение] [1] в CSS? Я видел это предупреждение в моей панели управления cPanel. Где я также пытаюсь просмотреть Css этого кода, когда я пытаюсь просмотреть его снова на странице входа. Я не мог сделать.

1 Ответ

0 голосов
/ 02 июля 2018

так просто, как это:

Я добавил FontAwesome для проверки значков. Вы можете список значков шрифтов Здесь

, чтобы найти соответствующий код значка для .alert: перед содержимым щелкните значок в списке и скопируйте текст Юникод .

не забудьте поставить обратную косую черту перед юникодом в содержимом. 

.alert {
    max-width: 550px;
    position:  relative;
    padding: 10px 20px 10px 10px;
    margin:  10px auto;
    border-radius: 3px;
    background-color: #faf8df;
    border: 2px solid #f5c340;
    border-left-width: 40px;
}
.alert:before {
    content: '\f071';
    font-family: "FontAwesome";
    position: absolute;
    left: -27px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}
.alert .close {
    position:  absolute;
    right: 8px;
    cursor:  pointer;
    top: 10px;
    color: #999;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div class="alert">
    <b>Warning:</b> this is the text you want to show as a warning message.
    <span class="close">&times;</span>
</div>
...