Web UI

THE CSS NINJA — CSS Archive

Cursor

/* General */
.auto           { cursor: auto; }
.default        { cursor: default; }
.none           { cursor: none;/* Chrome 5, FF 3, Safari 5 */ }

/* Links & Status */
.context-menu   { cursor: context-menu;/* Chrome 1.0 (not on win), FF 1.5/Gecko 1.8 (not on win), IE 10.0, Opera 10.6, Safari 3.0 */ }
.help           { cursor: help;/* Chrome 1.0, FF 1.0, IE 6.0, Opera 7.x, Safari 1.2 */ }
.pointer        { cursor: pointer;/* Chrome 1.0, FF 1.0, IE 6.0, Opera 7.x, Safari 1.2 */ }
.progress       { cursor: progress;/* Chrome 1.0, FF 1.0, IE 6.0, Opera 7.x, Safari 1.2 */ }
.wait           { cursor: wait;/* Chrome 1.0, FF 1.0, IE 6.0, Opera 7.x, Safari 1.2 */ }

/* Selection */
.cell           { cursor: cell; }
.crosshair      { cursor: crosshair; }
.text           { cursor: text; }
.vertical-text  { cursor: vertical-text; }

/* Drag & Drop */
.alias      { cursor: alias; }
.copy       { cursor: copy; }
.move       { cursor: move; }
.no-drop    { cursor: no-drop; }
.not-allowed{ cursor: not-allowed; }
.grab {
    cursor: -webkit-grab;/* Chrome 1.0, Safari 4.0 */
    cursor: -moz-grab;/* FF 1.5, Gecko 1.8 */
    cursor: grab;/* FF 27 */
}
.grabbing {
    cursor: -webkit-grabbing;/* Chrome 1.0, Safari 4.0 */
    cursor: -moz-grabbing;/* FF 1.5, Gecko 1.8 */
    cursor: grabbing;/* FF 27 */
}

/* Zooming */
.zoom-in {
    cursor: -webkit-zoom-in;/* Chrome 1.0, Safari 3.0 */
    cursor: -moz-zoom-in;/* FF 1.0, Gecko 1.4 */
    cursor: zoom-in;/* FF 24.0, Opera 11.6 */
}
.zoom-out {
    cursor: -webkit-zoom-out;/* Chrome 1.0, Chrome Win 22.0, Safari 3.0 */
    cursor: -moz-zoom-out;/* FF 1.0, Gecko 1.4 */
    cursor: zoom-out;/* FF 24.0, Opera 11.6 */
}

/* Resizing & Scrolling */
.all-scroll     { cursor: all-scroll; }
.col-resize     { cursor: col-resize; }
.row-resize     { cursor: row-resize; }
.n-resize       { cursor: n-resize; }
.e-resize       { cursor: e-resize; }
.s-resize       { cursor: s-resize; }
.w-resize       { cursor: w-resize; }
.ns-resize      { cursor: ns-resize; }
.ew-resize      { cursor: ew-resize; }
.ne-resize      { cursor: ne-resize; }
.nw-resize      { cursor: nw-resize; }
.se-resize      { cursor: se-resize; }
.sw-resize      { cursor: sw-resize; }
.nesw-resize    { cursor: nesw-resize; }
.nwse-resize    { cursor: nwse-resize; }

.custom {
    cursor: url(images/my-cursor.png), auto;/* Chrome 1.0, FF 1.0, IE 4.0 (positioning not supported), Opera 7.0, Safari 1.2 */
}

/* Browser Specific */
.moz-zoom-in    { cursor: -moz-zoom-in; }
.moz-zoom-out   { cursor: -moz-zoom-out; }
.moz-grab       { cursor: -moz-grab; }
.moz-grabbing   { cursor: -moz-grabbing; }

.webkit-zoom-in { cursor: -webkit-zoom-in; }
.webkit-zoom-out{ cursor: -webkit-zoom-out; }
.webkit-grab    { cursor: -webkit-grab; }
.webkit-grabbing{ cursor: -webkit-grabbing; }

Custom Control

THE CSS NINJA — Custom radio and checkbox inputs using CSS

Collapsable UI

Accordion

Expression-Web-Tutorial.com — Accordion Menu Tutorial using HTML5 | demo - Uses #id:target psuedo-class.

Details

Tree Menus

THE CSS NINJA — Pure CSS collapsible tree menu

Modal Windows

THE CSS NINJA — Futurebox, lightbox without the javascript and target pseudo-class

Scrollbars

Removing Scrollbars

.no-scrollbars {
    -ms-overflow-style: none;/* IE 10+ */
    overflow: hidden;/* hides overflow content or use 'visible' which allows overflow content to escape it's container */
}
.no-scrollbars::-webkit-scrollbar {
    display: none;
}

Scrolling

THE CSS NINJA — A follow up to obtaining 60fps scrolling performance

UITableView

THE CSS NINJA — UITableView in JavaScript, list view with re-usable cells using flexbox