Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
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%
);
}
}
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2023-10-25 (UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Falta la información que necesito"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Muy complicado o demasiados pasos"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Desactualizado"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problema de traducción"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problema con las muestras o los códigos"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Otro"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Fácil de comprender"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Resolvió mi problema"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Otro"
}]