rumah > Program > Tombol berkedip. Menyingkirkan kedipan selama transformasi CSS di Safari. D simulasi tombol tekan


Tombol berkedip. Menyingkirkan kedipan selama transformasi CSS di Safari. D simulasi tombol tekan




Sebelum berurusan dengan tombol, mari kita lihat pengaturan yang umum untuk semuanya.

HTML

Tombol akan menggunakan kode HTML yang sangat sederhana:

Langganan

css

Juga, semua tombol akan memiliki pengaturan umum untuk teks prasasti dan pembatalan pemilihan tautan:

ButtonText ( font: 18px/1.5 Helvetica, Arial, sans-serif; warna: #fff; ) a ( warna: #fff; dekorasi teks: tidak ada; )

Biasanya, pengguna mengharapkan efek yang cukup ringan saat mengarahkan mouse ke tautan atau tombol. Dan dalam kasus kami, tombol berubah ukuran - membesar, menampilkan pesan tambahan.

Kode CSS utama

Untuk memulai, kita hanya perlu memberi tombol bentuk dan warna. Tentukan tinggi 28px dan lebar 115px, tambahkan margin dan padding, dan beri batas tipis pada tombol.

#button1 ( background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px; overflow: hidden; display: block; )

Efek CSS3

Beberapa orang suka jika tombol sederhana disertai dengan kode CSS yang cukup banyak. Bagian ini menyediakan gaya CSS3 tambahan untuk tombol kita. Anda dapat melakukannya tanpanya, tetapi tombol tersebut memberikan tampilan yang lebih modern.

Bulatkan sudut bingkai dan tambahkan gradien. Ini sedikit trik gradien gelap yang bekerja dengan warna latar belakang apa pun.

/*sudut membulat*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*Gradien*/ background-image: -webkit-linear-gradient(atas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(atas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(atas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(atas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Animasi CSS

Sekarang mari kita atur transisi CSS. Animasi akan digunakan untuk setiap perubahan properti dan akan berlangsung selama setengah detik.

Mouse melayang

Tetap hanya menambahkan gaya untuk memperluas tombol saat Anda mengarahkannya dengan mouse. Lebar tombol harus 230px untuk menampilkan seluruh postingan.

#button1:hover ( lebar: 230px; )

Perubahan nada warna yang mudah

Efek CSS yang sangat sederhana dan populer untuk sebuah tombol. Saat Anda menggerakkan kursor mouse, nada warna latar belakang akan berubah dengan lancar.

Kode CSS utama

Kode CSS sangat mirip dengan contoh sebelumnya. Warna latar belakang yang berbeda digunakan dan bentuknya sedikit dimodifikasi. Teks juga dipusatkan dan ketinggian garis untuk tombol diatur sehingga dipusatkan secara vertikal.

#button2 ( background: #d11717; border: 2px solid #eee; height: 38px; width: 125px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 38px; )

Efek CSS3

Atur pembulatan sudut, gradien untuk latar belakang dan bayangan tambahan. Menggunakan rgba kami membuat bayangan menjadi hitam dan transparan.

/*sudut membulat*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px /*Gradien*/ background-image: -webkit-linear-gradient(atas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(atas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(atas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(atas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Bayangan*/ -webkit-kotak-bayangan: 0px 3px 1px rgba(0, 0, 0, 0,2); -moz-kotak-bayangan: 0px 3px 1px rgba(0, 0, 0, 0.2); kotak-bayangan: 0px 3px 1px rgba(0, 0, 0, 0.2);

Animasi CSS

Animasinya bisa dibilang sama dengan contoh sebelumnya.

/*Transisi*/ -webkit-transisi: Semua kemudahan 0,5 detik; -moz-transition: Semua kemudahan 0,5 detik; -o-transisi: Semua kemudahan 0,5 detik; -ms-transition: Semua kemudahan 0,5 detik; transisi: Semua kemudahan 0,5 detik;

Mouse melayang

Saat mengarahkan kursor mouse, warna latar belakang yang berbeda akan diatur. Coba pilih opsi warna yang lebih terang di Photoshop untuk efek yang bagus.

#button2:hover ( warna latar belakang: #ff3434; )

Efek ini bisa sangat mengesankan tergantung pada pilihan gambar latar belakang. Demo menggunakan latar belakang yang tidak mencolok dan efeknya terlihat tidak mencolok. Coba gunakan gambar yang berbeda dan Anda mungkin akan mendapatkan efek yang menakjubkan.

Kode CSS utama

Bagian utama dari kode ini sama dengan contoh sebelumnya. Perhatikan bahwa kami menggunakan gambar latar belakang. Posisi awal latar belakang diatur ke "0 0". Saat Anda mengarahkan kursor ke kursor, posisinya bergeser secara vertikal.

#button3 ( background: #d11717 url("bkg-1.jpg"); background-position: 0 0; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; tinggi : 58px; lebar: 155px; margin: 50px 0 0 50px; luapan: tersembunyi; tampilan: blok; perataan teks: tengah; ketinggian garis: 58px; )

Efek CSS3

Dalam contoh ini, tidak ada yang istimewa - sudut dan bayangan membulat.

/*sudut membulat*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px /*Bayangan*/ -webkit-kotak-bayangan: 0px 3px 1px rgba(0, 0, 0, 0,2); -moz-kotak-bayangan: 0px 3px 1px rgba(0, 0, 0, 0.2); kotak-bayangan: 0px 3px 1px rgba(0, 0, 0, 0.2);

Animasi CSS

Animasi untuk case ini lebih panjang untuk menciptakan efek yang halus dan menarik.

/*Transition*/ -webkit-transition: Semua 0,8 detik mudah; -moz-transition: Semua kemudahan 0,8 detik; -o-transisi: Semua kemudahan 0,8 detik; -ms-transition: Semua kemudahan 0,8 detik; transisi: Semua kemudahan 0,8 detik;

Mouse melayang

Sekarang saatnya untuk memindahkan gambar latar belakang. Posisi awal adalah "0 0". Atur parameter kedua menjadi 150px. Untuk menggeser secara horizontal, Anda perlu mengubah parameter pertama.

#button3:hover ( background-position: 0px 150px; )

Tekan tombol simulasi 3D

Contoh terakhir dalam tutorial kami berfokus pada metode 3D populer untuk mensimulasikan klik tombol saat Anda mengarahkan mouse ke atasnya. Animasi untuk kasus ini sangat sederhana bahkan tidak memerlukan transisi CSS. Namun hasil akhirnya cukup mengesankan.

Kode CSS utama

Kode CSS untuk tombol kita.

#button4 ( latar belakang: #5c5c5c; bayangan teks: 0px 2px 0px rgba(0, 0, 0, 0,3); ukuran font: 22px; tinggi: 58px; lebar: 155px; margin: 50px 0 0 50px; luapan: tersembunyi ; tampilan: blokir; perataan teks: tengah; ketinggian baris: 58px; )

Efek CSS3

Dalam hal ini, CSS3 bukan lagi pilihan yang bagus. Bayangan dan gradien diperlukan untuk mendapatkan efeknya. Bayangan keras menciptakan tampilan tombol 3D.

/*sudut membulat*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px /*Bayangan*/ -webkit-kotak-bayangan: 0px 6px 0px rgba(0, 0, 0, 0,8); -moz-kotak-bayangan: 0px 6px 0px rgba(0, 0, 0, 0.8); bayangan kotak: 0px 6px 0px rgba(0, 0, 0, 0,8); /*Gradien*/ background-image: -webkit-linear-gradient(atas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(atas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(atas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(atas, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));

Mouse melayang

Dalam hal ini, kami memiliki bagian hover terbesar. Panjang bayangan dikurangi dan margin menciptakan perpaduan zona gelap. Semua bersama-sama menciptakan ilusi menekan tombol. Membalik gradien meningkatkan efeknya.

#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0,8); bayangan kotak: 0px 4px 0px rgba(0, 0, 0, 0,8); /*Gradien*/ gambar latar: -webkit-linear-gradien(bawah, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); gambar latar belakang: -moz-linear-gradient(bawah, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4 )); gambar latar belakang: -o-linear-gradient(bawah, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); gambar latar belakang: -ms-linear-gradient( bawah, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); gambar latar belakang: gradien linier(bawah, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0,4)); )

Hari baik untuk semua. Beberapa waktu yang lalu saya menerbitkan posting sebagai blog. Hari ini, di bawah mood, saya masih ingin melakukan desainnya. Gadget yang sangat asli tentang penulisnya cukup membosankan dan tidak menarik.

Hasilnya, ternyata menciptakan gaya tersendiri, cukup bagus dan informatif untuk desain Anda sendiri, kemungkinan besar bahkan bukan widget, tetapi kartu profil. Jadi mari kita panggil dia. Yah, sesuatu seperti ini

Versi kerja di blog uji di sidebar paling bawah


Apa yang ada di atasnya

1. Foto profil Anda.
2. Desain kartu yang indah itu sendiri, yang mudah disesuaikan
3. Nama panggilan, nama depan, atau nama belakang Anda
4 Anda dapat menentukan pekerjaan, hobi
5.Tambahkan 2 tombol ke halaman yang diperlukan. Ini bisa berupa tautan ke halaman lengkap Anda tentang penulis, ke halaman utama, peta, kelas master, hingga publik di jejaring sosial. Apa pun.
6. Kartu akan pas di sidebar blog.

Salin kode di bawah ini dan kami akan memahat kartu profil Anda lebih lanjut.



"alt="profil" class="profile" />!}

Vika Barad Blogger


Blog saya grup VK


https://w-dog.ru/wallpapers/10/19/380923269777589.jpg- ini adalah alamat gambar - latar belakang di bagian atas

https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc- alamat thumbnail Anda. Anda dapat menyalinnya di profil Google Anda atau memasang avatar lain.

Di baris yang ditandai dengan warna merah muda, tulis nama panggilan, nama, pekerjaan, dan teks penjelasan Anda.

Karenanya, yang disorot dengan warna hijau adalah alamat halaman tempat transisi akan dilakukan saat tombol ditekan.

Saya juga menandai latar belakang utama kartu profil dengan warna di beberapa tempat #141414;

Pengaturannya paling dasar dan menurut saya tidak akan ada pertanyaan yang muncul. Jika ada - tulis di komentar. Mari kita cari tahu.

Kami memasang kode widget yang sudah jadi di bagian tersebut DESAIN - Gadget HTML/JavaScript di sidebar blog. Ngomong-ngomong, menurut saya tidak akan terlihat buruk di bagian atas, ketika pengguna memiliki kesempatan untuk segera mengenal penulisnya. Latar belakang dan gambar dapat dengan mudah diubah tergantung suasana hati atau musim Anda. Itu akan selalu baru. Terserah Anda.

Semua yang terbaik dan semoga sukses.

CSS tidak diragukan lagi adalah salah satu bahasa markup terpenting yang kami gunakan. Dan meskipun HTML menjelaskan struktur dokumen, perilakunya tidak dapat diprediksi, bergantung pada versi browser. CSS adalah alat yang memungkinkan kita untuk memperbaiki semua ketidakkonsistenan dalam tampilan halaman, serta menata tampilannya.

Menyembunyikan teks dengan paragraf

Teknik ini akan sangat berguna untuk logo perusahaan. Paling sering, gambar digunakan sebagai logo, tetapi untuk SEO, alangkah baiknya menampilkan nama perusahaan di tag h1. Contoh ini adalah cara terbaik untuk mengimplementasikannya. Faktanya, kami hanya menyembunyikan teks di luar layar, dan sebagai gantinya menetapkan gambar latar belakang.

H1 ( text-indent:-9999px; margin:0 auto; width:400px; height:100px; background:transparent url("images/logo.jpg") no-repeat scroll; )

Tautan gaya tergantung pada format file

Contoh ini bertujuan untuk meningkatkan antarmuka pengguna. Seringkali di Internet, kami mengikuti tautan, sama sekali tidak tahu ke mana arahnya. Cuplikan kode berikut digunakan untuk menampilkan ikon kecil di sebelah tautan. Gambar seperti itu akan memberi tahu pengguna bahwa ini adalah tautan eksternal, alamat email, file pdf, gambar, dll.

/* external link */ a( padding-right: 20px; background: url(external.gif) no-repeat center right; ) /* email */ a( padding-right: 20px; background: url(email.png ) kanan tengah tanpa pengulangan;) /* pdfs */ a(padding-right: 20px; background: url(pdf.png) kanan tengah tanpa pengulangan;)

Menghapus bilah gulir dari bidang multiline di IE

Internet Explorer memiliki kebiasaan yang mengganggu untuk menambahkan bilah gulir ke bidang multibaris meskipun kontennya tidak melebihi ukuran yang diberikan. Kekurangan ini mudah diperbaiki dengan baris kode berikut:

Textarea( luapan: otomatis; )

huruf awal

Ini sangat umum di blog dan situs berita hari ini. Anda akan terkejut betapa mudahnya penerapannya, dan juga menurun dengan indah di browser lama.

P:huruf pertama( display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:60px; font-family:Georgia; )

Transparansi CSS

Transparansi adalah properti yang ditetapkan secara berbeda ke browser yang berbeda. Dengan cuplikan kode berikut, Anda dapat menetapkan transparansi ke semua browser sekaligus.

Transparan ( filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; )

CSS Reset oleh Eric Meyer

Sebenarnya, pengaturan ulang css, yang diusulkan oleh Eric Meyer, telah menjadi standar penggunaan di mana-mana. Karena telah diadaptasi oleh banyak pengembang ternama, Anda bisa yakin akan kualitasnya.

html, body, div, span, applet, objek, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pra, a, abbr, akronim, alamat, besar, mengutip, kode, del, dfn, em, fon, img, ins, kbd, q, s, samp, kecil, mogok, kuat, sub, sup, tt, var, b, u, i, pusat, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td ( margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align : baseline; background: transparent; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q :setelah ( content: ""; content: none; ) /* ingat untuk menentukan gaya fokus! */ :focus ( outline: 0; ) /* ingatlah untuk menyorot sisipan! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* tabel masih membutuhkan "cellspacing="0"" di markup */ table ( border-collapse: collapse; border-spacing : 0; )

Prapemuat Gambar

Terkadang berguna untuk memuat gambar Anda terlebih dahulu untuk menghindari penundaan dan kedipan saat mengakses elemen yang diinginkan.

Div.loader( background:url(images/hover.gif) no-repeat; background:url(images/hover2.gif) no-repeat; background:url(images/hover3.gif) no-repeat; margin-left: -10000px;)

sprite css sederhana untuk sebuah tombol

Memiliki tombol atau tautan dengan gambar latar adalah hal biasa, dan efek tambahan sering diterapkan pada elemen tersebut untuk meningkatkan pengalaman pengguna. Salah satu efek tersebut adalah indikator mouse hover pada tombol. Dengan sprite, kita dapat mencapai efek ini dengan mengubah properti background-positionon, ke nilai yang ditentukan, untuk menampilkan gambar latar belakang saat mouse diarahkan ke tombol. Solusi sederhana namun efektif.

A ( display: block; background: url(sprite.png) no-repeat; height: 30px; width: 250px; ) a:hover ( background-position: 0 -30px; )

API Font Google

Belum lama ini, Google menerapkan sumber daya yang bagus untuk pengembang web yang memungkinkan Anda mengunduh dan menggunakan font baru yang tidak standar di halaman. Bahkan berbagai pilihan font tersedia untuk diunduh, tebal, miring, dll. Terlepas dari kenyataan bahwa koleksi Google masih terbatas, font yang tersedia cukup banyak. Pertama, sertakan file CSS yang disusun secara dinamis dengan nama font dan opsi yang Anda perlukan, lalu gunakan saja nama font di CSS, seperti biasa. Informasi tambahan tentang Google Font API dapat dibaca.

Inconsolata:miring|Droid+Sans"> body ( font-family: "Tangerine", "Inconsolata", "Droid Sans", serif; ukuran font: 48px; )

Peretasan untuk berbagai browser

Terkadang berguna untuk memperbaiki bug di browser tertentu, dan komentar bersyarat tidak selalu merupakan solusi terbaik untuk ini. Daftar peretasan browser oleh Chris Coyier ini akan membantu Anda mengatur properti yang tepat untuk browser tertentu dengan css sederhana.

/* IE 6 */ * html .yourclass ( ) /* IE 7 */ *+html .yourclass( ) /* IE 7 dan browser modern */ html>body .yourclass ( ) /* Browser modern (bukan IE 7) */ html>/**/body .yourclass ( ) /* Opera 9.27 dan di bawahnya */ html:first-child .yourclass ( ) /* Safari */ html body:last-child .yourclass ( ) /* Safari 3+ , Chrome 1+, Opera 9+, Fx 3.5+ */ body:nth-of-type(1) .yourclass ( ) /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:pertama -of-type .yourclass ( ) /* Safari 3+, Chrome 1+ */ @media layar dan (-webkit-min-device-pixel-ratio:0) ( .yourclass ( ) )

Ruang bawah tanah tetap

Anda mungkin berpikir bahwa membuat footer yang selalu menempel di bagian bawah layar adalah tugas yang menakutkan. Namun, ini sama sekali tidak sulit jika Anda membutuhkan ruang bawah tanah yang sederhana. Kita harus menggunakan sedikit peretasan IE6 di sini, tetapi selain itu, ini sangat mudah.

#footer ( position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; ) /* IE 6 */ * html #footer ( position:absolute; top:expression(( 0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight: document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop: document.body.scrollTop)) +"px"); )

Rotasi Gambar

Rotasi gambar bisa sangat berguna, terutama jika dapat digunakan alih-alih memuat gambar baru yang telah diputar sebelumnya. Misalkan Anda ingin menggunakan hanya satu gambar untuk panah, tetapi Anda memiliki beberapa gambar di halaman, dan gambar tersebut diterapkan ke arah yang berbeda. Inilah solusi untuk masalah Anda:

Img.flip ( -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; - ms-filter: "FlipH"; )

Clearfix

Belum lama ini, seseorang memutuskan sudah waktunya untuk membersihkan pelampung tanpa menambahkan markup tambahan ke dokumen. Sebagai hasil dari keputusan ini, sebuah kelas dibuat yang dapat diterapkan ke wadah yang berisi elemen mengambang untuk membersihkannya. Ini adalah metode yang sangat nyaman dan banyak digunakan saat ini.

Clearfix:setelah ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) .clearfix ( display: inline-block; ) /* start komentar backslash hack */ * html .clearfix ( height: 1%; ) .clearfix ( display: block; ) /* tutup komentar backslash hack */

Sudut membulat

Dengan adopsi CSS3 secara bertahap di browser modern, membuat sudut membulat menjadi sangat mudah. Sayangnya, belum ada dukungan untuk CSS3 di IE, termasuk versi 8, tetapi akan ditambahkan di IE9.

Round( -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* untuk browser Konqueror lama */ )

Mendefinisikan ulang gaya

Saya terus dibuat takjub oleh orang-orang yang tidak saya kenal !penting dalam CSS karena merupakan alat yang sangat kuat dan mudah digunakan. Sangat sederhana, aturan apa pun dengan !penting pada akhirnya, akan menimpa aturan yang sama yang diterapkan pada elemen tersebut di mana pun dalam file CSS atau gaya sebaris.

P( ukuran font:20px !penting; )

wajah font

Font-face tidak banyak digunakan hingga tahun lalu, meskipun sudah ada sejak IE6 dianggap sebagai browser modern. Properti ini sekarang didukung dengan baik oleh browser modern dan menawarkan cara hebat untuk menggunakan font yang tidak aman di proyek Anda. Untuk menghemat waktu, Anda dapat menggunakan generator Font Squirrel Font Face khusus.

@font-face ( font-family: "Graublau Web"; src: url("GraublauWeb.eot"); src: local("☺"), url("GraublauWeb.woff") format("woff"), url ("GraublauWeb.ttf") format("truetype"); )

Pemusatan Situs

Teknik desain yang umum adalah pemusatan horizontal situs. Ini sangat mudah diterapkan.

Min-tinggi di IE

Contoh ini memperbaiki bug yang sederhana namun mengganggu di IE saat mengatur ketinggian minimum. Secara umum, IE menginterpretasikan tinggi sebagai tinggi minimum, jadi jika tinggi IE tidak disetel ke otomatis, trik berikut akan memperbaiki bug ini.

Kotak ( min-height:500px; height:auto !important; height:500px; )

Memuat gambar

Efek pemuatan gambar ini meniru pemuatan ajax dengan menampilkan prapemuat hingga semua konten dimuat. Solusi ini sempurna untuk gambar besar yang memuat lambat.

Img ( background: url(loader.gif) no−repeat 50% 50%; )

Pemusatan vertikal

Ini adalah potongan kecil kode yang memungkinkan Anda memusatkan konten wadah secara vertikal, tanpa menggunakan markup tambahan. Anda hanya perlu merender wadah sebagai sel tabel dan kemudian menetapkan nilai ke atribut vertical-align.

Kontainer ( min-height: 10em; display: table-cell; vertical-align: middle; )

Membuat potongan

Untuk memulainya, mari kita cari tahu apa itu cut? Bilah samping biasanya ditemukan di situs berita dan majalah sebagai blok teks kecil di dalam artikel, terkadang dengan opini atau kutipan orang. Anda akan senang mengetahui bahwa penyematan sangat mudah dibuat, dan bila digunakan dengan benar, penyematan dapat sangat meningkatkan pengalaman pengguna artikel.

Pullquote ( width: 300px; float: right; margin: 5px; font-family: Georgia, "Times New Roman", Times, serif; font: italic bold #ff0000 ; )

Pemilihan teks

Tidak semua orang tahu bahwa warna teks yang dipilih di browser dapat diubah. Ini hanya membutuhkan dua pemilih.

::seleksi ( color: #000000; background-color: #FF0000; ) ::-moz-selection ( color: #000000; background: #FF0000; )

Menambahkan jeda halaman

Contoh ini, sekali lagi bertujuan untuk meningkatkan antarmuka pengguna saat dicetak. Misalnya, saat mencetak artikel, mungkin berguna untuk memisahkan komentar dari teks artikel dan memindahkannya ke halaman terpisah. Jika Anda menambahkan kelas .page-break ke blok komentar, maka semua komentar, saat dicetak, akan ditampilkan di halaman terpisah. Secara umum, kelas ini dapat digunakan di mana saja di situs Anda.

Page-break( page-break-sebelum:selalu; )

Ini bukan pertama kalinya saya menyadari bahwa saat menggunakan transformasi CSS, beberapa elemen pada halaman di Safari secara misterius mengubah propertinya. Di browser lain, ini jauh lebih jarang.

Artefak semacam itu sangat terlihat ketika transformasi berada pada kelas semu :arahkan, yaitu dipicu saat mouse diarahkan ke elemen. Dalam kasus saya, tombol bertambah .btn ketika mengarahkan mouse ke atasnya, itu secara permanen menyebabkan perubahan jenis perataan teks di blok tetangga.

Btn ( transisi: semua .2s ease-in-out; ) .btn:hover ( transform: scale(1.1); )

Masalahnya terkait dengan kurangnya sumber daya untuk rendering, dan cukup mudah ditangani.

Translate3D

Cara termudah untuk mengatasi masalah ini adalah mengaktifkan akselerasi perangkat keras, yang dinonaktifkan secara default untuk animasi 2D di CSS. Untuk melakukan ini, cukup buat animasi 3D kosong.

transformasi webkit: translate3d(0,0,0);

Semuanya, tapi itu kruk.

akan berubah

Ada properti yang relatif baru namun sedikit diketahui di CSS akan berubah, yang memberi tahu browser sebelumnya tentang kemungkinan perubahan elemen yang akan datang. Misalnya, jika suatu elemen akan diubah, Anda dapat memperingatkan browser tentang hal ini untuk menghemat kekuatannya, seperti yang mereka katakan. Dalam kasus tombol di atas, tampilannya seperti ini:

Btn ( transisi: semua .2s ease-in-out; will-change: transform; )

Jika Anda berencana untuk mengubah beberapa parameter, Anda dapat mengaturnya secara berurutan dengan koma. Misalnya, untuk mengubah dengan perubahan transparansi:

akan-berubah: transformasi, opasitas;

Dengan demikian, browser dapat mempersiapkan terlebih dahulu untuk pemrosesan yang berat dan mengoptimalkan penggunaan sumber daya. Ini akan menghindari munculnya berbagai efek samping pada halaman.

Berlangganan telegram saya dan jadilah yang pertama menerima materi baru, termasuk yang tidak ada di situs.