CSS: Beberapa teknik untuk efek goresan berbeda pada elemen. Contoh penggunaan bayangan teks CSS Bayangan font pada sudut yang berbeda css
Properti CSS text-shadow bertanggung jawab untuk mengatur bayangan teks. Sangat mirip dengan properti box-shadow.
Sintaks bayangan teks CSS
bayangan teks : warna X Y R ;
- X - pergeseran bayangan relatif terhadap teks sepanjang sumbu X (paling sering diatur dalam px piksel);
- Y - pergeseran bayangan relatif terhadap teks sepanjang sumbu Y (paling sering diatur dalam px piksel);
- R - radius bayangan (paling sering ditentukan dalam px piksel);
- warna - warna (dapat ditentukan dalam format apa pun, lihat nama warna html)
Sintaks text-shadow memungkinkan beberapa bayangan ditentukan, dipisahkan dengan koma. Misalnya
bayangan teks : X1 Y1 R1 warna1 , X2 Y2 R2 warna2 , ...;
Prioritas bayangan (mana yang lebih tinggi, mana yang lebih rendah) bergantung pada versi CSS tertentu. Di CSS3, bayangan pertama dalam daftar ditempatkan di bagian paling atas, bayangan terakhir dalam daftar ditempatkan di bagian paling bawah. Di CSS2 justru sebaliknya.
Contoh: cara membuat bayangan untuk teks di html
Contoh No.1. Bayangan sederhana untuk teks dalam html
Di bawah ini adalah contoh paling sederhana dengan bayangan teks. Di sini kita telah menerapkan kedua offset (X dan Y) dan juga membuat radius blur.
Текст с тенью
Текст с тенью
Пример №2. Фиксированная или жесткая тень у текста в html
Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.
Фиксированная или жесткая теньФиксированная или жесткая тень с фоном
На странице преобразуется в следующее
Фиксированная или жесткая тень
Фиксированная или жесткая тень с фоном
Пример №3. Двойная тень у текста в html
Двойная тень
На странице преобразуется в следующее
Двойная тень
Пример №4. Вдавленные буквы у текста в html
Вдавленные буквы - вариант 1Вдавленные буквы - вариант 2
На странице преобразуется в следующее
Вдавленные буквы - вариант 1
Вдавленные буквы - вариант 2
Пример №5. Вдавленные буквы у текста в html
Небольшой 3D текст
На странице преобразуется в следующее
Небольшой 3D текст
Для обращения к margin из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.margin ="VALUE "
Описание
Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line .
Синтаксис
text-shadow: none | тень [,тень]*
где тень:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>
Значения
None Отменяет добавление тени. цвет Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр. сдвиг по x Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное - влево. Обязательный параметр. сдвиг по y Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр. радиус Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.
Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке - в самом низу. В CSS2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Akankah jeruk hidup di semak-semak di selatan? Ya, tapi salinan palsu!
Hasil dari contoh ditunjukkan pada Gambar. 1.
Beras. 1. Tampilan bayangan di browser Safari
Peramban
Opera mendukung maksimal 6–9 opsi bayangan. Meningkatkan nilai ini, serta meningkatkan radius blur di atas 100 piksel, akan memengaruhi kinerja browser. Opera versi 9.5–10 menggunakan tampilan multi-bayangan yang mirip dengan CSS2.
Safari sebelum versi 4.0 hanya mendukung satu opsi bayangan, sisanya diabaikan. Sejak versi 4.0, banyak bayangan yang sudah berfungsi.
Internet Explorer hanya memahami properti text-shadow sejak versi 10.0. Sebagai gantinya, properti filter digunakan: Shadow(parameters) . Misalnya, konstruksi berikut menentukan warna bayangan (#666666), arahnya (45° dari vertikal) dan jumlah offset (4 piksel).
filter: Bayangan(Warna=#666666, Arah=45, Kekuatan=4);
Tipografi adalah mainan favorit saya dalam hal desain web. Tentu saja, dengan bantuannya Anda dapat menarik perhatian seseorang hanya dengan sedikit mengubah gaya atau ukuran font. Sangat sederhana dan sangat efektif; banyak buku telah ditulis mengenai topik ini dan banyak salinannya rusak karena perselisihan. Hari ini saya tidak akan memberikan saran tentang tipografi secara umum - saya tidak memiliki kualifikasi yang cukup, tetapi cara mendesain teks situs Anda selalu diterima. Jadi hari ini saya akan menunjukkan beberapa cara untuk menggunakan properti CSS3. bayangan teks, sangat sederhana, tetapi di tangan yang tepat hal ini dapat menghasilkan keajaiban.
Sintaks bayangan teks dasar
Properti ini CSS3 Berfungsi di semua browser terbaru, tanpa awalan vendor seperti -moz dan -webkit. Bahkan IE dapat diajarkan untuk memahami properti ini, Anda perlu menggunakan Modernizr atau analognya.
Bayangan teks: warna buram x-offset y-offset;
Itu semua sintaks dasarnya. Nilai pertama adalah offset horizontal, nilai kedua adalah offset vertikal, keburaman bayangan, dan warna bayangan. Mari kita lihat sebuah contoh:
Bayangan teks: 2px 4px 3px rgba(0,0,0,0.3);
Kami memindahkan bayangan, memburamkannya sebesar 3 piksel dan menetapkan warna hitam dengan transparansi 30%. Mengapa saya menggunakan saluran alfa atau transparansi? Ini memberi Anda lebih banyak kebebasan dalam bertindak; Anda dapat membuatnya sedikit lebih terang atau lebih gelap hanya dengan mengubah nilai transparansi, tanpa harus khawatir dalam memilih warna. Ternyata cukup cepat, saya merekomendasikannya.
Surat-surat yang tertekan
badan ( latar belakang: #222; ) #teks h1 ( warna: rgba(0,0,0,0.6); bayangan teks: 2px 2px 3px rgba(255,255,255,0.1); )
Prinsip pengoperasiannya di sini adalah sebagai berikut: latar belakangnya sedikit lebih terang dari hurufnya, bayangan terang dengan sedikit transparansi. Hasilnya ada di gambar, coba saja.
Bayangan keras
bayangan teks: 6px 6px 0px rgba(0,0,0,0.2);
Saat ini gaya retro sedang populer, dan di sana mereka menggunakan bayangan tanpa blur. Baiklah, kami siap untuk ini
Bayangan ganda
bayangan-teks: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
Dan di sini fitur rumit lainnya dari properti ini digunakan bayangan teks, penyeleksi dapat dicantumkan dipisahkan dengan koma, sehingga menciptakan bayangan sebanyak yang diperlukan. Bayangan pertama dapat diberi warna yang mirip dengan latar belakang, kemudian efeknya akan seperti pada gambar.
Turun dan menjauh
bayangan teks: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1 );
Teksnya banyak sekali dan sepertinya menggantung di atas latar belakang, bukan? Di sini kami menggunakan 4 bayangan dengan tingkat blur dan lokasi berbeda. Secara umum, semakin banyak bayangan yang digunakan, semakin realistis efeknya; pertimbangkan hal ini dalam proyek Anda.
Teks 3D kecil
bayangan teks: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
Mirip dengan contoh sebelumnya, tiga bayangan, tetapi letaknya lebih dekat, sehingga menimbulkan efek tiga dimensi dan bobot teks.
Teks 3D oleh Mark Dotto
bayangan teks: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
Saya menemukan karya desainer ini secara online dan tidak dapat melewatkannya. Realisme yang mengesankan.
Teks menjorok ke dalam oleh Gordon Hall
warna latar belakang: #666666; -webkit-latar belakang-klip:teks; -moz-background-clip: teks; klip latar belakang: teks; warna: transparan; bayangan teks: rgba(255,255,255,0.5) 0px 3px 3px;
Contoh lain dari pekerjaan yang mengesankan dengan properti bayangan teks. Namun prinsipnya sama seperti yang saya katakan di atas. Latar belakang sedikit lebih terang, bayangan terang di bawah huruf dan gelap di atas. Dibuat sederhana, tapi sangat keren.
Teks bersinar
bayangan teks: 0px 0px 6px rgba(255,255,255,0.7);
Di sini juga, semuanya sederhana - kami tidak memindahkan bayangan, kami mengaburkannya lebih kuat dan menjadikannya putih. Itu semua yang bersinar.
Gaya retro
bayangan-teks: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
Saya berbicara di atas tentang gaya retro, ini dari opera yang sama. Ini sangat modis sekarang, banyak bayangan yang jelas. Gunakan sesuai kebijaksanaan Anda sendiri
Berbagai sumber cahaya
bayangan teks: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);
Berikut adalah efek beberapa sumber cahaya yang memberikan bayangan ke segala arah.
Teks yang diangkat
warna: rgba(0,0,0,0.6); bayangan teks: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
Teks yang tertekan sudah ada, tetapi sekarang muncul. Efek yang cukup sederhana, namun terlihat sangat bagus di headline, misalnya. Gunakan, cobalah
Sebagai kesimpulan saya ingin mengatakan - Properti bayangan teks CSS3 sangat sederhana, seperti yang sudah Anda lihat. Namun penggunaannya yang tepat, dan dengan sedikit imajinasi, dapat menghasilkan keajaiban.
Eksperimen, semoga harimu menyenangkan
Vlad Merzhevich
Pada suatu waktu ada mode tertentu untuk teks dengan bayangan dan efek serupa dapat ditemukan di hampir semua situs web. Dalam editor grafis, menambahkan bayangan itu sederhana, tampak hebat, inilah teks dengan bayangan dan dimasukkan ke halaman web, terlepas dari gaya situs dan selera proporsi desainer. Ketika sebagian besar browser mulai mendukung properti gaya text-shadow, mode telah berlalu dan sekarang teks dengan bayangan sudah cukup langka. Namun, text-shadow memiliki sejumlah kegunaan implisit lain yang hanya sedikit orang curigai. Dengan menggunakan properti ini, Anda dapat membuat teks kerangka, “mengekstrusinya”, membuat cahaya, buram, dan banyak lagi.
Menggunakan bayangan teks
Empat parameter ditulis sebagai nilai: warna bayangan, perpindahan horizontal dan vertikal, dan radius keburaman bayangan (Gbr. 1).
Beras. 1. Parameter bayangan teks
Warna dapat ditulis di awal atau akhir semua parameter dalam format CSS apa pun yang sesuai. Jadi Anda bisa membuat bayangan tembus pandang menggunakan format rgba. Nilai offset positif memberikan bayangan ke kanan dan bawah, sedangkan nilai offset negatif masing-masing memberikan bayangan ke kiri dan atas. Untuk membuat bayangan di sekitar teks, cukup atur nilai offset ke nol. Radius blur menentukan seberapa tajam bayangannya. Semakin besar radius blur, semakin lembut bayangannya.
Keuntungan besar dari text-shadow adalah kemampuan untuk menambahkan beberapa bayangan berbeda sekaligus, mencantumkan parameternya dipisahkan dengan koma. Fitur ini pada dasarnya memungkinkan Anda membuat efek berbeda.
Sayangnya, IE sebelum versi 10.0 tidak mendukung text-shadow, jadi kita tidak akan melihat keindahan apa pun di browser ini.
Teks kerangka dicirikan oleh fakta bahwa setiap huruf dikelilingi oleh sebuah garis, yang warnanya berbeda dari warna teks (Gbr. 2). Efek ini terlihat paling baik dengan ukuran font yang besar, seperti judul. Untuk isi teks, penggunaan kerangka hanya akan mengganggu keterbacaan.
Beras. 2. Garis besar teks
Kontur dapat dibuat menggunakan dua metode. Pada metode pertama, kami menetapkan offset bayangan nol dan radius buram kecil, secara harfiah 1-2 piksel (contoh 1). Meningkatkan nilai blur akan mengubah garis tepi menjadi cahaya di sekitar teks, yang merupakan efek berbeda.
Contoh 1: Garis besar teks
Teks garis besar
Kontur yang dibuat dengan metode ini ditunjukkan pada Gambar. 1. Outlinenya ternyata agak kabur, jadi bagi yang ingin mendapatkan garis yang jelas, ditujukan cara yang kedua. Ini terdiri dari penggunaan empat bayangan tajam dengan warna yang sama, mereka digeser ke sudut berbeda sebanyak satu piksel (contoh 2).
Contoh 2. Empat bayangan untuk outline
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Teks garis besar
Penampakan kontur seperti itu ditunjukkan pada Gambar. 3. Terlihat konturnya lebih ekspresif.
Beras. 3. Kontur dengan empat bayangan
Untuk menambahkan efek teks 3D yang ditunjukkan pada Gambar. 4, beberapa bayangan diterapkan secara bersamaan, yang digeser relatif satu sama lain sebesar satu piksel secara horizontal dan vertikal.
Beras. 4. Teks 3D
Secara pribadi, jenis teks ini mengingatkan saya pada tulisan bergaya retro dan, sekali lagi, paling cocok untuk judul, daripada badan halaman web.
Jumlah bayangan tergantung pada seberapa banyak Anda ingin “menarik” teks ke depan. Angka yang lebih besar meningkatkan “kedalaman” huruf, sebaliknya, angka yang lebih kecil mengurangi tiga dimensi. Contoh 3 menggunakan lima bayangan dengan warna yang sama.
Contoh 3: Bayangan untuk menambah tiga dimensi
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Kulkas sepuluh ruang
Untuk semua bayangan kami mengatur radius blur ke nol dan warna yang sama. Bayangan hanya berbeda pada nilai offsetnya.
Pengembosan teks
Untuk menciptakan efek teks timbul atau dengan kata lain timbul, warna teks harus sesuai dengan warna latar belakang. Salah satu bagian huruf yang “menonjol” di atas permukaan tampak diterangi, sedangkan bagian lainnya berada dalam bayangan (Gbr. 5).
Beras. 5. Teks timbul
Untuk menambahkan efek serupa, kita memerlukan dua bayangan - kita memindahkan bayangan putih ke kiri sebanyak satu piksel, dan bayangan abu-abu gelap ke bawah ke kanan (contoh 4).
Contoh 4: Teks timbul
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Teks timbul
Relief terlihat paling baik pada latar belakang abu-abu, sehingga efeknya tidak cocok untuk setiap skema warna situs. Ngomong-ngomong, teksnya lebih mudah ditekan daripada diekstrusi; cukup tukar warna bayangannya.
Bayangan teks: #333 -1px -1px 0, #fff 1px 1px 0;
Binar
Cahaya di sekitar teks adalah bayangan yang sama, hanya saja cerah dan kontras. Jadi, untuk menciptakan efek cahaya, cukup ubah warna bayangan dan atur radius blur yang diinginkan. Karena cahaya di sekitar teks harus seragam, offset bayangan harus disetel ke nol. Pada Gambar. Gambar 6 menunjukkan contoh cahaya dalam berbagai warna.
Beras. 6. Teks bercahaya
Contoh 5. Bersinar
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Sisi terang
Sisi gelap
Mengaburkan
Bayangan itu sendiri kabur, jadi jika kita hanya menyisakan bayangan dan menyembunyikan teks itu sendiri, kita akan mendapatkan huruf buram (Gbr. 7), dan tingkat keburaman dapat dengan mudah disesuaikan menggunakan parameter bayangan teks.
Beras. 7. Teks dengan blur
Untuk menyembunyikan teks asli, cukup atur warnanya menjadi transparan (contoh 6). Warna bayangan kemudian bertindak sebagai warna teks, dan radius buram menentukan tingkat keburaman huruf.
Contoh 6: Mengaburkan teks
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Teks kabur
Kelas bayangan dan kelas semu
Bayangan tidak harus ditambahkan langsung ke teks; properti text-shadow berfungsi baik dengan kelas semu :hover dan :first-letter. Oleh karena itu, efek menarik diperoleh dengan teks, seperti kontur huruf pertama paragraf atau cahaya tautan saat Anda mengarahkan kursor mouse ke atasnya. Contoh 7 menunjukkan teknik seperti itu.
Contoh 7: Menggunakan Kelas Pseudo
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Proyek khusus memperlambat saluran tradisional, berapapun biayanya. Struktur pasar, membuang detailnya, menstabilkan departemen pemasaran dan penjualan, menggunakan pengalaman kampanye sebelumnya. Membangun merek, tentu saja, secara spontan menyingkirkan PR yang konvergen, sehingga memenangkan segmen pasar. Investasi menyinkronkan peran status sosial, meningkatkan persaingan. Merek secara alami menentukan rencana penempatan, menggunakan pengalaman kampanye sebelumnya.
Tipografi adalah mainan favorit para desainer web. CSS memiliki satu alat yang sangat menarik - bayangan teks(bayangan teks), yang sekilas terlihat cukup sederhana, namun dapat digunakan untuk menciptakan efek yang berkesan jika Anda menggunakan kecerdikan dan imajinasi.
Dasar Bayangan
Properti bayangan teks sangat mudah digunakan. Ini didukung oleh semua browser modern dan bahkan tanpa menggunakan awalan. Tapi tidak ada dukungan di IE (bahkan di IE9). Anda dapat menggunakan alat seperti Modernizr untuk membantu mengeluarkan efek CSS3 bahkan pada versi IE yang lebih lama.
Sintaksis
Untuk membuat bayangan teks, gunakan sintaks properti bayangan teks yang diberikan di bawah ini. Ada empat parameter yang harus ditentukan: dua parameter pertama mengatur posisi bayangan, parameter ketiga mengatur tingkat keburaman, dan parameter keempat menentukan warna bayangan.
Bayangan teks: warna buram horizontal_offset vertical_offset;
Di bawah ini adalah contoh bayangan teks yang diimbangi dua piksel ke bawah dan empat piksel ke kanan, diburamkan sebanyak tiga piksel, dan disetel menjadi hitam pada opacity 30%.
Bayangan teks: 2px 4px 3px rgba(0,0,0,0.3);
Hasil dari penggunaan properti ini akan terlihat seperti ini:
Mengapa RGBA digunakan?
Anda tidak harus menggunakan rgba untuk menentukan warna bayangan saat mendefinisikan properti. Namun, rgba menambahkan dimensi lain saat mendefinisikan bayangan – tingkat transparansi.
Cara ini jauh lebih sederhana dibandingkan metode penentuan warna lainnya. Anda tidak harus fokus dalam menentukan shade warna bayangan, yang mungkin hanya sedikit lebih gelap atau lebih terang dari warna latar belakang. Dengan RGBA, Anda cukup menggunakan warna putih atau hitam dan meningkatkan opacitynya untuk mendapatkan warna latar belakang yang diinginkan saat mencampurkan warna.
Menggunakan properti bayangan teks Anda dapat membuat berbagai efek untuk teks, tidak terbatas pada drop shadow sederhana. Misalnya, berikut adalah kode untuk menciptakan ilusi teks tertekan.
Pertama, Anda perlu mengatur warna teks sedikit lebih gelap dari warna latar belakang. Dan kemudian Anda perlu menggunakan properti itu bayangan teks dengan warna putih dan peningkatan transparansi.
Warna latar belakang adalah #222 dan warna teks diatur ke opacity 60%. Bayangan putih diposisikan agak ke bawah dan ke kanan dengan tingkat opacity 10%.
Badan ( latar belakang: #222; ) #teks h1 ( warna: rgba(0,0,0,0.6); bayangan teks: 2px 2px 3px rgba(255,255,255,0.1); )
Tidak perlu mengaburkan bayangan sama sekali. Bayangan yang jelas bisa cocok dengan desain situs web.
Bayangan teks: 6px 6px 0px rgba(0,0,0,0.2);
Kegembiraan sebenarnya dimulai ketika Anda membuang batasan hanya memiliki satu bayangan. Dengan menggunakan koma untuk memisahkan definisi, Anda dapat menggunakan bayangan sebanyak yang Anda perlukan!
Bayangan teks: bayangan1, bayangan2, bayangan3;
Berikut adalah contoh penggunaan dua bayangan. Yang pertama memiliki warna yang sama dengan latar belakang.
Bayangan teks: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
Pergeseran ke bawah jarak jauh
Setelah Anda terbiasa menggunakan banyak bayangan, hasilnya akan menjadi semakin dramatis. Sangat mudah untuk membuat efek 3D untuk teks.
Contohnya menggunakan empat bayangan, semuanya digeser ke bawah pada jarak berbeda dan diburamkan.
Bayangan teks: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1 );
Geser ke bawah sedikit dan buramkan
Inilah inkarnasi lain dari ide yang sama. Ketiga bayangan digeser pada jarak yang lebih kecil dan lebih kabur.
Bayangan teks: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
Teks 3D oleh Mark Dotto
Efeknya digunakan di situs MarkDotto.com. Ini menggunakan 12 bayangan berbeda untuk menciptakan efek 3D yang hebat.
Bayangan teks: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
Teks menjorok ke dalam oleh Gordon Hall
Perhatikan pada contoh di atas saya menyebut teknik saya sebagai efek letterpress “cepat dan kotor”. Itu karena ada cara yang lebih rumit untuk membuat teks sisipan serius yang jauh lebih dapat dipercaya.
Gordon menggunakan beberapa voodoo CSS yang serius untuk menghasilkan tidak hanya bayangan luar tetapi juga bayangan dalam yang asli. Lihat postingan blognya untuk penjelasan lengkap tentang teknik ini.
Warna latar belakang: #666666; -webkit-latar belakang-klip:teks; -moz-background-clip: teks; klip latar belakang: teks; warna: transparan; bayangan teks: rgba(255,255,255,0.5) 0px 3px 3px;
Binar
Bayangan teks: 0px 0px 6px rgba(255,255,255,0.7);
Bayangan teks: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
Berbagai sumber cahaya
Bayangan teks: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);
Warna: rgba(0,0,0,0.6); bayangan teks: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
Kesimpulan
Seperti kebanyakan efek CSS, bayangan sangat mudah diterapkan. Namun kombinasi tindakan sederhana dapat menghasilkan efek yang luar biasa.
