Alertas

Alertas simles (básico)

Simples alerta de sucesso ou informação.
Simples alerta de atenção.
Simples alerta de erro. 
<div class="alert success">
    Simples alerta de sucesso ou informação.
</div>
<div class="alert warning">
    Simples alerta de atenção.
</div>
<div class="alert error">
    Simples alerta de erro.
</div>
</pre>

Alertas simples com tags html semânticas

Cabeçalho 3

strong texto em negrito link frontwork.webship.com.br underline texto sublinhado em texto em itálico mark texto destacado code trecho de código

Tempus sem aliquid vestibulum eiusmod nibh! Fermentum necessitatibus kacus.

Cabeçalho 4

strong texto em negrito link frontwork.webship.com.br underline texto sublinhado em texto em itálico mark texto destacado code trecho de código

Tempus sem aliquid vestibulum eiusmod nibh! Fermentum necessitatibus kacus.

Cabeçalho 5

strong texto em negrito link frontwork.webship.com.br underline texto sublinhado em texto em itálico mark texto destacado code trecho de código

Tempus sem aliquid vestibulum eiusmod nibh! Fermentum necessitatibus kacus.

<div class="alert success">
    <h3>Cabeçalho 3</h3>
    <p>strong <strong>texto em negrito</strong> link <a href="#">frontwork.webship.com.br</a> 
    underline <u>texto sublinhado</u> em <em>texto em itálico</em> 
    mark <mark>texto destacado</mark> code <code>trecho de código</code></p>
    <hr><p>Tempus sem aliquid vestibulum eiusmod nibh! Fermentum necessitatibus kacus.</p>
</div>
<div class="alert warning">
    <h4>Cabeçalho 4</h4>
    <p>strong <strong>texto em negrito</strong> link <a href="#">frontwork.webship.com.br</a> 
    underline <u>texto sublinhado</u> em <em>texto em itálico</em> mark <mark>texto destacado</mark> 
    code <code>trecho de código</code></p>
    <hr><p>Tempus sem aliquid vestibulum eiusmod nibh! Fermentum necessitatibus kacus.</p>
</div>
<div class="alert error">
    <h5>Cabeçalho 5</h5>
    <p>strong <strong>texto em negrito</strong> link <a href="#">frontwork.webship.com.br</a> 
    underline <u>texto sublinhado</u> em <em>texto em itálico</em> 
    mark <mark>texto destacado</mark> code <code>trecho de código</code></p>
    <hr><p>Tempus sem aliquid vestibulum eiusmod nibh! Fermentum necessitatibus kacus.</p>
</div>

Alertas com ícone de descarte JS

O ícone de descarte é independente. Para obte-lo basta adicionar a class discard ao elemento parente relativo.

Para alterar o tamanho do ícone você pode simplesmente adicionar o atributo data-icon-size. O valor padrão é 24.

Esse é um alerta de sucesso com ícone de descarte
Esse é um alerta de aviso com ícone de descarte
Esse é um alerta de erro com ícone de descarte 
<div class="alert success discard">
    Esse é um alerta de sucesso com ícone de descarte
</div>
<div class="alert warning discard">
    Esse é um alerta de aviso com ícone de descarte
</div>
<div class="alert error discard">
    Esse é um alerta de erro com ícone de descarte
</div>');

Alertas com strong

Alerta peculiar de sucesso ou informação.
Alerta peculiar para chamar atenção.
Alerta peculiar de erro. 
<div class="alert success strong">
        Alerta peculiar de sucesso ou informação.
    </div>
    <div class="alert warning strong">
        Alerta peculiar para chamar atenção.
    </div>
    <div class="alert error strong">
        Alerta peculiar de erro.
</div>

Alert strong com html semântico e ícone de descarte JS

Cabeçalho 5

Esse mollit aqui o texto em negrito dui incididunt aliquam nisi um link aqui autem option eleifend. Aqui o texto sublinhado molestiae nostra aqui o texto em itálico `inclinado` natus parturient, fonte pequena com small tag accusantium delectus eros destaque de texto com mark dictum molestias. Dictumst et trecho de código com a tag code illum auctor sapien.

Cabeçalho 4

Esse mollit aqui o texto em negrito dui incididunt aliquam nisi um link aqui autem option eleifend. Aqui o texto sublinhado molestiae nostra aqui o texto em itálico `inclinado` natus parturient, fonte pequena com small tag accusantium delectus eros destaque de texto com mark dictum molestias. Dictumst et trecho de código com a tag code illum auctor sapien.

Cabeçalho 3

Esse mollit aqui o texto em negrito dui incididunt aliquam nisi um link aqui autem option eleifend. Aqui o texto sublinhado molestiae nostra aqui o texto em itálico `inclinado` natus parturient, fonte pequena com small tag accusantium delectus eros destaque de texto com mark dictum molestias. Dictumst et trecho de código com a tag code illum auctor sapien.

<div class="alert success strong discard">
    <h5>Cabeçalho 5</h5>
    <p><strong>negrito</strong><a href="#">link</a><u>sublinhado</u><em>itálico</em>
    <small>small</small><mark>destaque</mark><code>trecho de código</code></p>
</div>
<div class="alert warning strong discard">
    <h4>Cabeçalho 4</h4>
    <p><strong>negrito</strong><a href="#">link</a><u>sublinhado</u><em>itálico</em>
    <small>small</small><mark>destaque</mark><code>trecho de código</code></p>
</div>
<div class="alert error strong discard">
    <h3>Cabeçalho 3</h3>
    <p><strong>negrito</strong><a href="#">link</a><u>sublinhado</u><em>itálico</em>
    <small>small</small><mark>destaque</mark><code>trecho de código</code></p>
</div>
Icones de discarte requer discard js e css, icons.js e fade.js
.alert {
    --alert__text-shadow: 1px 1px rgba(255, 255, 255, 0.35);
    --alertCode_background: rgba(255, 255, 255, 0.25);
    --alertHr__border-top: 1px solid rgba(0, 0, 0, 0.12);
    --alertHr__border-bottom: 1px solid rgba(255, 255, 255, 0.25);

    --alertSuccess__color: #0B3852;
    --alertSuccess__background: #99D3F4;
    --alertSuccess__border: 1px solid #6AB2DC;
    --alertSuccessLink__color: #00008B;
    --alertSuccessMark__background: #6AB2DC;

    --alertWarning__color: #696110;
    --alertWarning__background: #FBF37E;
    --alertWarning__border: 1px solid #E6DE4A;
    --alertWarningLink__color: #8A852C;
    --alertWarningMark__background: #E6DE4A;
    --alertWarningHr__border-top: 1px solid rgba(0, 0, 0, 0.09);
    --alertWarningHr__border-bottom: 1px solid rgba(255, 255, 255, 0.63);

    --alertError__color: #4E2229;
    --alertError__background: #E0ACB3;
    --alertError__border: 1px solid #C6989E;
    --alertError__text-shadow: 1px 1px rgba(255, 255, 255, 0.25);
    --alertErrorLink__color: #600000;
    --alertErrorMark__background: #C6989E;
    --alertErrorCode: rgba(255, 255, 255, 0.17);
    
    position: relative;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 12px 15px;
    border-radius: 3px;
    font-size: 1.1rem;
    line-height: 1.5;
    text-shadow: var(--alert__text-shadow);
}
/** remove espacamento superior no "primeiro filho" e inferior "ultimo filho" de .alert */
.alert:not(.close) > *:first-child, .alert .close + * {
    margin-top: 0;
    padding-top: 0;
}
.alert > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
.alert a {
    text-shadow: none;
}
.alert mark, .alert code {
    padding: 0 4px;
    margin: 0 -1px;
}
.alert mark {
    position: relative;
    display: inline-block;
    padding-bottom: 1px;
    text-shadow: none;
}
.alert hr {
    background-color: transparent;
    border-top: var(--alertHr__border-top);
    border-bottom: var(--alertHr__border-bottom);
    margin: 10px 0;
}

.alert.success {
    color: var(--alertSuccess__color);
    background-color: var(--alertSuccess__background);
    border: 1px solid var(--alertSuccess__border);
}
.alert.warning {
    color: var(--alertWarning__color);
    background-color: var(--alertWarning__background);
    border: 1px solid var(--alertWarning__border);
}
.alert.error {
    color: var(--alertError__color);
    background-color: var(--alertError__background);
    border: 1px solid var(--alertError__border);
    text-shadow: var(--alertError__text-shadow);
}

.alert.success a {
    color: var(--alertSuccessLink__color);
}
.alert.success mark {
    background-color: var(--alertSuccessMark__background);
}

.alert.warning a {
    color: var(--alertWarningLink__color);
}
.alert.warning mark {
    background-color: var(--alertWarningMark__background);
    color: #FFFFFF;
}

.alert.error a {
    color: var(--alertErrorLink__color);
}
.alert.error mark {
    background-color: var(--alertErrorMark__background);
}

/* alert strong */
.alert.strong mark {
    box-shadow: 0 -1px 2px 1px rgba(0, 0, 0, 0.15) inset;
    color: inherit;
}
.alert.strong a {
    text-shadow: 1px 1px rgba(255, 255, 255, 0.40);
}
.alert.strong code {
    color: #564A26;
}

.alert.success.strong {
    background-image: linear-gradient(to bottom, #01EBFF 5%, #00A4B3 95%);
    border: 2px solid #01EBFF;
    border-image: linear-gradient(to bottom, #00A4B3, #01EBFF, #01EBFF, #007580);
    border-image-slice: 2;
    color: #00171A;
}
.alert.warning.strong {
    background-image: linear-gradient(to bottom, #E4D100 5%, #B3A400 95%);
    border: 2px solid #C1B700;
    border-image: linear-gradient(to bottom, #B3A400, #E4D100, #E4D100, #7E7300);
    border-image-slice: 2;
    color: #1A1700;
}
.alert.error.strong {
    background-image: linear-gradient(to bottom, #FF0000 5%, #B30000 95%);
    border: 2px solid #DE0C02;
    border-image: linear-gradient(to bottom, #B30000, #FF0000, #FF0000, #800000);
    border-image-slice: 2;
    color: #1A0000;
}

.alert.success.strong a {
    color: #000080;
    text-shadow: 0 0 1px blue, 1px 1px rgba(255, 255, 255, 0.60);
}
.alert.success.strong mark {
    background-image: linear-gradient(to bottom, #0091a0, #009aa9, #00a4b3, #20aebd, #32b8c7);
}

.alert.warning.strong a {
    color: #685F00;
    text-shadow: 0 0 1px var(--alertWarningLink__color), 1px 1px rgba(255, 255, 0, 0.60);
}
.alert.warning.strong mark {
    background-image: linear-gradient(to top, #E6DE4A, #8A852C);
}

.alert.error.strong a {
    text-shadow: 0 0 1px #B30000, 1.5px 1.5px rgba(255, 255, 255, 0.22);
}
.alert.error.strong mark {
    background-image: linear-gradient(to bottom, #9f0000, #a50000, #ac0000, #b30000, #ba1005, #c11b0a, #c82410);
}
.alert.error.strong code {
    color: #564A26;
    text-shadow: 0.5px 0.5px rgba(255, 255, 255, 0.10);
    filter: brightness(80%);
}
/ php

Função para alertas com PHP

function alert($id, $type, $content, $setTime = 6000, $fadeTime = 2100, $redirect = '') {
    echo "<div id=\"$id\" class=\"alert $type strong\">$content</div>
    <script>";
    if( $setTime != false && $fadeTime != false && $redirect == '' ) {
        echo "window.setTimeout(function() {
            fade.out.selector('#$id', $fadeTime);
        }, $setTime)";
    }
    if( $setTime != false && $fadeTime == false && $redirect != '' ) {
        echo "window.setTimeout(function() {
            window.location='$redirect';
        }, $setTime)";
    }
    echo "</script>";
}

$id: identificador do elemento alert. obrigatório - Pode ser removido da função se for usar somente um alerta por pagina.

$type: Classes: success, warning ou error. Pode ser adicionado mais classes junto com uma dessas. Exemplo success discard. obrigatório

$content: Texto e/ou hipertexto. obrigatório

$setTime: Tempo em que o alerta ficará visível. opcional: int ou float com valores positivo ou false

$fadeTime: Tempo do efeito de desvanecimento. opcional: int ou float com valores positivo ou false

$redirect: URL opcional

Função sem parametro id

function alert($type, $content, $setTime = 6000, $fadeTime = 2100, $redirect = '') {
    echo "<div class=\"alert $type strong\">$content</div>
    <script>";
    if( $setTime != false && $fadeTime != false && $redirect == '' ) {
        echo "window.setTimeout(function() {
            fade.out.selector('.alert', $fadeTime);
        }, $setTime)";
    }
    if( $setTime != false && $fadeTime == false && $redirect != '' ) {
        echo "window.setTimeout(function() {
            window.location='$redirect';
        }, $setTime)";
    }
    echo "</script>";
}

Exemplos:

Aparece após o envio do formulário

<?php 
if( isset($_POST['alert-submit']) ) :
    alert(
        'alert',
        'success discard', 
        'Sunt eu assumenda! Eaque tempora tempus ipsa ipsam convallis molestias! Ducimus quis fugiat.',
        false,
        false
    );
endif;
?>
<form method="POST" action="#appear">
    <button type="submit" name="alert-submit" class="ws-btn">Enviar</button>
</form>

Aparece após o envio do formulário e desaparece gradualmente

<?php 
if( isset($_POST['alertime-submit']) ) :
    alert(
        'alertime',
        'error', 
        'Sunt eu assumenda! Eaque tempora tempus ipsa ipsam convallis molestias! Ducimus quis fugiat.',
        3000,
        1100
    );
endif;
?>
<form method="POST" action="#appear-disappear">
    <button type="submit" name="alertime-submit" class="ws-btn">Enviar</button>
</form>

Aparece após o envio do formulário e depois redireciona para outra página

<?php 
if( isset($_POST['alert-submit-redirect']) ) {
    alert(
        'alert_redirect',
        'warning', 
        'Sunt eu assumenda! Eaque tempora tempus ipsa ipsam convallis molestias! Ducimus quis fugiat.',
        2100,
        false,
        'https://packit.ui.webship.com.br/'
    );
}
?>

<form method="POST" action="https://packit.ui.webship.com.br/alerts/#">
    <button type="submit" name="alert-submit-redirect">Enviar</button>
</form>

Em alertas com redirecionamento o parametro $fadeTime precisa ser false

Aparece após o envio do formulário e depois redireciona para outra página com preloader

<?php 
if( isset($_POST['alert-submit-redirect-preloader']) ) {
    preloader(1900);
    alert(
        'alert_redirect',
        'warning', 
        'Sunt eu assumenda, Eaque tempora tempus ipsa ipsam convallis molestias. Ducimus quis fugiat.',
        4000,
        false,
        'https://packit.ui.webship.com.br/'
    );
}
?>

<form method="POST" action="https://packit.ui.webship.com.br/alerts/#">
    <button type="submit" name="alert-submit-redirect-preloader">Enviar</button>
</form>

Usando a função preloader juntos com alert, o parametro $time da função preloader precisa ter um valor menor que o parametro $setTime da função alert, caso queira que o alerta apareça antes do redirecionamento.