02-08-2016 Saat: 01:57
(02-08-2016 Saat: 01:14)#Captain Nickli Kullanıcıdan Alıntı:(02-08-2016 Saat: 01:12)Enes Bayraktar Nickli Kullanıcıdan Alıntı: Benimde bir eklemem olsun istedim
Renk uyumları ile ilgili siteler
Kod:http://www.colorhunt.co
Yeni dizayn trendleri için (Material ve İos)
Kod:http://www.materialup.com
Şimdi sizle bir duyuru pano'su yazalim
HTML Kodumuz
Kod:<div class="d10-overflow">
<div class="d10-ann"><i class="ion-ios-bell-outline"></i><label>Yönetimden Mesaj Var !</label> <a href="#" class="ann-collapset"><i class="ann-collapse ion-ios-arrow-down"></i></a>
</div>
<div class="d10-collapsed">
<ul>
<li>Sitemiz Açılmıştır !</li>
<li>Admin Alimi Vardır !</li>
<li>Üyelere Özel Kampanya Devam Ediyor 5 Tema Alana 10 Hediye !</li>
<li>Coder Aranır !</li>
</ul>
</div>
</div>
CSS Kodumuz
Kod:.d10-ann {height:45px; width:100%; background:#232323; color:#D8E6EC; display:inline-block; border-radius:3px; box-shadow: 0 1px 2px rgba(0,0,0,.1) !important; z-index:2; position:relative;}
.d10-ann i {font-size:1.2em; display:inline-block; margin-right:10px; margin-left:10px; color:#FFD833; padding:3px 7px; border:1.5px solid #FFD833; border-radius:2px; text-align:center; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); margin-top:7px;}
.d10-ann label {display:inline-block; font-family:"Raleway"; font-size:13.5px; color:#FFD833; position:relative; top:-1px;}
.d10-ann a.ann-collapset i.ann-collapse {cursor:pointer; border:0px; padding:0px; box-shadow:none; float:right; margin-top:13px; margin-right:15px; transition:0.5s ease all;}
.d10-ann a.ann-collapset:hover {transition:0.5s ease all; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}
.d10-collapsed {width:95%; margin:auto; background:#313337; height:auto; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); border-radius:3px; position:relative; top:-3px; z-index:1; transform:translateY(0px); -webkit-transform:translateY(0px); transition:0.5s ease all; -moz-transform:translateY(0px); max-height:200px; min-height:40px;}
.d10-collapse {transform:translateY(-100%) !important; -webkit-transform:translateY(-100%) !important; transition:0.5s ease all;}
.d10-overflow {height:auto; max-height:250px; min-height:100px; overflow:hidden;}
.ann-iconed {transform: rotate(180deg) !important; -webkit-transform: rotate(180deg); transition:0.5s ease all; margin-top:10px !important;}
.d10-collapsed ul {margin:0px; padding:0px;}
.d10-collapsed ul li {list-style:none; padding:10px 10px 7px 10px; color:#FFD833; font-family:"Raleway"; font-size:12px;}
Jquery Kodumuz
Kod:$(".ann-collapset").click(function(){
$(".d10-overflow").toggleClass("d10-annopen");
if($(".d10-overflow").hasClass("d10-annopen")) {
$(".ann-collapse").addClass("ann-iconed");
$(".ann-collapse").removeClass(".ann-collapse");
$(".d10-collapsed").addClass("d10-collapse");
}else {
$(".ann-collapse").removeClass("ann-iconed");
$(".d10-collapsed").removeClass("d10-collapse");
}
});
Headerinclude Edilecek'ler
Kod:<link rel="stylesheet" type="text/css" media="screen" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,300" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
@Hatake: Mete, bu kodlarıda güzel bir biçimde konuna eklersen bence gayet güzel bir konu olur.
Konu çok faydalı, teşekkürler.
@Enes Bayraktar @#Captain Teşekkürler beyler şimdi ekliyorum