45 Powerful CSS / JavaScript-Teknik

width = "650">
width = "650">
Smashing-majalah-iklan di 45 Powerfull CSS / JavaScript-Teknik /> 45 Powerfull CSS / JavaScript-Teknik 45 Powerfull CSS / JavaScript-Teknik 45 Powerfull CSS / JavaScript-Teknik

Spacer di 45 Powerfull CSS / JavaScript-Teknik

CSS dan JavaScript alat sangat kuat untuk perancang dan pengembang. Namun, kadang-kadang sulit untuk muncul dengan satu ide bagus yang akan memecahkan masalah yang anda hadapi sekarang. Berita bagus: hampir setiap hari para desainer dan pengembang datang dengan segar dan cerdas CSS trik dan teknik dan membaginya dengan pengembang lain secara online. Kami secara teratur mengumpulkan semua trik ini, filter mereka, seperti mereka, merevisi mereka dan mempersiapkan mereka untuk Smashing Magazine pembaca.

Dalam posting ini kami menyajikan 45 berguna CSS / JavaScript-teknik yang dapat membantu Anda menemukan solusi cerdas untuk beberapa masalah Anda atau hanya mendapatkan terinspirasi oleh apa yang mungkin dengan CSS. Kami menutup CSS-teknik yang menarik, navigasi menu, CSS tipografi, CSS tombol daftar dan CSS. Fokus posting ini terletak pada CSS; silahkan melihat bahwa sebagian dari teknik menggunakan JavaScript atau PHP untuk meningkatkan fungsionalitas.

Perlu diketahui bahwa ini adalah bagian pertama kita bulat besar-up segar CSS / JavaScript-teknik. Teknik lain (CSS tabel, CSS layout, CSS untuk Mobile dan CSS formulir) akan ditampilkan dalam artikel mendatang. Jadi jangan lupa untuk berlangganan RSS-feed dan mengikuti kami di kericau untuk artikel serupa dan aliran sumber daya bermanfaat. Harap juga biarkan kami tahu apa yang harus kita mengubah atau memperbaiki di masa depan kita posting!

Kami sadar bahwa banyak pembaca yang bosan dengan "daftar" melayang-layang di Web, tapi kami yakin bahwa sebagian besar pengunjung kami akan mendapatkan keuntungan dari format posting ini dan akan menemukan setidaknya beberapa teknik yang ditampilkan dalam posting ini berguna.

CSS menarik Teknik

Membangun Visual Baru Annotations /> Lapisan catatan ini terdiri dari dua elemen utama, sebuah tampilan dengan bersinar dan perbatasan dengan transparansi. Yang sangat menarik, namun teknik sederhana oleh Badan ZURB Design, desainer yang telah menulis serangkaian artikel di Smashing Magazine juga.

Penjelasan di 45 Powerfull CSS / JavaScript-Teknik

Sexy Musik Album Overlay /> Ini menunjukkan bagaimana aticle gaya aliran musik Anda dan memberi Anda beberapa grafis untuk melakukannya.

Css-112 di 45 Powerfull CSS / JavaScript-Teknik

A Colorful Jam Dengan CSS & jQuery /> Tutorial ini menjelaskan bagaimana seseorang dapat menciptakan sebuah jam dengan menggunakan CSS dasar dan JavaScript.

Css-086 di 45 Powerfull CSS / JavaScript-Teknik

Cara Buat Nice 3D Depth Dan Ribbons Hanya Menggunakan CSS3 /> Kita akan menggunakan kotak-bayangan untuk membuat drop-shadow dengan RGBa, model warna yang memungkinkan kontras yang optimal dengan apapun latar belakang. RGBa adalah standar model RGB (0,0,0 - 255.255.255) dan menambahkan opsi terakhir (a) untuk opacity. Kita dapat menggunakan model ini juga untuk properti lainnya dan bekerja dengan browser yang baru.

Css-197 di 45 Powerfull CSS / JavaScript-Teknik

Advanced Event Timeline Dengan PHP, CSS & jQuery /> Ini Advanced Acara Timeline digunakan dengan bantuan PHP, MySQL, CSS dan jQuery. Hasilnya: waktu yang baik sesuai dengan peristiwa diklik. Menambahkan baru akan menjadi semudah menyisipkan baris dalam database.

Css-195 di 45 Powerfull CSS / JavaScript-Teknik

CSS Navigation Menus

CSS 3D Meninas /> "Aku sudah mengambil cat klasik The Maids of Honour (Las Meninas) dan menciptakan sebuah CSS pseudo-3D / efek Paralaks. Ini adalah murni CSS, bukan JavaScript atau Flash yang terlibat. Telah diuji dan bekerja pada Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 dan Konqueror 3.5, dan memvalidasi juga.

Css-006 di 45 Powerfull CSS / JavaScript-Teknik

Sproing! - Membuat Sebuah Miniatur elastis Menu /> "Dalam upaya berkelanjutan untuk menawarkan metode alternatif untuk merapikan menu, aku bersama pieced menu thumbnail yang elastis. Itu memperbesar item menu ketika mereka melayang di atas dan memperluas item menu ke atas.

Css-063 di 45 Powerfull CSS / JavaScript-Teknik

Cara Sederhana dan Efektif Buat Sub Navs dengan Daftar Definisi /> "Ketika kita perlu sederhana dan efektif pada halaman navigasi, untuk baik melompat ke konten pada halaman atau flip pandangan lain, kita menggunakan elemen dl. Sub unsur, dt dan dd, membuatnya sangat mudah bagi kita untuk membuat link inline dengan label yang jelas. Di sini kita akan berbagi dengan Anda yang cepat, ringan metode untuk bagaimana kita akan menggunakan CSS untuk melakukannya. "

Css-072 di 45 Powerfull CSS / JavaScript-Teknik

SideNav lengket Layout dengan CSS /> Pelajari cara membuat layout sidenav tetap untuk blog Anda atau website. Memiliki datang sidenav tetap berguna ketika berurusan dengan blog gaya website dimana konten sangat tinggi dan ada kebutuhan baik jumlah bergulir. Navigasi tetap memungkinkan pengguna untuk pelayaran melalui konten tanpa bergulir kembali ke atas untuk menavigasi melalui situs lain.

Css-056 di 45 Powerfull CSS / JavaScript-Teknik

Mengganggu Dropdown Page Changer /> Menggunakan <select> menu dropdown untuk membuat navigasi tidak yang biasa seperti dulu, tapi masih ada. Itu bisa robek pada cukup baik untuk menjadi tidak dapat diakses / menonjol. Memang banyak script Anda akan menemukan di sana untuk membuat menu seperti ini adalah dengan cara ini. Nyebelin. Mari kita membuat satu yang bekerja dengan atau tanpa JavaScript.

Css-015 di 45 Powerfull CSS / JavaScript-Teknik

CSS Navigation: Tidak JavaScript, jQuery atau Image Required, Free CSS Navigation / Pagination dengan Tooltip /> CSS navigasi berbasis / pagination bar tanpa JavaScript. Ada tooltip pada melayang-layang untuk 'sebelumnya' dan 'next' halaman peluru yang membuat navigasi lebih mudah.

Css-170 di 45 Powerfull CSS / JavaScript-Teknik

Bagaimana Kode yang Tumpang Tindih Tabbed Menu Utama /> Main menu navigasi adalah bagian dari desain website yang membuat seluruh situs tampak meriah dan lengkap. Tapi yang paling umum jenis menu navigasi gaya masih digunakan banyak adalah tab menu navigasi. Berikut adalah tutorial tentang bagaimana kode menu tab yang tumpang tindih.

Css-187 di 45 Powerfull CSS / JavaScript-Teknik

Solusi Untuk Very Long Dropdown Menus /> "Aku ingin menjadi percaya diri dengan judul posting, tapi kenyataan dalam kasus ini adalah solusi yang mungkin untuk dropdown yang sangat panjang. Masalah dengan dropdown panjang adalah bahwa dropdown itu sendiri dapat pergi di bawah "flip" dari situs web. Yaitu, di bawah area terlihat jendela browser. Jadi agar dapat mengakses item menu tersebut di bawah, Anda perlu melakukan scroll jendela browser Anda. Bagi kita dengan roda gulir semacam tikus kami (mouse?), Itu bukan masalah besar. Bagi mereka yang tidak, mereka item menu rendah sama sekali tidak dapat diakses, karena untuk menggunakan browser scrollbar berarti mousing dari menu (dan mungkin karena dekat). "

Css-052 di 45 Powerfull CSS / JavaScript-Teknik

Drop Down Menu mega w / CSS & jQuery /> Bila digunakan dengan benar, mega drop down bisa sangat efisien untuk skala besar website. Mari kita bereksperimen dengan cara yang berbeda untuk menerapkan teknik ini. Sebuah tutorial oleh Soh Tanaka, Smashing Magazine penulis biasa.

Css-053 di 45 Powerfull CSS / JavaScript-Teknik

CSS Tipografi dan Tubuh Salin

Cara Membuat Teks Efek Anaglyphic Best dengan CSS /> Anaglyphs adalah orang-orang luar biasa gambar 3D yang diciptakan oleh offsetting dua dari merah, hijau dan biru saluran, dan kutu buku yang dilihat dengan kacamata 3D mencari dengan lensa berwarna yang berbeda. Aku tidak tahu apakah efek ini bekerja secara nyata, seperti yang telah saya sayangnya salah tempat spesifikasi 3D saya, tetapi itu adalah efek teks keren toh! Mari kita lihat bagaimana gaya yang serupa dapat dibuat untuk sprucing desain web Anda, sementara mempertimbangkan semantik dan menghindari pengulangan dari setiap markup.

Css-193 di 45 Powerfull CSS / JavaScript-Teknik

Tipografi bekerja perencana /> Masukkan ini, sedikit HTML / CSS kerja tipografi perencana. Dengan menggunakan beberapa super-semantik HTML dan sedikit dari CSS Anda dapat mencari kerajinan yang indah namun bekerja perencana sangat sederhana untuk Anda dan staf Anda.

Css-199 di 45 Powerfull CSS / JavaScript-Teknik

Menipis Teks dalam WebKit (Safari) /> Safari memiliki tidak-begitu-cara yang sangat indah dari Bulking atas teks menggunakan sub-pixel rendering. Pada versi sebelumnya Safari, ini tetap dengan teks-bayangan deklarasi, tetapi karena metode Macan Tutul Salju tidak lagi bekerja. Untungnya, ada alternatif.

Css-196 di 45 Powerfull CSS / JavaScript-Teknik

Pseudo Drop Caps /> Mereka sudah sekitar untuk sementara waktu sekarang, muncul di majalah, mencetak dan sekarang web. Desainer dan pengembang sama-sama telah bereksperimen dengan beberapa workarounds dari menggunakan gaya sejajar untuk menggunakan penggantian gambar namun dengan kedua solusi ini ada masalah. Sebagai contoh, apa yang terjadi ketika Anda membuat ulang situs Anda dan memutuskan bahwa Anda tidak lagi ingin meng-upload gambar topi drop, sekarang Anda akan meninggalkan gambar yang patah pada awal setiap posting yang Anda buat sebelumnya, hal ini jelas dengan asumsi Anda belum pernah menggunakan text-indent. Jika Anda memutuskan untuk turun di gaya inline rute maka hanya buruk, hanya sangat buruk.

Css-081 di 45 Powerfull CSS / JavaScript-Teknik

Cara Membuat Sempurna Pra Tag /> Jika Anda menjalankan situs yang menampilkan banyak kode contoh, Anda tahu betapa pentingnya meluangkan waktu yang berkualitas yang &tl; styling pre> elemen. Ketika meninggalkan unstyled, liar tag <pre> sudah terformat, Anda akan mangle konten dan menghancurkan tata letak situs Anda. Browser yang berbeda memperlakukan tag <pre> cukup berbeda, bervariasi sangat dalam penanganan default font-ukuran, scrollbar-rendering, dan kata-membungkus. Memang, mendapatkan kode terformat Anda untuk melihat konsisten, bermanfaat, dan bergaya di browser bukanlah tugas yang mudah, tapi jelas dapat dilakukan. Artikel ini menjelaskan semua yang anda butuhkan untuk membuat tag <pre> tepat.

Css-090 di 45 Powerfull CSS / JavaScript-Teknik

Meningkatkan tipografi web Anda dengan pergeseran awal /> Garis dasar adalah garis tak terlihat ke mana semua karakter jenis duduk, meski tentu saja beberapa karakter (termasuk 'j', 'p', 'g' dan 'y') memiliki descenders yang tergantung di bawah baseline. Baseline shift melibatkan karakter bergerak naik atau turun dalam kaitannya dengan baseline dan menggunakannya secara efektif dapat membuat perbedaan besar untuk tampilan profesional jenis Anda. Meskipun pergeseran awal secara tradisional menjadi bagian dari menggunakan alat-alat seperti InDesign atau Quark, ada cara untuk mencapai hasil yang sama menggunakan CSS.

Css-109 di 45 Powerfull CSS / JavaScript-Teknik

Typograph - Skala & Rhythm /> Halaman ini adalah baik sebuah esai dan alat. Ini menetapkan untuk menjelajahi bagaimana dua, konsep saling terkait, sering main-main tapi kadang-kadang nakal, dapat didorong untuk menari di halaman web. Tarik kotak berwarna sepanjang skala untuk melemparkan kata-kata ini lagi. Sebagian besar, teks ini hanya sebuah libretto untuk performa Anda akan bermain di atasnya.

Css-085 di 45 Powerfull CSS / JavaScript-Teknik

Fancy Quotes Dengan jQuery, AJAX & CSS /> Pelajari cara membuat sistem rating kutipan mewah yang akan menampilkan sejumlah kutipan terkenal dan akan memungkinkan pengunjung untuk menilai situs favorit mereka.

Css-156 di 45 Powerfull CSS / JavaScript-Teknik

Cara Buat Simple, Stylish dan swappable Image Captions /> Sebagian besar judul / keterangan gambar solusi memerlukan banyak berlebihan HTML, membuat sulit untuk mendesain ulang atau tidak berkomunikasi dengan jelas bahwa mereka adalah gambar. Mari kita lihat apa yang bisa kita lakukan untuk mengatasi masalah ini.

Css-189 di 45 Powerfull CSS / JavaScript-Teknik

Keterangan foto styling dengan CSS /> Tentu saja, beberapa foto yang cukup jelas, namun sebagian besar foto yang terbaik disajikan dengan teks keterangan. Memang benar untuk media tradisional seperti surat kabar dan majalah, dan hanya berlaku untuk posting blog dan web artikel. Berikut adalah tip singkat menggunakan keterangan foto dan styling mereka baik dengan keajaiban CSS.

Css-183 di 45 Powerfull CSS / JavaScript-Teknik

Gambar keterangan pada halaman Web /> Dokumen ini menyarankan tiga cara untuk menyajikan sebuah gambar dengan keterangan dalam HTML. Styling dalam CSS juga dibahas.

Css-176 di 45 Powerfull CSS / JavaScript-Teknik

Headings Itu styling Posting Stick Out /> "Baru-baru ini, saya telah melihat tren di posting blog pos mana tongkat keluar dari tata letak dasar. Saya ingin berbagi teknik ini untuk mereka yang ingin memberikan judul posting gaya baru. Salah satu tip yang perlu diingat ketika mendesain ini adalah untuk memastikan agar sesuai target audiens Anda ukuran resolusi layar. Perhatikan bahwa teknik ini dapat bervariasi, tergantung pada desain Anda. Tujuan saya adalah bagi Anda untuk memahami konsep utama dalam tutorial ini sehingga Anda dapat melakukan percobaan dan menerapkannya pada proyek Anda sendiri. "

Menggunakan elipsis dengan HTML dan CSS /> Jika teks terlalu lebar untuk muat ke dalam sebuah wadah, sebuah solusi yang bagus dapat memiliki elipsis menunjukkan ada informasi lebih lanjut tersedia. Meskipun saat ini tidak menjadi bagian dari spesifikasi HTML resmi, adalah mungkin untuk memiliki elipsis didefinisikan dalam CSS dan bekerja untuk Internet Explorer, Safari, Chrome dan Opera. It doesn't work for Firefox tapi ada solusi yang dapat dilakukan dengan jQuery.

5 Pesan kotak untuk Gaya Notifikasi Anda dengan CSS /> Artikel ini mempersembahkan kotak pemberitahuan bebas untuk menggunakan / menyesuaikan dan juga teknik yang sangat sederhana untuk membuat Anda sendiri yang terinspirasi dari Roundup ini.

CSS Daftar

Buat Microsoft Word-Gaya Garis Besar dengan CSS /> Seperti yang anda lihat, browser tidak repot-repot untuk mengubah gaya indentasi banyak, atau mengubah jenis daftar dari angka romawi untuk karakter abjad dan seterusnya ... semua hal yang kita sudah begitu terbiasa melihat karena Microsoft Word dan lain Menulis Program melakukannya secara default. Jadi, mari kita menggunakan CSS sedikit kecerdikan untuk membuat Microsoft Word-gaya garis besar menggunakan daftar perintah!

Css-188 di 45 Powerfull CSS / JavaScript-Teknik

Pure CSS Timeline /> "Aku ingin membangun sebuah CSS waktu untuk" Tentang "bagian situs saya sewaktu menggunakan beberapa markup yang bersih dan sederhana. Aku ingin menghindari menggunakan foto sebanyak mungkin, jadi aku menghabiskan beberapa menit prototipe beberapa pilihan dan muncul dengan solusi menggunakan daftar unordered. Hasilnya adalah sederhana dan bersih melihat timeline dengan beberapa markup yang sangat lurus ke depan. Pada artikel ini saya akan berbagi pendekatan saya untuk menciptakan garis waktu keluar dari CSS dan HTML yang akan menghasilkan nice looking, sederhana timeline. "

Css-106 di 45 Powerfull CSS / JavaScript-Teknik

Penomoran otomatis dengan CSS Counters /> Saat menulis dokumen, seringkali berguna untuk nomor bagian dan memiliki daftar isi. Anda dapat nomor tersebut dengan tangan, langsung di markup, tapi ini dapat memakan waktu jika perubahan urutan dan Anda harus mengedit semua angka. CSS2.1 memberi kita sebuah cara otomatis untuk menghasilkan angka menggunakan CSS counter, dan artikel ini akan memandu Anda melalui cara menggunakannya. Satu kata dari catatan sebelum kita mulai adalah bahwa CSS counter belum diimplementasikan di IE, walaupun mereka berada di jalan untuk IE8.

Css-116 di 45 Powerfull CSS / JavaScript-Teknik

CSS kustom trik untuk peluru

Css-129 di 45 Powerfull CSS / JavaScript-Teknik

Kalender elastis styling dengan CSS /> Sebuah kalender tradisional adalah nomor kotak grid pada halaman. Sebagai web desainer, Anda mungkin akan tepat untuk sebuah meja, dan aku tidak akan menyalahkan Anda untuk itu. Tabel, walaupun, kadang-kadang dapat sulit untuk otot dalam bentuk. CSS murni dalam diriku semakin marah ketika aku set lebar tabel (atau sel) dan memutuskan ia mengetahui lebih baik dan tumbuh atau menyusut saat melihat cocok. /> Anda dapat mengatasi kalender styling dengan murni CSS, dan saya merasa seperti itu membuat banyak pengertian semantik sebagai sebuah tabel tidak. Apa yang dimaksud dengan kalender, jika tidak daftar ordered hari? Dengan menggunakan CSS, kita bahkan dapat melakukan beberapa cool hal-hal seperti melakukan semua ukuran dengan ems kita jadi layout kalender kami akan elastis. Yaitu, tumbuh di kedua lebar dan tinggi ketika teks diubah ukurannya di browser, sementara sangat meningkatkan aksesibilitas.

Css-030 di 45 Powerfull CSS / JavaScript-Teknik

Gaya a List dengan Satu Pixel /> A satu-pixel gambar latar belakang dapat menjadi hal yang cukup serbaguna. Dengan repeat-x ini bisa menjadi sebuah garis horizontal, repeat-y membuat garis vertikal, dan ulangi membuat warna yang mengisi. Sama seperti senang sedikit bukti dari konsep, kita dapat menggunakannya untuk membuat kedalaman-chart tampak unordered list.

Css-017 di 45 Powerfull CSS / JavaScript-Teknik

Ordered List gaya Anda /> Secara default, kebanyakan browser menampilkan daftar perintah nomor gaya font yang sama seperti tubuh teks. Berikut ini adalah tutorial CSS cepat mengenai bagaimana Anda dapat menggunakan daftar memerintahkan (ol) dan ayat (p) elemen untuk merancang sebuah daftar nomor bergaya.

Css-029 di 45 Powerfull CSS / JavaScript-Teknik

Simulasi Tabel Menggunakan berurutan List /> Pertanyaan pertama Anda segera mungkin, "mengapa saya ingin mensimulasikan sebuah tabel dengan daftar, mengapa tidak menggunakan meja?" Dengan kenaikan popularitas AJAX daftar sortable elemen, menggunakan item daftar untuk mewakili beberapa data kolom meja dapat lebih mudah untuk menyortir dari berbagai lebih "tabley" informasi. Jadi mari kita mulai.

Css-031 di 45 Powerfull CSS / JavaScript-Teknik

8 cara yang berbeda untuk gaya indah HTML Anda daftar dengan CSS /> "Penggunaan daftar HTML (<ol> untuk ordered list, <ul> untuk daftar unordered) adalah sangat umum hari ini. Hari ini, kita akan melihat sedikit lebih jauh daripada membuat daftar biasa, dengan menunjukkan cara untuk 8 berbeda gaya indah daftar HTML dengan CSS. Kita akan menggunakan beberapa teknik murni CSS untuk membuat daftar bosan melihat awesome (dan bahkan memiliki fungsi tambahan). "

Css-042 di 45 Powerfull CSS / JavaScript-Teknik

Quick Tip - Sederhanakan Daftar Margin dengan CSS /> Apakah Anda pernah menetapkan batas standar untuk tata letak, dan kemudian harus kembali dan secara manual menyesuaikan semua daftar Anda? Secara default, spidol item daftar memiliki posisi negatif dalam hubungan dengan item daftar itu sendiri. Ini berarti bahwa nol-ing out margin secara otomatis mengarah ke daftar meluap jika terdapat di dalam hal lain. Bukankah akan lebih mudah untuk menempatkan item daftar penanda di titik awal yang sama seperti unsur-unsur lain sebagai gantinya? Beruntung bagi kita, ada gaya untuk membantu melakukan hal itu. Mari kita lihat apa yang dapat dilakukan dengan list-style-position properti.

Css-068 di 45 Powerfull CSS / JavaScript-Teknik

Sexy HTML List Trik /> Lihatlah daftar di mana-mana elemen, <ul> dan <ol>. Kedua unsur sexy membantu jutaan situs web menampilkan daftar informasi dalam bersih, semantik mode. Tanpa mereka, kita akan merangkak di sekitar seperti manusia gua yang kotor, makan kotoran dan melolong di bulan. Tapi daftar ini elemen tidak hanya seksi, mereka juga sangat fleksibel, memungkinkan kita rendah hati desainer untuk menciptakan daftar kuat semantik konfigurasi yang fleksibel dan sangat dapat dikustomisasi.

Css-091 di 45 Powerfull CSS / JavaScript-Teknik

Diklik <li> /> Saya awalnya kode markup menjadi meja, tetapi menemukan masalah ketika saya mencoba untuk membuat seluruh baris diklik. Saya berakhir dengan daftar artikel saja.

Css-061 di 45 Powerfull CSS / JavaScript-Teknik

CSS Buttons

Cukup-Buttons v2 /> Teknik ini menyajikan kancing ukuran yang selalu sesuai dengan konten. Ada 3 menyatakan: aktif, aktif, dan hover. Teknik bekerja di semua browser besar dan tidak memerlukan JavaScript.

Css-099 di 45 Powerfull CSS / JavaScript-Teknik

Bagaimana membuat tombol seksi dengan CSS /> Tutorial ini akan mengajarkan anda cara membuat tombol cantik mencari tekstual (dengan menekan alternatif negara) menggunakan CSS. Dynamic tombol menghemat waktu jika tidak tumpukan menghabiskan membuat grafik dan pada dasarnya akan membuat Anda lebih bahagia di akhir hari.

Css-173 di 45 Powerfull CSS / JavaScript-Teknik

Cair & Warna yang bisa disesuaikan CSS Buttons /> Ketika bekerja pada situs yang besar dengan beberapa tombol, bisa cukup membosankan untuk membuat semua tombol di Photoshop. Membuat penyesuaian di masa depan verbiage dan warna dapat juga memakan waktu. Dengan memiliki tombol dinamis, skenario ini adalah jauh lebih mudah untuk menangani, dan oleh karena cair dan warna tombol yang dapat disesuaikan dengan CSS, kita dapat mengubah verbiage dan warna dalam sekejap.

Css-175 di 45 Powerfull CSS / JavaScript-Teknik

Buat Button dengan Hover dan Active Serikat menggunakan CSS Sprite /> Terlalu banyak desainer negara mengabaikan klik active dalam CSS) di web desain, baik karena mereka tidak menyadarinya, meremehkan pentingnya atau yang biasa malas. Ini efek sederhana yang meningkatkan kegunaan dengan memberikan umpan balik pengguna mengenai apa yang mereka telah mengklik tetapi dapat juga tambahkan kedalaman pada sebuah desain.

Css-159 di 45 Powerfull CSS / JavaScript-Teknik

Menciptakan tombol /> "Saya pikir itu akan menarik untuk memberikan sebagian dari latar belakang pada tombol di sini, dan mendiskusikan beberapa iterasi kami telah melalui begitu jauh untuk sampai ke kondisi saat ini."

Css-134 di 45 Powerfull CSS / JavaScript-Teknik

Bentuk bulat tombol

Css-101 di 45 Powerfull CSS / JavaScript-Teknik

Tombol bergambar Google /> Sebuah diskusi menarik tentang berbagai teknik desain tombol untuk merekonstruksi tombol bergambar Google.

Stay tuned!

Ini adalah bagian pertama dari kami bulat besar-up segar CSS / JavaScript-teknik. Jangan lupa untuk berlangganan RSS-feed dan mengikuti kami di kericau untuk artikel serupa dan aliran sumber daya bermanfaat. Harap juga biarkan kami tahu apa yang harus kita mengubah atau memperbaiki di masa depan kita posting!

/> Apakah Anda ingin melihat lebih mirip round-up di Smashing Magazine di masa depan? (Jawaban) />

/>

© Smashing Editorial untuk Smashing Magazine, 2010. | Permalink | 52 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Menciak it! | Kirim ke Reddit | Forum Smashing Magazine
Post tags:

45 Powerful CSS / JavaScript-Teknik

Tags:

0 Komentar

Anda dapat menjadi yang pertama untuk meninggalkan komentar.

Tinggalkan Komentar





XHTML: Anda dapat menggunakan tag ini:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>