Repozytorium Web Developera

Archiwum z lat 2013-2018, treści mogą być nieaktualne.

Właściwości CSS

Przydatne linki

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 is row
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    • to align vertically if flex-direction is column
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;
}

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 z object-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%);
        }
      }
                      
  • -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; }