środa, 2024-01-03

CSS: Własności związane z kolorem

Kaskadowe arkusze stylów dostarczają wielu możliwości modyfikacji koloru w różnych kontekstach. Własności te mogą zapewnić szeroką gamę efektów wizualnych, a odpowiednio dobrana kolorystyka pozytywnie wpływa na doświadczenie użytkownika.

Najpopularniejsze własności CSS związane z kolorem

color: Określa kolor tekstu elementu.

p {
    color: blue;
}

background-color: Definiuje kolor tła elementu.

div {
    background-color: #ff5733;
}

border-color: Ustawia kolor obramowania elementu.

.box {
    border: 2px solid;
    border-color: rgba(255, 87, 51, 0.6);
}

outline-color: Określa kolor zewnętrznego konturu wokół elementu.

input:focus {
    outline-color: green;
}

fill: Stosowany w SVG do definiowania koloru wypełnienia.

svg path {
    fill: red;
}

stroke: Stosowany w SVG do definiowania koloru linii (konturu).

svg circle {
    stroke: blue;
}

text-shadow: Dodaje cień o określonym wyglądzie do tekstu.

h1 {
    text-shadow: 2px 2px 4px #000000;
}

box-shadow: Dodaje cień o określonym wyglądzie do elementu.

.box {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

background-image: Gradienty (liniowe, radialne) mogą być używane do tworzenia tła z wieloma kolorami.

.gradient-background {
    background-image: linear-gradient(to right, red , yellow);
}

filter: Nie jest to bezpośrednia manipulacja kolorem, jednak filtry CSS (jak sepia, saturate) mogą wpływać na kolory.

 img {
     filter: sepia(60%);
 }