Właściwości CSS
Przydatne linki
- Zasady tworzenia spójnych, zgodnych z regułami języka deklaracji CSS
- CSS Guidelines - High-level advice and guidelines for writing sane, manageable, scalable CSS
- Airbnb CSS / Sass Style Guide
- 3.14 things I didn’t know about CSS
Jednostki
Metoda calc
W CSS możliwe jest obliczanie wartości za pomocą funkcji calc
: padding-bottom: calc(56.25% - 25px);
Wyświetlanie, wymiary, nadmiar, miejsce i pozycja
Wyświetlanie display
display: contents
display: contents
causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. Source
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;
- to align horizontally
align-items: flex-start | flex-end | center | baseline | stretch;
- to align vertically if
flex-direction
isrow
- to align vertically if
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
- to align vertically if
flex-direction
iscolumn
- to align vertically if
order: <integer>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>;
flex-basis: <length> | auto;
align-self: auto | flex-start | flex-end | center | baseline | stretch;
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;
}
Center a large image of unknown size inside a smaller div with overflow hidden
Below solution is for horizontal align. To align it vertically too, you can do a display: table-cell;
to your <div> an then vertical-align: middle;
but it's not a good practice beacause your <div> is not a table.
.container {
position: relative;
}
.container img {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
Or by using flex:
.container {
display: flex;
justify-content: center;
height: 400px; /* or other desired height */
overflow: hidden;
}
.container img {
flex: none; /* keep aspect ratio */
}
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 img
-
object-fit
- zmienia proporcje obrazka, dopasowując je do kontenera -
object-position
- zmienia pozycje, ma zastosowanie zobject-fit
-
mask-image
-
filter: none | blur(px) | brightness(%) | contrast(%) | drop-shadow() | grayscale(%) | hue-rotate(deg) | invert(%) | opacity(%) | saturate(%) | sepia(%) | url()
-
Animation with filter
img { animation: haunted 3s infinite; } @keyframes haunted { 0% { filter: brightness(20%); } 48% { filter: brightness(20%); } 50% { filter: sepia(1) contrast(2) brightness(200%); } .... 96% { filter: brightness(400%); } }
-
Animation with filter
-
-webkit-box-reflect: below;
,-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
-
repeating-linear-gradient(45deg, khaki 0, khaki 3px, tan 4px, tan 7px, khaki 8px);
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: scaleY(1.5); // powiększenie
transform: translateY(70px); // przesunięcie
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 właściwości wszystkich elementów
Efekt łagodnego przejścia stanu dla wszystkich elementów.
* {
transition: all 1s;
}
dla wybranych właściwości elementu
.element {
transition: opacity 250ms ease-in-out, transform 290ms ease-in-out;
}
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;
}
Element video
video::-webkit-media-controls-play-button { display: none; }
video::-webkit-media-controls-volume-slider { display: none; }
video::-webkit-media-controls-mute-button { display: none; }
video::-webkit-media-controls-timeline { display: none; }
video::-webkit-media-controls-current-time-display { display: none; }