10-11-2016, 05:56 AM
Merhabalar, duyuru panoları bir çoğumuzun ihtiyacıdır. Bu ihtiyaca çözüm olacak responsive duyuru panolarını 3 farklı stil ile birlikte paylaşımımızda bulabilirsiniz. İyi günlerde kullanın.
Win7 Stil
Önizleme:
Win7 Stil
Önizleme:
Kod:
<table class="sl_duyuru">
<tr>
<td class="sl_duyuru_ikon"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></td>
<td class="sl_duyuru_baslik"><b>Duyuru:</b></td>
<td>Webmaster Forumu açıldı! Yetkili başvurusu yapmak için <a href="">tıklayın.</a></td>
</tr>
</table>
<script src="https://use.fontawesome.com/02e491ef33.js"></script>Kod:
.sl_duyuru {
width: 100%;
font-family: 'Open Sans';
color: white;
background: rgb(2,119,189); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(2,119,189,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(2,119,189,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(2,119,189,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0277bd', endColorstr='#05abe0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
padding: 5px 10px;
border-radius: 2px;
border: 1px solid #01579B;
box-shadow: inset 0px 0px 1px #E0E0E0
;
}
.sl_duyuru a {
text-decoration: none;
background: #006064;
padding: 2px 5px;
border-radius: 2px;
color: white;
}
.sl_duyuru_ikon {
font-size: 30px;
width: 3%;
}
.sl_duyuru_baslik {
width: 7%;
text-transform: uppercase;
}
Kırmızı Stil
[color=#333333][font=Tahoma, Verdana, Arial, sans-serif][font=Trebuchet MS]Önizleme:[/font][/font][/color]
.sl_duyuru {
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] width: 100%;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] font-family: 'Open Sans';[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] color: white;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]background: rgb(183,28,28); /* Old browsers */[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]background: -moz-linear-gradient(45deg, rgba(183,28,28,1) 0%, rgba(242,84,84,1) 40%, rgba(244,67,54,1) 100%); /* FF3.6-15 */[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]background: -webkit-linear-gradient(45deg, rgba(183,28,28,1) 0%,rgba(242,84,84,1) 40%,rgba(244,67,54,1) 100%); /* Chrome10-25,Safari5.1-6 */[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]background: linear-gradient(45deg, rgba(183,28,28,1) 0%,rgba(242,84,84,1) 40%,rgba(244,67,54,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b71c1c', endColorstr='#f44336',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] padding: 5px 10px;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] border-radius: 2px;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] border: 1px solid #B71C1C;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] box-shadow: inset 0px 0px 1px #E0E0E0;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] [/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]}[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace].sl_duyuru a {[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] text-decoration: none;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] background: #5D4037[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace];[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] padding: 2px 5px;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] border-radius: 2px;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] color: white;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]}[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace].sl_duyuru_ikon {[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] font-size: 30px;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] width: 3%;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]}[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace].sl_duyuru_baslik {[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] width: 7%;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] text-transform: uppercase;[/font][/size][/color]
}
Siyah Stil
[color=#333333][size=small][font=Trebuchet MS][size=x-large][size=medium]Önizleme:[/size][/size][/font][/size][/color]
.sl_duyuru {
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]width: 100%;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]font-family: 'Open Sans';[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]color: white;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]background: rgb(15,4,2);[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]background: -moz-linear-gradient(45deg, rgba(15,4,2,1) 0%, rgba(124,122,122,1) 40%, rgba(58,56,49,1) 100%);[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]background: -webkit-linear-gradient(45deg, rgba(15,4,2,1) 0%,rgba(124,122,122,1) 40%,rgba(58,56,49,1) 100%);[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]background: linear-gradient(45deg, rgba(15,4,2,1) 0%,rgba(124,122,122,1) 40%,rgba(58,56,49,1) 100%);[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f0402', endColorstr='#3a3831',GradientType=1 );[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] padding: 5px 10px;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] border-radius: 2px;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] border: 1px solid black;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] box-shadow: inset 0px 0px 1px #E0E0E0;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] [/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]}[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace].sl_duyuru a {[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] text-decoration: none;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] background: #1B5E20;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] padding: 2px 5px;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] border-radius: 2px;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] color: white;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]}[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace].sl_duyuru_ikon {[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] font-size: 30px;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] width: 3%;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace]}[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace].sl_duyuru_baslik {[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] width: 7%;[/font][/size][/color]
[color=#333333][size=small][font=Monaco, Consolas, Courier, monospace] text-transform: uppercase;[/font][/size][/color]
}