Mengekspresikan TI

Lain tut cepat. Berikut ini adalah sesuatu yang sederhana dan bagus menggunakan POWER CSS ... tapi concieve sulit (dan itu pasti bukan saya) untuk memulai. Menambahkan Dropshadow, mungkin peice kue bagi banyak dari kita, menggunakan beberapa alat editing gambar seperti Photoshop anf Fireworks dll
Alasan mengapa, saya memilih untuk drop shadow menggunakan CSS adalah bahwa, biasanya saat membuat desain halaman / html dari aplikasi, persyaratan tetap iterasi. Yang saya maksud adalah, Dalam sebuah situs web yang ada dengan banyak gambar, seperti yang menampilkan daftar freinds atau galeri gambar, maka akan sulit untuk memproses ulang seluruh beban gambar yang telah sudah dibongkar untuk menambah atau menghapus bayang-bayang, untuk itu materi.
Jadi Jika Anda telah melakukan sedikit berpikir ke depan sekaligus menciptakan HTMLs untuk menambahkan divisi tambahan atau biasanya situasi ini adalah bahwa Anda memiliki Logika loop menghasilkan ikon ini / thumbnail di XSL, PHP. JAWA atau bahasa pemrograman / script lainnya, Anda dapat menambahkan kapan saja, maka hanya soal acara dan menyembunyikan bayang-bayang menggunakan properti Tampilan CSS, sesuai dengan klien yang terus berubah persyaratan ... aku havn't dilakukan semacam ini berpikir ke depan sebelum ini ... tapi ahev mulai sekarang!

Pada contoh di bawah, gambar asli adalah bayangan bebas dan dropshadows diterapkan sesuai kebutuhan! JUGA, saya telah sedikit tambahan, dengan menggunakan trik-trik Tut saya sebelumnya (Well! ini mungkin adalah berbagai terpendek Tutorial, sehingga hanya dibenarkan menyebut mereka "Tut" 's) tentang Properti Menggunakan Klip CSS untuk memamerkan hanya

Asli Gambar

CSS DropShadow Hasil

Lihat Demo | Unduh sourcefiles

Masukan stylesheet di Puncak

Jika Anda ingin halaman untuk memuat secara progresif; yaitu, kita menginginkan browser untuk menampilkan konten apapun itu secepat mungkin, menempatkan CSS di bagian atas halaman dalam HEAD dokumen. Hal ini membuat halaman muncul untuk memuat lebih cepat, karena hal ini memfasilitasi render progresif halaman. Hal ini sangat penting untuk halaman dengan banyak konten dan bagi pengguna koneksi internet lambat.

Ini adalah fakta yang terdokumentasi untuk meningkatkan pengalaman pengguna secara keseluruhan, penting untuk memberikan indikator kemajuan dan masukan visual. Untuk menghindari harus redraw elemen halaman, dalam kasus jika gaya perubahan mereka, beberapa browser, termasuk IE, blok rendering dari halaman sampai CSS diberi beban penuh. Karena itu, pengguna mendapat untuk melihat halaman putih kosong.

The W3 HTML Spesifikasi 'juga menyatakan bahwa CSS harus saya masukkan dalam bagian HEAD halaman HTML. at the bottom of the page, so it's best not to use it. Perlu diketahui juga bahwa, Dalam IE @import berperilaku sama dengan menggunakan <link> di bagian bawah halaman, jadi yang terbaik untuk tidak menggunakannya.

Hindari Menggunakan fitur Browser Tertentu

Filter: Gunakan filter meningkatkan konsumsi memori dan diterapkan secara per elemen, bukan per gambar, sehingga masalah dikalikan. Juga, Filter adalah IE Proprietary, maka tidak akan bekerja sebagaimana dimaksud pada browser lainnya. Jika Anda ingin latar belakang transparan atau gradien, gunakan 1Pixel dengan gambar.
Ekspresi: ekspresi CSS adalah fitur baik untuk memiliki dalam CSS, tapi masih adalah fitur spesifik IE. Juga, penting untuk dicatat bahwa, ungkapan-ungkapan yang dievaluasi saat halaman dirender dan diubah ukurannya, menggulir dan bahkan ketika pengguna bergerak mouse ke halaman. Tak perlu dikatakan ini dapat mempengaruhi kinerja dari halaman Anda. Oleh karena itu dalam kata-kata sederhana, Hindari menggunakan ekspresi CSS, kecuali jika Anda merasa kelebihan 'berat lebih dari kontra perusahaan

Externalise Anda CSS

Menggunakan CSS eksternal akan mengakibatkan loading lebih cepat dari halaman karena file-file JavaScript dan CSS cache oleh browser. Inline CSS pada dokumen HTML bisa didownload setiap kali dokumen HTML yang diminta. Ini sebenarnya bisa mengurangi jumlah permintaan HTTP yang dibuat tetapi kemudian meningkatkan ukuran dokumen HTML. Eksternal CSS cache oleh browser, ukuran dokumen HTML berkurang tanpa meningkatkan jumlah permintaan HTTP.

Harap dicatat bahwa, jika pengguna di situs Anda memiliki pandangan beberapa halaman per sesi dan banyak dari halaman Anda kembali menggunakan script yang sama dan stylesheet, ada potensi manfaat yang lebih besar dari file eksternal cache.

Pack Anda File CSS

Packing atau berderak CSS Anda adalah praktek menghapus karakter yang tidak perlu dari kode untuk mengurangi ukurannya dengan demikian meningkatkan beban kali.

CSS dapat saya berderak dengan menghapus semua komentar dan karakter yang tidak diinginkan seperti ruang putih, baris baru dll

Sebuah ulang CSS / adalah CSS untuk menetapkan sejumlah elemen gaya dengan baseline tertentu yang menciptakan konsistensi di berbagai browser.

Kita semua telah melalui mimpi buruk penulisan lintas-browser CSS. Jadi ketika kita mulai menulis CSS kita, Ini adalah praktek untuk me-reset terlebih dahulu untuk menghilangkan / reset inkonsistensi cross browser. Mereset CSS, adalah beberapa baris sederhana dari CSS yang Anda mulai CSS Anda dengan, memberikan Anda dasar bersih untuk mulai membangun kepada Anda.

Me-reset CSS yang biasa saya cenderung menggunakan terlihat seperti ini

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
daftar-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

Mengatur ulang ukuran font Browser
Perhatikan juga reset yang telah diterapkan untuk ukuran font browser pada baris berikut ...

html {font-size: 76%;}

CSS di atas me-reset font browser yang ukuran 10 pixel, dan ini memungkinkan untuk bekerja dengan ukuran font relatif (yang setiap penting dari kepatuhan WAI prespektif)
Untuk misalnya, dalam definisi berikut, font-size dalam rentang yang dibuat untuk 10 pixel dan bahwa dalam paragarph diatur ke 14 pixel ...

span {font-size: 1em;}
p {font-size: 1.4em;}

Misalnya.
Menentukan properti CSS seperti ini,

margin: 5px 0;

sebenarnya berarti,

margin: 5px 0px 5px 0px;

Bahwa properti marjin pertama berarti:

margin atas dan bawah = 5px | | margin kiri dan kanan = 0px

sehingga 'singkatan lagi' akan

margin: 5px 0px 5px 0px; (T, R, B, L)

Anda bahkan bisa menggunakan 3 nilai

margin: 5px 5px 0;

yang berarti

atas = 5px | | kanan dan kiri = 0px | | bawah = 5px

Internet Explorer secara otomatis menambahkan padding ke tombol dalam bentuk HTML.
Ruang ini membentang sesuai dengan panjang teks tombol.

Solusinya adalah menambahkan melimpah untuk gaya .... yaitu

. Tombol {
overflow: visible;
padding-left: 10px penting;
padding-right: 10px penting;
... Gaya lainnya untuk tombol ini ...
}

ATAU

< input type="submit" value="Internet explorer respects my padding" style="overflow:visible; padding-left:10px !important; padding-right:10px !important;" >;