ciekawe w css #2

filters

dostępne masz opcje:

• blur() – podajesz wartość w pixelach blur(4px) im więskza wartość tym rozmycie mocniejsze
• brightness() – brightness(1.1) zwiększa jasność o 10%, brightness(0.9) zmniejsza jasność o 10%, brightness(1) – pozostaje bez zmian
• contrast() – contrast(1.1) zwiększa kontrast o 10%, contrast(0.9) zmniejsza kontrast o 10%, contrast(1) – pozostaje bez zmian
• drop-shadow() – definiujesz 3-4 wartości, drop-shadow(N1px N2px N3px #color) lub drop-shadow(#color N1px N2px N3px), gdzie:
  • N1 – offset-x – (wyrażone w px) to przesunięcie w osi X, czyli w poziomie, wartości ujemne przesuną cień poza lewą krawędź, nie podanie wartości nadaje jej wartość 0
  • N2 – offset-y – (wyrażone w px) – przesunięcie w osi Y, czyli w pionie, wartości ujemne przesuną cień ponad górną krawędź, nie podanie wartości nadaje jej wartość 0
  • N3 – blur-radius – (wyrażone w px) – wartość rozmycia cienia, 0 da ostre krawędzie, im większa wartość tym większe rozmycie, wartości ujemne nie są dozwolone, nie podanie wartości nadaje jej wartość 0
  • #color – wartość koloru jaki ma mieć cień, możesz tu skorzystać z rgba czyli nadać również przeźroczystość
  • Uwaga: ta funkcja jest podobna do właściwości box-shadow, która tworzy prostokątny cień za całym polem elementu, natomiast funkcja drop-shadow() tworzy cień zgodny z kształtem (kanał alfa) samego obrazu
• grayscale()
• hue-rotation()
• invert()
• opacity()
• saturate()
• sepia()

jak używać:

do elementu czy class w css dodajemy: filter: contrast(1.1) brightness(0.8);

blend-mode

dzięki tej funkcji możesz blendować element z elementami pod nim

dla tła, kiedy masz zdefiniowany background-color i background-images możesz wykorzystać: background-blend-mode: multiply

Wartości jakie możesz użyć:

• color
• color-burn
• color-dodge
• darken
• difference
• exclusion
• hard-light
• hue
• lighten
• luminosity
• multiply
• normal
• overlay
• saturation
• screen
• soft-light

clip-path

w dużym uproszczeniu, clip-path pozwala wyciąć wskazany kształt.

• clip-path: circle(50% at 50% 50%) – koło o promieniu 50% szerokości, środku w centrum
• clip-path: ellipse(25% 40% at 50% 50%) – elipsa o środku w centrum, jednym promieniu równym 25% szerokości i drugim równym 40% wysokości
• clip-path: polygon(50% 0%, 0% 100%, 100% 100%) – kształt wielokąta, w tym przypadku trójkąt
• clip-path: inset(5% 12% 15% 10% round 5% 20% 0 10%); – ten kształt pozwala na dodanie zaokrągleń, podobnie jak border-radius, pierwsze jest górne-lewe, potem górne-prawe, dolne-lewe, dolne-prawe,
• clip-path: url(#shape) – tu podajemy id kształtu zapisanego w svg

Generator wartości: css-clip-path-generator

clip-path: url(#shape)

Tutaj, w kodzie strony zapisujesz plik svg z 0 wymiarami oraz podanym path w def (definition) wtedy taki svg nie jest renderowany ale możesz odwołać się do jego kształtu przez nadane id.

<svg height="0" width="0">
    <defs>
        <clipPath id="splash">
            <path d="..."/>
        </clipPath>
    </defs>
</svg>

mask-image

Pozwala na pokazywanie/ukrywanie wybranych części grafiki.

• mask-image: url(’image/path/pic.img ’)
• mask-size: contain; – aby wielkość maski odpowiadała wielkości elementu na jaki ją nakładamy, lub możesz podać konkretny wymiar w px
• mask-repeat: no-repeat; – kształt wycinany jest tylko raz

Maskę można podpiąć pod plik z różnym poziomem przeźroczystości co pozwala na osiągnięcie ciekawszych efektów.

background-attachement: fixed

text-stroke

ciekawy efekt nałożenia obrys (kontur) na tekst, jeszcze w nie we wszystkich wersjach przeglądarek wspierany -> check caniuse

• -webkit-text-stroke: 2px blue; – podajesz grubość i kolor
• color: transparent; – sam obrys, bez wypełnienia

W przeglądarkach, które jeszcze nie obsługują text-stroke możesz użyć text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

filter: drop-shadow

Warto pamiętać by przy nie typowych kształtach używać filter: drop-shadow(2px 2px 3px rgba(0,0,0, .3) zamiast box-shadow, dzięki temu uzyskujemy cień taki jak element a nie prostokąt.

character unit: ch

reprezentuje szerokość litery O w wybranym foncie. Idealne, kiedy zależy ci na określeniu szerokości tekstu równej konkretnej ilości znaków poprzez max-width: 10ch.

:first-letter

pseudoelement pozwalający na nadanie odmiennych styli pierwszej literze paragrafu.

Pamiętaj by dodać float: left; inaczej większa pierwsza litera będzie oddzielać pierwsza linię tekstu od reszty tekstu.

line-clamp

pozwala ograniczyć wysokość bloku tekstu do wskazanej ilości linii tekstu, oraz dodaje trzykropek na końcu tekstu by było widomo że jest jest więcej treści.

Działa tylko w zestawieniu z właściwością display: -webkit-box; lub display: -webkit-inline-box; oraz nalezy dodać: -webkit-box-orient: vertical oraz overflow: hidden;

-webkit-line-clamp: 3;

css counters

1. inicializujesz licznik od ustawienia wartości counter-reset(name) – do głównego kontenera w jakim ma odbywać się liczenie
2. następnie dodajesz do elementów, które mają być numerowane counter-increment: (name) – dzięki temu możesz zwiększać lub pomniejszać wartość
3. do wyświetlenia wartości używasz content: counters(name)

kiedy masz zdefiniowana listę numeryczną czyli ol nie potrzebujesz podawać counter-reset(name) do ol, wystarczy ze podasz counter-increment: name;

truncating text

pozwala zachować tylko pierwsza linię tekstu zakończoną trzykropkiem, tu potrzebujesz zdefiniować:

• white-space: no-wrap;
• overflow: hidden;
• text-overflow: ellipsis; – text-overflow działa tylko wtedy kiedy kontener ma ustawione overflow na hidden, scroll lub auto, a white-space ma wartość: no-wrap

::selection

::selection – odwołuje się do wszystkich zaznaczeń, p::selection – zaznaczenia akapitów tekstu, dzięki temu możesz zdefiniować osobne style dla różnych elementów. Określasz tu:

• kolor tła, background: – niestety nie działa tu własność background-image
• kolor tekstu, color:
• styl tekstu, text-decoration:
• cień, text-shadow:
• oraz -webkit-text-stroke-color, -webkit-text-fill-color i -webkit-text-stroke-width

definiowanie dla różnych przegladarek:

• ::-moz-selection – dla Firefox

pie chart – conic-gradient

W prosty sposób możesz użyć conic-gradient oraz border-radius: 50% by zaprezentować wykres kołowy.

Użycie: background: conic-gradient(#8b22ff 0% 25%, #ffc33b 25% 56%, #21f3d6 56% 100%); border-radius: 50%;

<wbr>

to akurat nie właściwość w css ale html tag – work break opportunity, pozwala na wybranie miejsca złamania wyrazu kiedy nie mieści się w szerokości swojego kontenera.

object-fit

ta właściwość css definiuje jak zawartość <img> lub <video> powinna się dostosowywać by wypełnić kontener. Określ pierw wysokość i szerokość kontenera. Możliwe wartości to:

• cover – rozciąga do pełnej szerokości zachowując proporcje
• fill – rozciąga obraz tak by pokrył cały kontener, żadnych pustych przestrzeni
• contain – dopasowuje tak by cały obraz mieścił się w kontenerze, co zazwyczaj dodaje puste przestrzenie

 

column count

adjacent sibling combinator

general sibling combinator