Jak stworzyć powiadomienia na stronę

W dzisiejszym wpisie pokażę wam jak w prosty sposób można stworzyć efektowne powiadomienia na swoją stronę internetową. Do stworzenia widżetu będziemy potrzebować Bootstrapa w wersji co najmniej 3.0.




Bootstrap jest to darmowy framework CSS, który ułatwia nam prace dzięki gotowym rozwiązaniom bez zbędnego dopisywania podstawowych stylów do przycisków itp.. Adres do pobrania znajdziecie pod tym linkiem Pobierz Bootstrap
Zacznijmy od stworzenia plików index.html, oraz style.css

Poniższy kod umieść w index.html, omawiany framework jest w głównej mierze oparty na kafelkach, stąd musimy zacząć od kontenera, a następnie za zdefiniowanie szerokości powiadomienia- w tym przypadku wynosi on "12" czyli najwięcej. Trzecia linijka odpowiada za główną budowę powiadomienia, row za wyrównanie, natomiast liczba "9" wraz z "note-content" jest środkiem. Kolejne wiersze, czyli title to nagłówek, znacznik <p></p> odpowiada za treść, a "btn" jest to nic innego niż przycisk. Proste, prawda?

<div class="container">
            <div class="col-sm-12">
                <div class="notification note-default">
                    <div class="row">
                        <div class="col-md-9 note-content">
                            <h1 class="note-title">Tutaj nagłówek powiadomienia</h1>
                                <p>Tutaj opis powiadomienia</p>
                        </div>
                        <div class="col-md-3 note-btn">
                            <a href="#" class="btn btn-lg btn-block btn-primary">Kliknij tutaj</a>
                        </div>
                     </div>
                </div>
                <div class="notification note-second">
                    <div class="row">
                        <div class="col-md-9 note-content">
                            <h1 class="note-title">Tutaj nagłówek powiadomienia</h1>
                                <p>Tutaj opis powiadomienia</p>
                        </div>
                        <div class="col-md-3 note-btn">
                           <a href="#" class="btn btn-lg btn-block btn-success">Kliknij tutaj</a>
                        </div>
                     </div>
                </div>
                <div class="notification note-third">
                    <div class="row">
                        <div class="col-md-9 note-content">
                            <h1 class="note-title">Tutaj nagłówek powiadomienia</h1>
                                <p>Tutaj opis powiadomienia</p>
                        </div>
                        <div class="col-md-3 note-btn">
                            <a href="#" class="btn btn-lg btn-block btn-warning">Kliknij tutaj</a>
                        </div>
                     </div>
                </div>
         </div>
    </div>

Następnie do pliku style.css wlepiamy poniższy kod by zdefiniować styl. Z racji, że posiadamy gotowe przyciski od frameworka, wykorzystamy trzy rodzaje przycisków.

Pierwsze powiadomienie jest w kolorze jasno-niebieskim (#0EB5FF), przycisk posiada nazwę "primary".

Kolejne jest w kolorze zielonym (#0EB581), wraz z przyciskiem "success".





Trzeci natomiast w pomarańczowym (#C87A07), nazwa przycisku to "warning".

.notification{
    position: relative;
    width:auto;
    padding: 15px 25px;
}
        .notification  .row {
            float:none;
            vertical-align:middle;
        }

            .note-content{
                padding-top: 10px;
                padding-bottom: 10px;
            }
                .note-title{
                    margin: 0 auto 15px;
                    padding: 0;
                }

.notification.note-first{
    color: white;
    background-color: #0EB5FF;
    border:0px;
}


.notification.note-second{
    color: white;
    background-color: #0EB581;
    border:0px;
}
.notification.note-third{
    color: white;
    background-color: #C87A07;
    border:0px;
}

Żeby stworzyć kolejne przyciski powielamy kod zmieniając w arkuszu stylów (CSS) nazwę diva.W miejsce "background-color:#0EB5FF;" wklejamy dowolny kolor, który ma odpowiadać za tło powiadomień. Obecnie korzystam z narzędzia Adobe Kuler, który dobiera schematy kolorów co jest naprawdę przydatne przy tworzeniu większych projektów.

Właściwie to wszystko co potrzebujemy by stworzyć swoje powiadomienia. Jeżeli nie miałeś styczności z kodem HTML, CSS, lub po prostu nie czujesz się w nim pewnie poniżej znajdziesz linki z ciekawymi kursami, które są lepsze niż nie jeden podręcznik.
Kursy HTML:
http://www.kurshtml.edu.pl/
http://how2html.pl/
http://www.poradnik-webmastera.com/kursy/html/
Kursy CSS:
http://webkod.pl/kurs-css/lekcje/dzial-1/css-co-to-takiego
http://miroslawzelent.pl/kurs-css/
http://webmade.org/kursy-online/kurs-css.php