Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
HTML
<h1><b>HSL</b> is <u>awesome.</u></h1>
CSS
:root {
color-scheme: dark light;
/* destructure brand channels */
--hue: 200; /* change me!! */
--saturation: 100%;
--lightness: 50%;
/* build colors with props */
--brand: hsl(
var(--hue)
var(--saturation)
var(--lightness)
);
/* very dark brand blue */
--text: hsl(
var(--hue)
var(--saturation)
10% /* lower is darker */
);
/* very bright brand white */
--surface: hsl(
var(--hue)
calc(var(--saturation) / 2)
95% /* higher is lighter */
);
}
h1 {
font-size: 10vmin;
font-weight: 300;
}
b {
color: hsl(
var(--hue)
var(--saturation)
30%
);
}
u {
text-decoration-color: var(--brand);
}
html {
block-size: 100%;
inline-size: 100%;
}
body {
color: var(--text);
background: var(--surface);
min-block-size: 100%;
min-inline-size: 100%;
margin: 0;
box-sizing: border-box;
display: grid;
place-content: center;
font-family: system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
/* just tweak the lightness */
/* maybe desaturate too */
:root {
--text: hsl(
var(--hue)
calc(var(--saturation) / 2)
85%
);
--surface: hsl(
var(--hue)
var(--saturation)
5%
);
}
b {
color: hsl(
var(--hue)
var(--saturation)
75%
);
}
}
Aksi belirtilmediği sürece bu sayfanın içeriği Creative Commons Atıf 4.0 Lisansı altında ve kod örnekleri Apache 2.0 Lisansı altında lisanslanmıştır. Ayrıntılı bilgi için Google Developers Site Politikaları'na göz atın. Java, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2023-10-25 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"İhtiyacım olan bilgiler yok"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Çok karmaşık / çok fazla adım var"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Güncel değil"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Çeviri sorunu"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Örnek veya kod sorunu"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Diğer"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Anlaması kolay"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Sorunumu çözdü"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Diğer"
}]