Langsung ke konten utama

Pure CSS3 Info Box

css3 box info
CSS3 Box Info
Pada kesempatan kali ini saya akan membagikan sebuah snippet Pure CSS3 Info Box yang belakangan ini ada yang meminta, dan saya selaku admin blog ini ingin menyampaikan sesuatu :

"Mohon maaf belakangan ini, blog ini sudah jarang diupdate, dikarenakan kesibukan didunia nyata dan saya akan berencana mengganti layout blog ini sepenuhnya tidak akan lama lagi dikarenakan load yang terlalu lama dan saya akan menyatakan ini adalah postingan vakum saya"
Regards - Rizky

Oke, langsung saja ke cara pemasangannya:

HTML

<div class="alert alert-success alert-white rounded">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <div class="icon"><i class="fa fa-check"></i></div>
    <strong>Success!</strong> Changes has been saved successfully!
</div>
<div class="alert alert-info alert-white rounded">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <div class="icon"><i class="fa fa-info-circle"></i></div>
    <strong>Info!</strong> You have 3 new messages in your inbox.
</div>
<div class="alert alert-warning alert-white rounded">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <div class="icon"><i class="fa fa-warning"></i></div>
    <strong>Alert!</strong> Don't forget to save your data.
</div>
<div class="alert alert-danger alert-white rounded">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <div class="icon"><i class="fa fa-times-circle"></i></div>
    <strong>Error!</strong> The server is not responding, try again later.
</div>
.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    filter: alpha(opacity=20);
}

.close:hover,.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .5;
    filter: alpha(opacity=50);
}

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert h4 {
    margin-top: 0;
    color: inherit;
}

.alert .alert-link {
    font-weight: bold;
}

.alert>p,.alert>ul {
    margin-bottom: 0;
}

.alert>p+p {
    margin-top: 5px;
}

.alert-dismissable {
    padding-right: 35px;
}

.alert-dismissable .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
}

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}

.alert-success hr {
    border-top-color: #c9e2b3;
}

.alert-success .alert-link {
    color: #2b542c;
}

.alert-info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}

.alert-info hr {
    border-top-color: #a6e1ec;
}

.alert-info .alert-link {
    color: #245269;
}

.alert-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}

.alert-warning hr {
    border-top-color: #f7e1b5;
}

.alert-warning .alert-link {
    color: #66512c;
}

.alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

.alert-danger hr {
    border-top-color: #e4b9c0;
}

.alert-danger .alert-link {
    color: #843534;
}

.alert {
    border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.11);
}

.alert .sign {
    font-size: 20px;
    vertical-align: middle;
    margin-right: 5px;
    text-align: center;
    width: 25px;
    display: inline-block;
}

.alert-success {
    background-color: #dbf6d3;
    border-color: #aed4a5;
    color: #569745;
}

.alert-info {
    background-color: #d9edf7;
    border-color: #98cce6;
    color: #3a87ad;
}

.alert-warning {
    background-color: #fcf8e3;
    border-color: #f1daab;
    color: #c09853;
}

.alert-danger {
    background-color: #f2dede;
    border-color: #e0b1b8;
    color: #b94a48;
}

.alert-white {
    background-image: linear-gradient(to bottom,#FFFFFF,#F9F9F9);
    border-top-color: #d8d8d8;
    border-bottom-color: #bdbdbd;
    border-left-color: #cacaca;
    border-right-color: #cacaca;
    color: #404040;
    padding-left: 61px;
    position: relative;
}

.alert-white .icon {
    text-align: center;
    width: 45px;
    height: 100%;
    position: absolute;
    top: -1px;
    left: -1px;
    border: 1px solid #bdbdbd;
}

.alert-white .icon:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    border: 1px solid #bdbdbd;
    position: absolute;
    border-left: 0;
    border-bottom: 0;
    top: 50%;
    right: -6px;
    margin-top: -5px;
    background: #fff;
}

.alert-white.rounded {
    border-radius: 3px;
    -webkit-border-radius: 3px;
}

.alert-white.rounded .icon {
    border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
}

.alert-white .icon i {
    font-size: 20px;
    color: #FFF;
    left: 12px;
    margin-top: -10px;
    position: absolute;
    top: 50%;
}

.alert-white.alert-danger .icon,.alert-white.alert-danger .icon:after {
    border-color: #ca452e;
    background: #da4932;
}

.alert-white.alert-info .icon,.alert-white.alert-info .icon:after {
    border-color: #3a8ace;
    background: #4d90fd;
}

.alert-white.alert-warning .icon,.alert-white.alert-warning .icon:after {
    border-color: #d68000;
    background: #fc9700;
}

.alert-white.alert-success .icon,.alert-white.alert-success .icon:after {
    border-color: #54a754;
    background: #60c060;
}

Sekian tentang bagaimana cara pemasangan Pure CSS3 Info Box ini, semoga bermanfaat.

Komentar

  1. Makasih Mas atas tutorialnya :D

    BalasHapus
  2. Terima kasih atas tutorial nya mas..
    keren banget :-d

    BalasHapus
  3. wah keren2 tutorialnya.. :D
    ditunggu follow back nya ya gan..
    http://semua-tinggal-download.blogspot.com/

    BalasHapus
  4. emang paling suka banget nih sama css pseudo, bikin desain apa aja jadi menarik .. :D di tambah designer nya jenius.. cocok banget tuh! hehe

    btw blog nya kembali normal, ada apa dengan kemaren2 sob?

    BalasHapus
    Balasan
    1. kemarin vakum karena blog ane rusak sob :)

      Hapus
  5. Your share buttons are nice. A post about them.

    BalasHapus
  6. linear gradient ga diprefix tuh om

    BalasHapus
  7. We are sorry lately, this blog is rarely updated, due to busy in the real world and I will plan to change the layout of this blog will no longer fully load due to too long and I would argue this is my vacuum post

    - B)

    BalasHapus
    Balasan
    1. selamat datang kembali ke dasbor blogger haha

      Hapus
  8. bisa dijadikan inspirasi mas :)

    BalasHapus

Posting Komentar

Blog ini tidak menerima komentar via OpenID atau Anonim.
Link aktif akan secara otomatis terhapus oleh sistem.
Untuk memasukkan link dengan aman, gunakan kode [url=http://sites.com]Teks Link[/url]
Untuk memasukkan kode, gunakan kode <i rel="code">Kode Kamu</i>
Untuk memasukkan kode yang panjang, gunakan kode <i rel="pre">Kode Panjang Kamu</i>
Untuk menyisipkan gambar, gunakan kode [img]Url Gambar[/img]
Untuk memasukkan title, gunakan kode <b rel="h4">Title kamu ...</b>
Untuk memberikan efek huruf tebal pada teks, gunakan kode <strong>Teks Kamu ...</strong>
Untuk memberikan efek huruf miring pada teks, gunakan kode <em>Teks Kamu ...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

Emotikon
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*

Postingan populer dari blog ini

Contenteditable Alternatif Elemen Input pada HTML

Contenteditable Alternatif Elemen Input pada HTML Pada kali ini Males code akan menjelaskan tentang Contenteditable Alternatif Elemen Input pada HTML. Dimana penggunakan tag contenteditable='' ini dapat membuat elemen yang kita inginkan dapat kita ubah kontennya seperti teks layaknya elemen input yang biasa kita lihat.
Pada tag contenteditable='true|false' ini terdapat 2 value, yaitu true untuk membuat fungsi ini berjalan & sedangkan false sebaliknya.
Penggunaannya cukup mudah, hanya cukup menambahkan tag contenteditable='true|false' pada elemen yang kita inginkan.

Contoh contenteditable pada elemen paragraf
<p contenteditable="true|false">Ini adalah elemen paragraf yang bisa diedit.</p>Ketika attribut contenteditable='true|false' tidak diatur pada elemen, maka elemen akan mewarisi style/gaya dari elemen induknya. Lalu bagaimana dengan Placeholder?? Seperti yang kita ketahui juga, bahwa tag placeholder='' ini hanya bekerj…

TypoTerapi Blogger Template

Pada kesempatan kali ini, Males Code mau membagikan sebuah project yang sebenarnya sudah lama selesai dikerjakan dalam 2 hari, namun kali ini kesempatannya kesampaian.

Sebuah Template Sederhana yang saya bilang cukup menarik dikarena memiliki fitur:
AMP (Memungkinkan Load di Mobile Lebih Cepat)Mobile FriendlyFast LoadInshaallah Full SEO ^_^Free
Live Demo | [Link Download Segera Menyusul Sesuai Permintaan ^_^]
Jika kamu berkenaan untuk menyumbangkan sumbangsinya sebagai bentuk upaya terima kasih. Kamu bisa lakukan pembayaran Via Pulsa ke sini: 082277107703
Sekian, jika ada pertanyaan dalam penggunaan template, silahkan gunakan form komentar dibawah, teirma kasih ^_^

CSS Box Shadow - Membuat Bayangan Pada Elemen Tertentu

Css Box Shadow adalah salah satu property dari css3 yang berfungsi untuk memberikan efek bayangan pada elemen tertentu pada sebuah web.

Nilai Properti *nilai negatif pada value diizinkan
NilaiDeskripsiNoneNilai awal, tidak ada bayangan yang ditampilkanh-shadowPenting, Berfungsi untuk mengatur bayangan secara horizontal*v-shadowPenting, Berfungsi untuk mengatur bayangan secara vertikal*blurOpsional, untuk mengatur jarak blurspreadOpsional, untuk mengatur ukuran bayangancolorOpsional, untuk mengatur warna bayanganinsetOpsional, untuk membuat bayangan berada didalam elemeninitialSet, untuk membuat setingan secara standarinheritSet, untuk membuat bayangan sama seperti elemen pertama berikut ini adalah contoh dasar penggunaan CSS Box Shadow pada elemen:
Bayangan Diluardiv { -webkit-box-shadow:15px 10px 8px #666; /* Khusus untuk Safari & Chrome */ -moz-box-shadow:15px 10px 8px #666; /* Khusus untuk Firefox */ box-shadow:15px 10px 8px #666; /* Standar W3C */ } Bayangan …