Repozytorium Web Developera

Właściwości CSS

Przydatne linki

Wyświetlanie, wymiary, nadmiar, miejsce i pozycja

Wyświetlanie display

Wyświetlanie display: grid - tylko IE10+

Właściwości: grid-columns, grid-rows, grid-column-span, grid-row i grid-column.

Wyświetlanie display: box/flex/flexbox

If you are looking at a blog post (or whatever) about Flexbox and you see display: box; or a property that is box-{*}, you are looking at the old 2009 version of Flexbox.

If you are looking at a blog post (or whatever) about Flexbox and you see display: flexbox; or the flex() function, you are looking at an awkward tweener phase in 2011.

If you are looking at a blog post (or whatever) about Flexbox and you see display: flex; and flex-{*} properties, you are looking at the current (as of this writing) specification.

Parent / container properties:

  • display: flex;
  • flex-direction: row | row-reverse | column | column-reverse;
  • flex-wrap: nowrap | wrap | wrap-reverse;
  • justify-content: flex-start | flex-end | center | space-between | space-around;
  • align-items: flex-start | flex-end | center | baseline | stretch;
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Children / items properties:
  • order: <integer>;
  • flex-grow: <number>; /* default 0 */
  • flex-shrink: <number>;
  • flex-basis: <length> | auto;
  • align-self: auto | flex-start | flex-end | center | baseline | stretch;
Best cheatsheet:

Wyświetlanie display: block/inline-block/inline

Wartość inline-block traktowana jest jak inline (jeśli mówimy o text-align itd.) z tym wyjątkiem, że przyjmuje określoną z góry szerokość i wysokość (block ma domyślnie 100% i nie mogą być umieszczane obok niego inne elementy w tym samym wierszu).

Wymiary i nadmiar

Maksymalne i minimalne wymiary

min-width min-height max-width max-height

Nadmiar overflow: visible/hidden/scroll/auto

Właściwość ta służy do ustalania co ma się dziać z elementami, które "wystają" poza swój kontener. Dla przykładu, jeśli p ma ustaloną wysokość, to właściwość overflow ustala co dzieje się z tekstem, który nie mieści się w obrębie danej wysokości.

Środkowanie w pionie i poziomie

Konieczne jest podanie wysokości dla dziecka.


.absolute-conter {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

Pozycja horyzontalna

Środkowanie w poziomie elementu o znanej szerokości względem rodzica

Dziecku należy nadać ustaloną szerokość, właściwość margin: 0 auto; oraz display: block;.

Brak ustalonej szerokości oznacza przypisanie parametru auto do właściwości width, co wiąże się z przypisaniem 0 w miejsce auto we właściwości margin dziecka (czyli elementu środkowanemu).

Środkowanie w poziomie elementu o nieznanej szerokości względem rodzica

Rodzicowi należy nadać parametr text-align: center, a samemu dziecku display: inline-block. Wtedy otrzymujemy efekt wyśrodkowywania względem rodzica bez użycia automatycznych marginesów (rozwiązanie dobre, jeśli nie wiemy jaką szerokość będzie miało dziecko). Niestety, text-align: center wpływa na wszystkich potomków rodzica. Szerokość dziecka nie musi być znana.

Środkowanie w poziomie elementu o nieznanej szerokości względem rodzica o dowolnej szerokości metodą table

Załóżmy że mamy znaczniki: div.outside oraz div.inside, który jest dzieckiem tego pierwszego. Aby wycentrować element klasy inside względem rodzica o dowolnej szerokości, należy elementowi inside nadać właściwości CSS display: table; i wtedy również margin: 0 auto;. Środkowanie tą metodą nie wpływa na text-align potomków, a szerokość dziecka nie musi być znana. Przykład zastosowania.

Pozycja wertykalna

Środkowanie w poziomie elementu o stałej wysokości metodą line-height

Wystarczy nadać dziecku właściwość line-height o wysokości elementu rodzica, np.:


text-align: center;
line-height: 300px;

Środkowanie w poziomie elementu o zmieniającej się wysokości metodą transform

Wystarczy nadać dziecku podane niżej właściwości:


position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

Środkowanie w poziomie elementu o zmieniającej się wysokości

Należy rodzicowi ustalić display na table-cell, np.:


display: table-cell;
vertical-align: middle;
text-align: center;

Pozycjonowanie pseudoelementów :before i :after

Pseudo-elements are treated as descendants of their associated element. To position a pseudo-element below its parent, you have to create a new stacking context to change the default stacking order.
Positioning the pseudo-element (absolute) and assigning a z-index value other than “auto” creates the new stacking context.
However, if you have a normal parent div with a background, the lower element will be hidden. In this case, give the parent relative positioning and a z-index of 1. See: jsbin.
Source

Elementy opracowywane

Prefiksy elementów opracowywanych

-moz- -webkit- -ms- -o-

Przykłady elementów

border-image, transform, transform-origin, translate, transition

Migotanie -webkit-font-smoothing: antialiased oraz -webkit-text-stroke: 1px rgba(0,0,0,0.1)

zabezpiecza tekst przed migotaniem: link, jak i poniżej 37 wersji Chrome pomaga w zmiękczaniu tekstu (szczególnie text-stroke).

Przewijanie scroll-behavior: smooth

pozwala na (automatyczne) łagodne przewijanie strony podczas przemieszczania się między sekcjami na podstronie

Podstawy

Linkowanie różnych zestawów styli


<link rel="stylesheet" media="all" href="generalny.css" />
<link rel="stylesheet" media="screen,projection" href="kolorowy.css" />
<link rel="stylesheet" media="print" href="dodruku.css" />

Obrazy

Filtry

Refleksje

Gradienty

Typy gradientów

linear-gradient radial-gradient repeating-linear-gradient repeating-radial-gradient

Przykład użycia gradientów w CSS3

Tworzenie wzorów za pomocą gradientów: http://lea.verou.me/css3patterns/

Transformacje i przejścia

transform

scale, translate, rotate, skew, matrix, transform-origin (% %)


transform: rotate(-90deg); //obrót o 90 stopni
transform-origin: left bottom; //zmiana punktu zaczepu, domyślnie środek
transform: skew(10deg); //pochylenie osi Y
transform: skew(-10deg,30deg); //pochylenie osi Y i X
transform: rotate (20deg);

transform: matrix

Generator ułatwiający korzystanie z transform: matrix: http://useragentman.com/matrix/ oraz illustrator krzywej Bezier: http://cubic-bezier.com/#.17,.67,.83,.67.

transition dla wszystkich elementów

Efekt łagodnego przejścia stanu dla wszystkich elementów.


* {
	transition: all 1s;
}

Efekty 3D


-webkit-perspective: 800;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
-webkit-transform: rotateY(180deg);
-webkit-backface-visibility: hidden;

Tekst

column-count, column-gap, column-rule, column-width

do dzielenia tekstu na kolumny

text-transform

normal (zwykły), uppercase (duże litery), lowercase (małe litery), capitalize (zmiana pierwszych liter)

letter-spacing

odstęp między literami

word-spacing

odstęp między wyrazami

line-height

wysokość linii

text-decoration

none, line-throught, overline, underline

text-indent

wcięcie akapitowe

text-overflow: ellipsis;

dodawanie kropek jeśli tekst jest po części ukryty


.ellipsis {
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}