Renge uyarlanabilen, duyarlı ve erişilebilir <button>
bileşenlerinin nasıl oluşturulacağına dair temel bir genel bakış.
Bu gönderide, renge uyarlanabilir bir reklam oluşturmakla ilgili
düşüncelerimi paylaşmak istiyorum.
duyarlı ve erişilebilir <button>
öğesi.
Demoyu deneyin ve şu sayfayı görüntüleyin:
kaynak
Video kullanmayı tercih ederseniz bu gönderinin YouTube versiyonunu kullanabilirsiniz:
Genel Bakış
İlgili içeriği oluşturmak için kullanılan
<button>
öğesi, kullanıcı etkileşimi için oluşturulmuştur. click
etkinliği klavyeden tetikleniyor,
fare, dokunma, ses ve diğer özelliklerle ilgili akıllı kurallarla
zamanlama hakkında daha fazla bilgi edinin. Ayrıca birinci taraf
her tarayıcıda bazı varsayılan stillerle çalışır. Böylece, bunları doğrudan
özelleştirebilirsiniz. Etkinleştirmek için color-scheme
öğesini kullanın
tarafından sağlanan açık ve koyu renkli düğmelere de entegre edilebilir.
Ayrıca farklı türlerde
düğmeler,
her biri önceki Codepen yerleştirmesinde gösterilir. Tür içermeyen bir <button>
gönderme türüne göre değişiklik yaparak <form>
içinde kalmaya uyum sağlar.
<!-- buttons -->
<button></button>
<button type="submit"></button>
<button type="button"></button>
<button type="reset"></button>
<!-- button state -->
<button disabled></button>
<!-- input buttons -->
<input type="button" />
<input type="file">
Bu ayki GUI Yarışmasında, her düğme, amaçlarını görsel olarak ayırt etmenize yardımcı olacak stiller alacak. Sıfırla düğmeler zararlı oldukları için uyarı renkleri kullanabilir ve düğmeler mavi vurgulu metin alır ve böylece normalden biraz daha yüksek görünürlüğe sahiptir düğmelerini kullanın.
Düğmeler için sözde sınıflar da bulunur
için kullanılacak kod snippet'idir. Bu sınıflar,
düğmenin tarzı: :hover
için fareyi düğmenin
üzerine getirdiğimde,
Fare kullanıldığında için :active
klavye tuşuna basın ve
:focus
veya
:focus-visible
.
button:hover {}
button:active {}
button:focus {}
button:focus-visible {}
Brüt kar
HTML spesifikasyonu tarafından sağlanan düğme türlerine ek olarak,
btn-custom
özel sınıfını içeren bir simge ve düğme.
<button>Default</button>
<input type="button" value="<input>"/>
<button>
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path d="..." />
</svg>
Icon
</button>
<button type="submit">Submit</button>
<button type="button">Type Button</button>
<button type="reset">Reset</button>
<button disabled>Disabled</button>
<button class="btn-custom">Custom</button>
<input type="file">
Daha sonra, test için her düğme bir formun içine yerleştirilir. Bu şekilde proje sırasında Stiller, varsayılan düğme için uygun şekilde güncellenir. Varsayılan düğme gönder düğmesi. Ayrıca, simge stratejisini satır içi SVG'den maskelenmiş SVG'ye geçiriyorum. her ikisinin de eşit derecede iyi çalışmasını sağlamak.
<form>
<button>Default</button>
<input type="button" value="<input>"/>
<button>Icon <span data-icon="cloud"></span></button>
<button type="submit">Submit</button>
<button type="button">Type Button</button>
<button type="reset">Reset</button>
<button disabled>Disabled</button>
<button class="btn-custom btn-large" type="button">Large Custom</button>
<input type="file">
</form>
Kombinasyonların matrisi bu noktada oldukça korkutucudur. Ara düğmesi sanal sınıfların, bir formun içinde veya dışında olmanın 20'den fazla düğme kombinasyonlarını sağlayabilir. CSS'nin her bir ayrıntıyı anlamamıza yardımcı olması iyidir. net bir şekilde!
Erişilebilirlik
Düğme öğeleri doğal olarak erişilebilir durumdadır ancak birkaç yaygın öğe unutmayın.
Fareyle üzerine gelin ve birlikte odaklanın
:hover
ve :focus
öğelerini :is()
işleviyle birlikte gruplandırmayı seviyorum
yapay seçici. Bu şekilde arayüzlerimde her zaman klavyeyi dikkate alabiliyorum
ve yardımcı teknoloji stilleri.
button:is(:hover, :focus) {
…
}
Etkileşimli odak halkası
Odak halkasını klavye ve yardımcı teknoloji kullanıcıları için animasyonla göstermek istiyorum. İ bunu, dış çizgiyi düğmeden 5 piksel uzağa doğru hareket ettirerek yapabilirsiniz. Ancak bu, düğme etkin olmadığında Bu işlem, odak halkasını oluşturan bir efekt oluşturur basıldığında düğme boyutuna küçültür.
:where(button, input):where(:not(:active)):focus-visible {
outline-offset: 5px;
}
Geçişli renk kontrastını sağlama
Açık ve koyu renk kombinasyonlarında, en az dört farklı renk kombinasyonu renk kontrastını göz önünde bulundurmak gerekir: düğme, gönder düğmesi, sıfırla düğmesi ve devre dışı düğmesi. VisBug, şu amaçlarla kullanılır: Tüm puanlarını tek seferde inceleyip gösterme:
Göremeyen kişilerden simgeleri gizleme
Bir simge düğmesi oluştururken simge, düğmenin konumuna görsel destek sağlamalıdır. düğme metni. Bu, simgenin gören kişiler için değerli olmadığı anlamına da gelir. kaybetmezsiniz. Neyse ki tarayıcı, öğeleri ekran okuyucudan gizlemenin bir yolunu sunuyor Bu sayede, görme engelli kişilerin dekoratif düğmelerle uğraşmaması için teknolojiden yararlanıldı. görseller:
<button>
<svg … aria-hidden="true">...</svg>
Icon Button
</button>
Stiller
Bu sonraki bölümde, ilk olarak site yönetimi için özel bir mülk sistemi düğmenin uyarlanabilir stillerini ayarlamalıdır. Bu özel özelliklerle ve görünümlerini özelleştirebilirsiniz.
Uyarlanabilir özel mülk stratejisi
Bu GUI Yarışmasında kullanılan özel özellik stratejisi, renk şeması oluştururken kullanın. Örneğin, açık ve koyu renklerle uyumlu hale getirildiğinde, her tema için özel bir özellik uygun şekilde tanımlanıp adlandırılır. Daha sonra, temanın geçerli değerine sahip olur ve bir CSS mülküne atanır. Daha sonra, single özel özellik farklı bir değerle güncellenip düğmeyi güncellenebilir stiline sahip.
button {
--_bg-light: white;
--_bg-dark: black;
--_bg: var(--_bg-light);
background-color: var(--_bg);
}
@media (prefers-color-scheme: dark) {
button {
--_bg: var(--_bg-dark);
}
}
Açık ve koyu temanın açıklayıcı ve net olması hoşuma gidiyor. İlgili içeriği oluşturmak için kullanılan
dolaylı ve soyutlama --_bg
özel özelliğine aktarılır.
Şu anda "reaktif" durumda olan tek mülk; --_bg-light
ve --_bg-dark
statik. Ayrıca, varsayılan temanın açık tema olduğunu ve
koyu renk yalnızca koşullu olarak uygulanır.
Tasarım tutarlılığı için hazırlık
Paylaşılan seçici
Aşağıdaki seçici tüm farklı düğme türlerini hedeflemek için kullanılır ve
zorlayıcı olabilir. :where()
Bu nedenle, düğmenin özelleştirilmesi herhangi bir ayrıntı gerektirmez. Düğmeler çoğu zaman
uyarlandığını gösterir. :where()
seçici, bu görevin
kolay. :where()
içinde her düğme türü seçilir. Bu düğme şunları içerir:
::file-selector-button
; bu
kullanılıyor
:is()
veya :where()
içinde.
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
…
}
Tüm özel özelliklerin kapsamı bu seçicinin içinde belirlenir. İnceleme süresi tüm özel özellikleri kontrol edin! Bu alanda kullanılan çok sayıda özel nitelik, düğmesini tıklayın. İlerledikçe her grubu açıklayacağım, sonra da karanlık ve azaltılmış hareketli bağlamlar ekledik.
Düğme vurgu rengi
Gönder düğmeleri ve simgeler, çarpıcı renkler için mükemmel bir seçenektir:
--_accent-light: hsl(210 100% 40%);
--_accent-dark: hsl(210 50% 70%);
--_accent: var(--_accent-light);
Düğme metni rengi
Düğme metni renkleri beyaz veya siyah değildir, daha koyu veya daha açık renklidir
/ --_accent
kullanılıyor
hsl()
ve
210
tonuna uyun:
--_text-light: hsl(210 10% 30%);
--_text-dark: hsl(210 5% 95%);
--_text: var(--_text-light);
Düğme arka plan rengi
Açık tema hariç düğme arka planları aynı hsl()
kalıbını kullanıyor
yüzeyleri düğmenin yakınında görünmelerini sağlayacak biçimde, beyaz renkte
veya diğer yüzeylerin önünde gösterilebilir:
--_bg-light: hsl(0 0% 100%);
--_bg-dark: hsl(210 9% 31%);
--_bg: var(--_bg-light);
Düğme arka planı
Bu arka plan rengi, bir yüzeyin diğer yüzeylerin arkasında görünmesini sağlamak içindir. dosya girişinin arka planı için kullanışlıdır:
--_input-well-light: hsl(210 16% 87%);
--_input-well-dark: hsl(204 10% 10%);
--_input-well: var(--_input-well-light);
Düğme dolgusu
Düğmedeki metnin etrafındaki boşluk,
ch
yazı tipi boyutuna göreceli bir uzunluk belirtir. Bu, proje başlatma belgesinde
düğmelerin değeri font-size
ve düğme ölçeklerini artırıyor
orantılı olarak:
--_padding-inline: 1.75ch;
--_padding-block: .75ch;
Düğme kenarlığı
Düğme kenarlığı yarıçapı, dosya girişinin kaydedilebilmesi için özel bir özelliğe sabitlenir. diğer düğmelerle eşleştirin. Kenarlık renkleri, belirlenen uyarlanabilir renge uyar sistem:
--_border-radius: .5ch;
--_border-light: hsl(210 14% 89%);
--_border-dark: var(--_bg-dark);
--_border: var(--_border-light);
Düğmeyle üzerine gelerek vurgulama efekti
Bu özellikler, etkileşimde geçiş için bir boyut özelliği oluşturur ve
vurgu rengi uyarlanabilir renk sistemine uyar. Bunların nasıl
bu yayının ilerleyen kısımlarında etkileşim kurabilir, ancak nihai olarak bunlar box-shadow
amacıyla kullanılır
efekt:
--_highlight-size: 0;
--_highlight-light: hsl(210 10% 71% / 25%);
--_highlight-dark: hsl(210 10% 5% / 25%);
--_highlight: var(--_highlight-light);
Düğme metni gölgesi
Her düğmenin ince bir metin gölgesi stili vardır. Bu, metnin ekranın üst kısmına daha rahat okunmasını sağlıyor ve sunumuna güzel bir görünüm katıyor.
--_ink-shadow-light: 0 1px 0 var(--_border-light);
--_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);
--_ink-shadow: var(--_ink-shadow-light);
Düğme simgesi
Simgeler, ch
birimi göreli uzunluğu sayesinde iki karakter uzunluğundadır
Böylece, simge, düğme metniyle orantılı olarak ölçeklendirilir. İlgili içeriği oluşturmak için kullanılan
simge rengi uyarlanabilir ve tema içi bir tema için --_accent-color
özelliğinden yararlanır
rengi.
--_icon-size: 2ch;
--_icon-color: var(--_accent);
Düğme gölgesi
Gölgelerin ışığa ve karanlığa uygun şekilde uyum sağlayabilmesi için hem gölge renk ve opaklık. Açık tema gölgeleri, yumuşak ve tonlu olduğunda en iyi sonucu verir yüzey rengine doğru örtebilir. Koyu tema gölgeleri daha koyu ve daha doygunluğu artırmaktır. Böylece, daha koyu yüzey renklerine sahip olabilirler.
--_shadow-color-light: 220 3% 15%;
--_shadow-color-dark: 220 40% 2%;
--_shadow-color: var(--_shadow-color-light);
--_shadow-strength-light: 1%;
--_shadow-strength-dark: 25%;
--_shadow-strength: var(--_shadow-strength-light);
Uyarlanabilir renkler ve güçlerle iki derin gölgeyi bir araya getirebilirim:
--_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));
--_shadow-2:
0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),
0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%));
Bununla birlikte, düğmelere hafif 3D bir görünüm vermek için 1px
kutu gölgesi
şu illüzyonu yaratır:
--_shadow-depth-light: 0 1px var(--_border-light);
--_shadow-depth-dark: 0 1px var(--_bg-dark);
--_shadow-depth: var(--_shadow-depth-light);
Düğme geçişleri
Uyarlanabilir renkler kalıbını izleyerek tasarım sistemi seçeneklerini basılı tutun:
--_transition-motion-reduce: ;
--_transition-motion-ok:
box-shadow 145ms ease,
outline-offset 145ms ease
;
--_transition: var(--_transition-motion-reduce);
Seçicideki tüm mülkler bir arada
:where( button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"] ), :where(input[type="file"])::file-selector-button { --_accent-light: hsl(210 100% 40%); --_accent-dark: hsl(210 50% 70%); --_accent: var(--_accent-light);--_text-light: hsl(210 10% 30%); --_text-dark: hsl(210 5% 95%); --_text: var(--_text-light);
--_bg-light: hsl(0 0% 100%); --_bg-dark: hsl(210 9% 31%); --_bg: var(--_bg-light);
--_input-well-light: hsl(210 16% 87%); --_input-well-dark: hsl(204 10% 10%); --_input-well: var(--_input-well-light);
--_padding-inline: 1.75ch; --_padding-block: .75ch;
--_border-radius: .5ch; --_border-light: hsl(210 14% 89%); --_border-dark: var(--_bg-dark); --_border: var(--_border-light);
--_highlight-size: 0; --_highlight-light: hsl(210 10% 71% / 25%); --_highlight-dark: hsl(210 10% 5% / 25%); --_highlight: var(--_highlight-light);
--_ink-shadow-light: 0 1px 0 hsl(210 14% 89%); --_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%); --_ink-shadow: var(--_ink-shadow-light);
--_icon-size: 2ch; --_icon-color-light: var(--_accent-light); --_icon-color-dark: var(--_accent-dark); --_icon-color: var(--accent, var(--_icon-color-light));
--_shadow-color-light: 220 3% 15%; --_shadow-color-dark: 220 40% 2%; --_shadow-color: var(--_shadow-color-light); --_shadow-strength-light: 1%; --_shadow-strength-dark: 25%; --_shadow-strength: var(--_shadow-strength-light); --_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%)); --_shadow-2: 0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%)) ;
--_shadow-depth-light: hsl(210 14% 89%); --_shadow-depth-dark: var(--_bg-dark); --_shadow-depth: var(--_shadow-depth-light);
--_transition-motion-reduce: ; --_transition-motion-ok: box-shadow 145ms ease, outline-offset 145ms ease ; --_transition: var(--_transition-motion-reduce); }
Koyu tema uyarlamaları
-light
ve -dark
statik aksesuar kalıbının değeri,
koyu tema öğeleri ayarlandı:
@media (prefers-color-scheme: dark) {
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
--_bg: var(--_bg-dark);
--_text: var(--_text-dark);
--_border: var(--_border-dark);
--_accent: var(--_accent-dark);
--_highlight: var(--_highlight-dark);
--_input-well: var(--_input-well-dark);
--_ink-shadow: var(--_ink-shadow-dark);
--_shadow-depth: var(--_shadow-depth-dark);
--_shadow-color: var(--_shadow-color-dark);
--_shadow-strength: var(--_shadow-strength-dark);
}
}
Bu, hem yazıları iyi okuyor hem de bu özel düğmeleri kullananlar, kullanıcı tercihlerine uygun olacaklarından emin olarak sabit donanımlar oluşturun.
Azaltılmış hareket adaptasyonları
Ziyaret eden bu kullanıcıda hareket sorunu yoksa kullanıcıya --_transition
atayın
var(--_transition-motion-ok)
:
@media (prefers-reduced-motion: no-preference) {
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
--_transition: var(--_transition-motion-ok);
}
}
Birkaç paylaşılan stil
Düğmelerin ve girişlerin yazı tiplerinin inherit
olarak ayarlanması gerekir. Böylece
geri kalan yazı tipleri; Aksi takdirde, bunların stili tarayıcı tarafından belirlenir. Bu ayrıca
letter-spacing
için geçerlidir. line-height
, 1.5
olarak ayarlandığında sinemaskop ayarlanır
boyutunu ayarlamak için metnin üzerinde ve altında biraz boşluk bırakın:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
/* …CSS variables */
font: inherit;
letter-spacing: inherit;
line-height: 1.5;
border-radius: var(--_border-radius);
}
Düğmelerin stilini belirleme
Seçici ayarlaması
input[type="file"]
seçicisi girişin düğme parçası değil,
::file-selector-button
sanal öğesi, dolayısıyla input[type="file"]
öğesini kaldırdım
listeden:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
}
İmleç ve dokunma ayarlamaları
İlk olarak imlecin stilini pointer
stiline ayarlayacağım. Bu stil, düğmenin
etkileşimli bir hale getirmek için de kullanılır. Sonra şuna touch-action: manipulation
ekliyorum:
tıklamaların beklemesine ve potansiyel bir çift tıklamayı gözlemlemesine gerek kalmaz ve bu durum,
düğmeler daha hızlıdır:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
cursor: pointer;
touch-action: manipulation;
}
Renkler ve kenarlıklar
Sonra yazı tipi boyutunu, arka plan, metni ve kenarlık renklerini özelleştiriyorum. şu uyarlanabilir özel mülklerden oluşur:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
font-size: var(--_size, 1rem);
font-weight: 700;
background: var(--_bg);
color: var(--_text);
border: 2px solid var(--_border);
}
Gölgeler
Düğmelere bazı etkili teknikler uygulanmış. İlgili içeriği oluşturmak için kullanılan
text-shadow
açık ve koyu renge uyum sağlayabilir, düğmenin hoş ve ince bir görünümünü yaratır
üstünde güzel bir şekilde duruyor.
box-shadow
üç gölge atanmış. İlki olan --_shadow-2
, normal bir kutu gölgesidir.
İkinci gölge ise düğmenin göze çarpmasını sağlayan ve göze çarpmayan bir şey gibi görünür.
biraz kafa yormuş olabilir. Son gölge, başlangıçta üzerine gelindiğinde görünen vurgulamadır.
bir boyutu vardır, ancak daha sonra bir boyut verilir ve
gerçekten çok değerli.
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
box-shadow:
var(--_shadow-2),
var(--_shadow-depth),
0 0 0 var(--_highlight-size) var(--_highlight)
;
text-shadow: var(--_ink-shadow);
}
Düzen
Düğmeye bir flexbox düzeni verdim.
özellikle, içeriğine uyacak bir inline-flex
düzeni. Ortaya koyuluyorum.
altları dikey ve yatay olarak
center. Bu, simgelerin ve diğer
düğme öğelerini düzgün bir şekilde hizalayın.
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
}
Boşluk
Düğme aralığı için
Kardeşleri korumak için gap
ve mantıksal olarak yaygın
özellikleri'ni tıklayın
Boşluklar tüm metin düzenlerinde kullanılabilir.
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
gap: 1ch;
padding-block: var(--_padding-block);
padding-inline: var(--_padding-inline);
}
Dokunma ve fare kullanıcı deneyimi
Bir sonraki bölüm, çoğunlukla mobil cihazlardaki dokunmatik kullanıcılar içindir. İlk
mülk,
user-select
tüm kullanıcılar içindir; düğme metnini vurgulamayı önler. Bu çoğunlukla
bir düğmeye dokunulduğunda ve basılı tutulduğunda dokunmatik cihazlarda fark edilebilir
sistemin, düğme metnini vurgulaması.
Çoğunlukla bunun yerleşik düğmelerle ilgili kullanıcı deneyiminden
Bu yüzden user-select
ürününü "yok" olarak ayarlayarak ayarı devre dışı bırakıyorum. Vurgu renklerine dokunun
(-webkit-tap-highlight-color
)
ve işletim sistemi bağlam menüleri
(-webkit-touch-callout
)
genel ile uyumlu olmayan diğer çok web merkezli düğme özellikleridir
bu yüzden onları da kaldırıyorum.
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
Geçişler
Uyarlanabilir --_transition
değişkeni
transition özelliği:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
transition: var(--_transition);
}
Fareyle üzerine gelindiğinde, kullanıcı aktif bir şekilde basmıyorken gölge vurgusunu ayarlayın göze çarpan güzel bir odak görünümü verecek şekilde düğme:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
):where(:not(:active):hover) {
--_highlight-size: .5rem;
}
Odaklandıktan sonra, odaklamanın düğmeden uzaklaşmasını artırarak düğmenin içinden büyümüş görünen hoş bir odak görünümü:
:where(button, input):where(:not(:active)):focus-visible {
outline-offset: 5px;
}
Simgeler
İşleme simgeleri için seçicide doğrudan SVG için bir :where()
seçici bulunmaktadır.
alt öğeler veya data-icon
özel özelliğine sahip öğeler. Simge boyutu ayarlandı
satır içi ve blok mantıksal özellikleri kullanarak özel özellikle değiştirin. Çizgi rengi
emin olmak için
drop-shadow
text-shadow
ile eşleşecek şekilde ayarlayın. flex-shrink
, 0
olarak ayarlandığı için simge asla
sıkışık. Son olarak, çizgili simgeleri seçip bu stilleri buraya
fill: none
ve round
satır sınırı ve çizgi birleştirme sayısı:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
) > :where(svg, [data-icon]) {
block-size: var(--_icon-size);
inline-size: var(--_icon-size);
stroke: var(--_icon-color);
filter: drop-shadow(var(--_ink-shadow));
flex-shrink: 0;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
Gönder düğmelerini özelleştirme
Gönder düğmelerinin görünüşünde hafif bir tanıtım olmasını istiyordum ve Bunun için düğmelerin metin rengini vurgu rengi yapın:
:where(
[type="submit"],
form button:not([type],[disabled])
) {
--_text: var(--_accent);
}
Sıfırlama düğmelerini özelleştir
Sıfırlama düğmelerinin, kullanıcıları şu konuda uyaracak yerleşik uyarı işaretlerine sahip olmasını istedim: yıkıcı olabilecek davranışlarını belirlememize yardımcı olur. Açık temanın stilini de seçtim koyu temadan daha fazla kırmızı vurguya sahip düğme. Özelleştirme, arkadaki uygun açık veya koyu rengi değiştirdiğinizde, düğme stili güncelleyin:
:where([type="reset"]) {
--_border-light: hsl(0 100% 83%);
--_highlight-light: hsl(0 100% 89% / 20%);
--_text-light: hsl(0 80% 50%);
--_text-dark: hsl(0 100% 89%);
}
Odaktaki dış çizginin rengin de vurguyla eşleşmesinin daha iyi olacağını düşündüm.
kırmızı. Metin rengi, koyu kırmızıdan açık kırmızıya uyarlanır. Dış çizgi rengi yapıyorum
bunu anahtar kelime ile eşleştir
currentColor
:
:where([type="reset"]):focus-visible {
outline-color: currentColor;
}
Devre dışı bırakılan düğmeleri özelleştir
İşlem sırasında devre dışı bırakılan düğmelerin renk kontrastının düşük olması devre dışı bırakılmış düğmeyi daha az etkin görünecek şekilde sadeleştirmeyi deneyin. Her birini test ettim emin olmak için, HSL ışıklandırması değerini puanının iletilmesini kolaylaştırır.
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
)[disabled] {
--_bg: none;
--_text-light: hsl(210 7% 40%);
--_text-dark: hsl(210 11% 71%);
cursor: not-allowed;
box-shadow: var(--_shadow-1);
}
Dosya giriş düğmelerini özelleştirme
Dosya girişi düğmesi, bir aralık ve düğme için bir kapsayıcıdır. CSS şunları yapabilir:
iç içe yerleştirilmiş düğmenin stilini belirlemek için biraz
bahsedeceğim. Kapsayıcıya max-inline-size
izni verildi. Böylece, boyut şundan daha büyük olmayacaktır:
gerekir, inline-size: 100%
kendiliğinden küçülmeye ve sığmasına izin verir
daha küçük container'lar oluşturabilirsiniz. Arka plan rengi uyarlanabilir bir renge ayarlandı
diğer yüzeylerden daha koyu renkli olduğundan dosya seçici düğmesinin arkasına bakar.
:where(input[type="file"]) {
inline-size: 100%;
max-inline-size: max-content;
background-color: var(--_input-well);
}
Dosya seçici düğmesi ve giriş türü düğmeleri, özellikle
Tarayıcı tarafından sağlanıp sağlanmayan stilleri kaldırmak için appearance: none
diğer düğme stillerinin
üzerine yazılır.
:where(input[type="button"]),
:where(input[type="file"])::file-selector-button {
appearance: none;
}
Son olarak, yayılma metnini aktarmak için düğmenin inline-end
kısmına kenar boşluğu eklenir
oluşturarak yeni bir alan yaratabilirsiniz.
:where(input[type="file"])::file-selector-button {
margin-inline-end: var(--_padding-inline);
}
Özel koyu tema istisnaları
Daha yüksek kontrast için birincil işlem düğmelerine daha koyu bir arka plan verdim Böylece bunları biraz daha öne çıkarmış bir görünüm elde etmiş olursunuz.
@media (prefers-color-scheme: dark) {
:where(
[type="submit"],
[type="reset"],
[disabled],
form button:not([type="button"])
) {
--_bg: var(--_input-well);
}
}
Varyant oluşturma
Hem eğlenmek hem de pratik olması için birkaç için de geçerlidir. Birincil düğmelerin çoğuna benzer şekilde, varyantlardan biri çok canlı. görün. Başka bir varyant büyük. Son varyantta gradyan dolgulu bir simge bulunur.
Canlı düğme
Bu düğme stilini elde etmek için temel aksesuarların üzerine doğrudan mavi renkle yazdım. renk. Bu hızlı ve kolay olmakla birlikte uyarlanabilir özellikleri ve görünümleri kaldırır hem açık hem de koyu temalarda aynı olabilir.
.btn-custom {
--_bg: linear-gradient(hsl(228 94% 67%), hsl(228 81% 59%));
--_border: hsl(228 89% 63%);
--_text: hsl(228 89% 100%);
--_ink-shadow: 0 1px 0 hsl(228 57% 50%);
--_highlight: hsl(228 94% 67% / 20%);
}
Büyük düğme
Bu düğme stili, --_size
özel özelliği değiştirilerek elde edilir.
Dolgu ve diğer alan öğeleri bu boyuta göre hesaplanır ve zaman içinde
yeni boyutla orantılı olarak alırsınız.
.btn-large {
--_size: 1.5rem;
}
Simge düğmesi
Bu simge efektinin düğme stillerimizle bir ilgisi yoktur, ancak yalnızca birkaç CSS özelliğiyle bunu nasıl başaracağınızı ve düğmenin satır içi SVG olmayan simgeleri işler.
[data-icon="cloud"] {
--icon-cloud: url("https://api.iconify.design/mdi:apple-icloud.svg") center / contain no-repeat;
-webkit-mask: var(--icon-cloud);
mask: var(--icon-cloud);
background: linear-gradient(to bottom, var(--_accent-dark), var(--_accent-light));
}
Sonuç
Şimdi bunu nasıl yaptığımı öğrendiğinize göre siz nasıl ‽ 🙂
Gelin, yaklaşımlarımızı çeşitlendirelim ve web'de içerik geliştirmenin tüm yollarını öğrenelim.
Bir demo oluşturup beni tweet'le bağlantıları eklerim aşağıdaki topluluk remiksleri bölümüne gidin!
Topluluk remiksleri
Henüz burada görülecek bir şey yok.
Kaynaklar
- GitHub'da kaynak kodu