Baru-baru ini saya mendesain ulang situs blog saya sendiri dan memutuskan untuk menggunakan ikon gaya kalender untuk menampilkan waktu. Solusi sebelumnya umumnya menggunakan gambar latar belakang. Berkat CSS3, sekarang kami dapat mengimplementasikan fungsi -fungsi tersebut dengan menggunakan CSS3. Saya akan menggunakan beberapa properti seperti linear-gradient, radius perbatasan dan bayangan kotak untuk menggantikan desain photoshop sebelumnya.
Diagram Konsep PhotoshopBanyak desainer menggunakan metode desain langsung di browser, tetapi saya masih lebih suka metode membuat diagram konsep photoshop terlebih dahulu. Meskipun banyak efek dapat secara langsung diimplementasikan dengan CSS sekarang, cara merancang efek dengan Photoshop jauh lebih sederhana daripada cara terus -menerus mencoba memodifikasi CSS untuk akhirnya mencapai efek yang Anda inginkan.
Pertama -tama buat persegi panjang bulat dan atur jari -jari sudut bulat menjadi 10px. Setelah itu, kami akan menggunakan properti perbatasan-radius CSS.
Tambahkan gradien vertikal ke persegi panjang, warna gradien berasal dari #dad8d8 ke #fcfcfc.
Atur stroke 1 piksel, warnanya #e3e3e3
Akhirnya tambahkan efek bayangan ke bawah dengan transparansi 20%, jarak 0 piksel dan ukuran 15 piksel. Efek ini akan diimplementasikan dalam CSS menggunakan properti kotak-bayar.
Salin persegi panjang sekarang dan lepaskan bagian atas. Ubah gradien, warna dari #790909 ke #D40000, isi persegi panjang yang baru dibuat, yang akan menempatkan informasi bulan.
Atur bayangan dalam untuk mewakili perbatasan atas, warnanya #A13838, transparansi 100%, jarak 3px dan ukuran 0px.
Gunakan alat font Photoshop untuk mengatur efek font dari paruh pertama ikon kalender. Font adalah helvetica dan warnanya #9e9e9e.
Masukkan informasi bulan di bagian merah di bawah ini, atur font ke lebar dan warna menjadi putih.
Model Photoshop selesai. Di masa lalu, kami akan mengambil gambar sebagai latar belakang dan menulis angka HTML di atasnya, tetapi sekarang semua ini dapat dicapai dengan CSS.
Struktur HTML<Div class = Date>
<p> 25 <span> May </span> </p>
</div>
Kali ini, HTML Demo Icon sangat sederhana. Kami akan menggunakan div dengan 'tanggal' kelas sebagai wadah, dan kemudian menggunakan tag P untuk mewakili nomor tanggal. Hari dan bulan diwakili oleh berbagai ukuran dalam desain kami, jadi kami akan menggunakan tag <span> untuk memperlakukan elemen yang berbeda secara berbeda.
Gaya CSS.tanggal {
Lebar: 130px; Tinggi: 160px;
Latar Belakang: #FCFCFC;
Latar belakang: linear-gradient (atas, #fcfcfc 0%, #dad8d8 100%);
Latar belakang: -Moz-linear-gradient (atas, #fcfcfc 0%, #dad8d8 100%);
Latar belakang: -WebKit-linear-gradient (atas, #fcfcfc 0%, #dad8d8 100%);
}
Gaya CSS pertama kali menetapkan tinggi dan lebar seluruh wadah, dan efek gradien dapat dengan mudah dicapai melalui gradien CSS.
.tanggal {
Lebar: 130px; Tinggi: 160px;
Latar Belakang: #FCFCFC;
Latar belakang: linear-gradient (atas, #fcfcfc 0%, #dad8d8 100%);
Latar belakang: -Moz-linear-gradient (atas, #fcfcfc 0%, #dad8d8 100%);
Latar belakang: -WebKit-linear-gradient (atas, #fcfcfc 0%, #dad8d8 100%);
BORDER: 1PX SOLID #D2D2D2;
Border-Radius: 10px;
-Moz-border-Radius: 10px;
-webkit-border-radius: 10px;
}
Gunakan atribut perbatasan untuk mencapai efek perbatasan 1px di photoshop, dan kemudian gunakan perbatasan-radius untuk mencapai efek sudut bulat. Jangan lupa menambahkan -Moz- dan -webkit- awalan untuk memungkinkan kompatibilitas dengan browser yang lebih lama.
.tanggal {
Lebar: 130px; Tinggi: 160px;
Latar Belakang: #FCFCFC;
Latar belakang: linear-gradient (atas, #fcfcfc 0%, #dad8d8 100%);
Latar belakang: -Moz-linear-gradient (atas, #fcfcfc 0%, #dad8d8 100%);
Latar belakang: -WebKit-linear-gradient (atas, #fcfcfc 0%, #dad8d8 100%);
BORDER: 1PX SOLID #D2D2D2;
Border-Radius: 10px;
-Moz-border-Radius: 10px;
-webkit-border-radius: 10px;
kotak-shadow: 0px 0px 15px rgba (0,0,0,0.1);
-Moz-box-shadow: 0px 0px 15px rgba (0,0,0,0.1);
-webkit-box-shadow: 0px 0px 15px rgba (0,0,0,0.1);
}
Bagian terakhir dari kode ini adalah untuk mencapai efek bayangan yang lebih rendah dalam desain photoshop melalui shadow kotak. Tambahkan 0px offset horizontal dan vertikal untuk meningkatkan ambiguitas 15px. Gunakan RGBA untuk mengontrol transparansi. Dalam desain Photoshop, 105 digantikan oleh 0,1 di sini.
.date p {
Font-Family: Helvetica, Sans-Serif;
Ukuran font: 100px; Teks-Align: tengah; Warna: #9e9e9e;
}
Kami menggunakan t tag untuk mendefinisikan gaya untuk mendefinisikan gaya teks untuk tanggal. Font, ukuran teks, dan warna teks semuanya disalin dari Photoshop, dan Align teks diatur ke pusat. Tetapi gaya juga mempengaruhi teks bulan, dan kami akan menentukan gaya label rentang untuk itu secara terpisah.
.date p span {
Latar Belakang: #D10000;
Latar Belakang: Linear-Gradient (Top, #D10000 0%, #7A0909 100%);
Latar belakang: -Moz-linear-gradient (atas, #D10000 0%, #7A0909 100%);
Latar belakang: -WebKit-linear-gradient (atas, #D10000 0%, #7A0909 100%);
}
Implementasi bagian merah dicapai dengan mengatur atribut linier-gradien untuk latar belakang rentang, dan nilai merah juga berasal dari Photoshop.
.date p span {
Latar Belakang: #D10000;
Latar Belakang: Linear-Gradient (Top, #D10000 0%, #7A0909 100%);
Latar belakang: -Moz-linear-gradient (atas, #D10000 0%, #7A0909 100%);
Latar belakang: -WebKit-linear-gradient (atas, #D10000 0%, #7A0909 100%);
Ukuran font: 45px; font-weight: tebal; Warna: #FFFF; Teks-transform: huruf besar;
Tampilan: Blok;
}
Ubah gaya teks agar sesuai dengan desain, atur ukurannya menjadi 45px, atur ke font tebal, atur warna menjadi putih, dan gunakan transform teks untuk mengimplementasikan konversi modal. Atur tag rentang ke elemen blok sehingga akan cocok dengan ukuran wadah dan atur latar belakang merah.
.date p span {
Latar Belakang: #D10000;
Latar Belakang: Linear-Gradient (Top, #D10000 0%, #7A0909 100%);
Latar belakang: -Moz-linear-gradient (atas, #D10000 0%, #7A0909 100%);
Latar belakang: -WebKit-linear-gradient (atas, #D10000 0%, #7A0909 100%);
Ukuran font: 45px; font-weight: tebal; Warna: #FFFF; Teks-transform: huruf besar;
Tampilan: Blok;
Border-Top: 3px Solid #A13838;
Border-Radius: 0 0 10px 10px;
-Moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
Padding: 6px 0 6px 0;
}
Sisanya adalah menambahkan batas kepala, menggunakan gaya perbatasan-top untuk mengimplementasikannya, dan menggunakan atribut perbatasan-radius untuk mengimplementasikan dua sudut bulat di bagian bawah. Atribut bantalan kecil dapat membuat teks bulan memiliki jarak antara naik dan turun dan elemen lainnya.
Kompatibilitas browserMeskipun sifat CSS yang ditingkatkan dapat membantu kita mencapai efek gradien dan bayangan di Photoshop, kita masih harus menghadapi masalah yang harus dihadapi oleh desainer web di masa lalu, kompatibilitas browser.