Interfejs użytkownika CSS3

Plansza interaktywna marzec 2018

URL:
http://www.plotkarka.eu/Pi/css3-ui/
Autor:
Radosław Kowaluk

Rozszerzenie Box Model

Styl obliczania wielkości elementu CSS3
box-sizing:
content-box; border-box;

box-sizing: content-box;

box-sizing: border-box;

Obrys

Styl obrysu
outline-style:
none; hidden; dashed; groove; solid;

none;

hidden;

dashed;

groove;

solid;

dotted; double; ridge; inset; outset;

dotted;

double;

ridge;

inset;

outset;

Kolor obrysu
outline-color:
color

np. outline-color: gray;

Wymiary elementu

Szerokość obrysu
outline-width:
thin; medium; thick; length

thin

medium

thick

np. 2px;

Obrys
outline:
outline-width || outline-style || outline-color

np. outline: 5px ridge;

np. outline: ridge silver;

np. outline: 5px ridge silver;

Odstęp obrysu CSS3
outline-offset:
length

np. outline-offset: 10px;

np. outline-offset: -10px;

Obrys i obramowanie

Zmiana rozmiaru i przepełnienia tekstu

Styl przepełnienia tekstu CSS3
text-overflow:
clip; {1,2}ellipsis; {1,2}string {1,2} np. " (⋯) ";

Lorem ipsum dolor sit amet,

Lorem ipsum dolor sit amet,

Lorem ipsum dolor sit amet,

Zmiana rozmiaru elementu CSS3
resize:
none; both; horizontal; vertical;

Mysz i klawiatura

Kolor punktu wstawiania CSS3
caret-color:
auto; color np. red;

Zmiana rozmiaru elementu

Kursory
cursor:
uri auto; crosshair; default; pointer; move;
text; wait; progress; e-resize; ne-resize; nw-resize;
n-resize; se-resize; sw-resize; s-resize; w-resize; help;
grab; * grabbing; * context-menu; * cell; * vertical-text; * alias; *
copy; * no-drop; * not-allowed; * ew-resize; * ns-resize; * nesw-resize; *
nwse-resize; * col-resize; * row-resize; * all-scroll; * zoom-in; * zoom-out; *

*) - CSS3

Typy plików kursora: .cur, .png, .gif, .jpg, .svg, .ani, …

Kursory