html css trikovi kako da stilizujete alert panele


Besplatni online kurs web dizajna

Nastavna jedinica: Kako da stilizujete ALERT panele


Nazad


Kako da stilizujete ALERT panele


Veoma jednostavna stilzacija odredjenih klasa daje nekoliko rešenja kada želite da odredjene delove teksta unutar web stranice istaknete posebnih div tag-ovima (neki citat, deo teksta, informaciju itd). To su takozvani ALERT paneli odnosno Div tagovi odredjene pozadinske boje (u zavisnosti od vrste informacije) i malko deblje bordure na levoj strani. Klase imaju svoje nazive koji odredjuje osnovnu boju tako da div tag-u koji bi trebalo da ima odredjenu stilizaciju jednostavno mu se dodeli odredjena klasa. Svaki panel ima drugu boju sa ciljem da odredi vrstu informacije - Uspešno uradjen proces, Informacija, Upozorenje itd ...

Head


<style>
 .red {
 background-color: #ffdddd;
 border-left: 6px solid #f44336;
 margin-bottom: 15px;
 padding: 15px;
 }
 .green {
 background-color: #ddffdd;
 border-left: 6px solid #4CAF50;
 margin-bottom: 15px;
 padding: 15px;
 }
 .blue {
 background-color: #e7f3fe;
 border-left: 6px solid #2196F3;
 margin-bottom: 15px;
 padding: 15px;
 }
 .yellow {
 background-color: #ffffcc;
 border-left: 6px solid #ffeb3b;
 margin-bottom: 15px;
 padding: 15px;
 }
</style>
</style>

Body


<div class="red">
  <p> Ovde ide neki tekst ... Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ... </p>
</div>

<div class="green">
  <p><strong>Uspešno ste popunili prijavu !</strong> Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...</p>
</div>

<div class="blue">
  <p><strong>Važna informacija !</strong> Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...</p>
</div>

<div class="yellow">
  <p> Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...</p>
</div>

Prikaz u Browser-u


Ovde ide neki tekst ... Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...

Uspešno ste popunili prijavu ! Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...

Važna informacija ! Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...

Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...Ovde ide neki tekst ...

NOVO - DOPUNITE ZNANJE - WEB PROGRAMIRANJE (PHP, SQL)

Posle pređenih svih nastavnih jedinica u okviru Besplatne online obuke za web dizajn, obuku možete nadograditi odnosno dopuniti svoje znanje tako što će naučiti i web programiranje - PHP, SQL - izrada dinamičkih sajtova, online prodavnica. Kurs prati napisana skripta, izvorni kodovi i nekoliko desetina video nastavnih jedinica gde polaznik hronološki uči pisanje koda u PHP-u, testiranje skripti, korišćenje i rad sa Local serverom.

Cena obuke