Müthiş Duyuru panosu konuya uç

[Muratbaykam]

Arkadaşlar ilk önce codepen'de geziniyordum bu güzel duyuru panosunu sizlerle paylaşmak istedim ...

Çok güzel kullanmanız için  ; ilk önce temalar & şablonlar > temanız > şablonlar > Anasayfa şablonları > index ;
{$header} kodunu buluyoruz altına bu kodu yapıştırıyoruz ;

Kod: Tümünü Seç Tümünü Kopyala

<style>
* {
 font-family: Roboto;
}

h2{
 font-weight: 100;
 font-size: 30pt;
 line-height: 1.3em;
 margin: 15px 0;
}

div.message {
 position: relative;
 padding: 10px;
 padding-left: 35px;
 margin: 30px 10px;
 box-shadow:0 2px 5px rgba(0,0,0,.3);
 background: #BBB;
 color: #FFF;
 
 -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
     -ms-transition: all .5s ease;
      -o-transition: all .5s ease;
         transition: all .5s ease;
}
div.message:hover{
 box-shadow: 0 15px 20px rgba(10,0,10,.3);
 -webkit-filter: brightness(110%);
}

div.message:before{
 content: '';
 font-family: FontAwesome;
 position: absolute;
 display: block;
 top: -21px;
 left: 50%;
 margin:0 -21px;
 font-size: 20px;
 line-height: 24px;
 text-align: center;
 width: 24px;
 padding:10px;
 background: inherit;
 box-shadow:0 5px 10px rgba(0,0,0,.25);
 color: rgba(255,255,255,.75);
 border-radius:50%;
 border: 2px solid transparent;
 z-index: 2;
}

div.message.information:before{content:'\f129';}
div.message.announcement:before{content:'\f0f3';}
div.message.success:before{content:'\f00c';}
div.message.warning:before{content:'\f12a';}
div.message.error:before{content:'\f00d';}

div.message.information{background: #39B;}
div.message.warning{background: #E74;}
div.message.success{background: #5A6;}
div.message.announcement{background: #EA0;}
div.message.error{background: #C43;}

</style>
<link href='http://fonts.googleapis.com/css?family=Roboto:300italic,400italic,400,100,300,600,700' rel='stylesheet' type='text/css'>
 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<div class="information message">
 <h2>Information</h2>
<p>This is an 'information message' div. It helps people get to know the site a little better. </p>
</div>
<div class="announcement message">
 <h2>Announcement</h2>
<p>This is an 'announcement message' div! It is loud and proud to say things that you want people to hear first!</p>
</div>
<div class="success message">
 <h2>Success</h2>
<p>This is a 'success message' div. It is shown if a goal is reached or something is accomplished.</p>
</div>
<div class="warning message">
 <h2>Warning</h2>
<p>This is a 'warning message' div. It warns the users that to expect some changes or limitations.</p>
</div>
<div class="error message">
 <h2>Error</h2>
<p>This is an 'error message' div. It stresses that there is an immediate problem. this should be used sparingly.</p>
</div>

Alıntıdır ... SS :

[Besico]

Çok büyük olmasaymış güzelmiş.