Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Responsive Duyuru Panosu {HTML,CSS}
#1
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:
MkEjq6.png



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]
}
Ara
Cevapla
  


Hızlı Menü:


Şu anda bu konuyu okuyanlar:
1 Ziyaretçi


Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping