CSS3: Membuat Spanduk Situs Web

Terinspirasi oleh Photoshop brushes Tamsin Baker yang indah "Urban Scrawl" 1 dan 2, saya mencoba untuk membuat beberapa spanduk gelap menggunakan beberapa properti CSS3. Kunjungi situs Tamsin dan periksa semua karya seni inspirasinya termasuk kuas Photoshop gratis: http://www.tamsinbaker.com/ Ini adalah hasil percobaan saya dengan beberapa contoh spanduk (klik pada gambar [...]

Dari sponsor bulanan kami: HelloSign API: Semua yang diinginkan dan disukai pengembang. Coba gratis hari ini.

Terinspirasi oleh Photoshop brushes Tamsin Baker yang indah "Urban Scrawl" 1 dan 2, saya mencoba untuk membuat beberapa spanduk gelap menggunakan beberapa properti CSS3. Kunjungi situs Tamsin dan periksa semua karya seni inspiratifnya termasuk kuas Photoshop gratis: http://www.tamsinbaker.com/

Ini adalah hasil percobaan saya dengan beberapa contoh spanduk (klik pada gambar untuk melihat halaman demo):

Klik pada gambar ini untuk melihat demo

Anda dapat mengunduh file ZIP dengan semua gambar di sini: CSS3 Banners ZIP

Gagasan utamanya adalah membuat gambar menggunakan kuas Photoshop Urban Scrawl dan meletakkannya sebagai logo spanduk.

CSS dibangun seperti ini:

h1 {
 padding-top : 10px ;
ukuran font : 36px ;
padding : 0px ;
margin : 0px ;
garis-tinggi : 100px ;
text-shadow : 0 - 1px  1px  rgba (0,0,0,0.25);
lebar : 310px ;
mengapung : kiri;
}
.slogan {
 float : right;
margin : 75px  20px  0px  0px ;
ukuran font : 20px ;
}

Di sini kita mendefinisikan judul dan slogan spanduk. Di kelas berikutnya kita mendefinisikan tata letak spanduk umum:

.banner {
 width : 620px ;
tinggi : 100px ;
margin : 7px otomatis;
-moz-box-shadow : 0  1px  3px  rgba (0,0,0,0.5);
-webkit-box-shadow : 0  1px  3px  rgba (0,0,0,0.5);
-moz-border-radius : 15px ;
-webkit-border-radius : 15px ;
padding-left : 190px ;
}

Dan sekarang, kita mendefinisikan masing-masing spanduk individual, dengan mengubah gambar latar belakang, yang merupakan logo, warna font dan keluarga font:

.banner0 {
 background : # 656964  url (banner0.png) tidak ada pengulangan di kiri;
}
.banner1 {
 color : # 37535B ;
latar belakang : # 31B3DA  url (banner1.png) tidak ada pusat berulang yang tersisa;
font-family : "Arial Narrow" ;
}
.banner2 {
 color : # 656A64 ;
latar belakang : # 81C573  url (banner2.png) tidak ada pengulangan di sebelah kiri;
font-family : "Palatino Linotype" ;
}
.banner3 {
 color : # 37535B ;
latar belakang : # 656964  url (banner3.png) tidak ada pusat pengulangan yang tersisa;
font-family : "Arial Narrow" ;
}
.banner4 {
 color : # 2B8EAC ;
latar belakang : # 656964  url (banner4.png) tidak ada pusat pengulangan yang tersisa;
font-family : "Century Gothic" ;
}
.banner5 {
 color : # 37535B ;
latar belakang : # C6CC10  url (banner5.png) tidak ada pengulangan di tengah;
font-family : "Trebuchet MS" ;
}
.banner6 {
 color : # 37535B ;
latar belakang : # b8d8fb  url (banner6.png) tidak ada pusat berulang yang tersisa;
font-family : "Arial Narrow" ;
text-transform : huruf besar;
spasi huruf : 4px ;
}
.banner7 {
 color : # 6e9cf9 ;
latar belakang : # a08c60  url (banner7.png) tidak ada pusat berulang yang tersisa;
font-family : "Arial Narrow" ;
font-style : italic;
}

Html terlihat seperti ini:

 < div  class = "banner banner0" > </ div > 
 < div  class = "banner banner3" > </ div > 
 < div  class = "banner banner1" > 
  < h1 > Kota Manis </ h1 > 
  slogan < div  class = " " > ada banyak hal yang dapat ditemukan di kota Anda </ div > 
 </ div > 
 <div  class = "banner banner2" >
  < h1 > Mobil </ h1 > 
  < div  class = "slogan" > Klub penggemar sejati </ div > 
 </ div > 
 < div  class = "banner banner4" > 
  < h1 > Arrow Shmallow </ h1 > 
  < div  class = "slogan" > Layanan Terbaik </ div > 
 </ div > 
 <div  class = "banner banner5"> 
  < h1 > Header Radio </ h1 > 
  < div  class = "slogan" > Dengarkan musiknya! </ div > 
 </ div > 
 < div  class = "banner banner6" > 
  < h1 > Energizer </ h1 > 
  < div  class = "slogan" > Kekuatan yang Lebih Cerdas </ div > 
 </ div > 
 < "banner banner7" > 
  < h1 > Brickyton </ h1 > 
  < div  class = "slogan" > Kami membangun semuanya </ div > 
 </ div >

Dua spanduk pertama adalah gambar yang lengkap, tetapi karena kami menerapkan gaya umum .banner padanya, kami mendapatkan batas yang bulat dan gelap.

Kami menerapkan kedua kelas, .banner dan .bannerN untuk setiap elemen. Ini akan menerapkan gaya umum dan gaya individu ke elemen. Perlu diingat, bahwa kita dapat mengontrol properti mana yang akan ditimpa dengan mendefinisikan urutan aplikasi kelas. Segala sesuatu yang kita definisikan di kelas individual .bannerN akan menggantikan properti (jika ada) dari kelas .banner.

Ini lagi tautan demo: DEMO

Dan juga ZIP: CSS3 Banners ZIP

Situs web Tamsin Baker: http://www.tamsinbaker.com/

Terima kasih, Tamsin, dan selamat menikmati!

Perbarui Catatan: Ada beberapa masalah dengan browser yang lebih lama dan, tentu saja, Internet Explorer, karena kedalaman warna. Untuk menghindari masalah memiliki gambar dalam warna yang sedikit berbeda dari warna latar belakang spanduk, Anda harus menggunakan warna web saat membuat spanduk seperti ini ...