Set the opacity level for a <div> element: div { opacity: 0.5; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The opacity property sets the opacity level for an element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. […]
Make the flexible items wrap if necessary: div { display: -webkit-flex; /* Safari */ -webkit-flex-wrap: wrap; /* Safari 6.1+ */ display: flex; flex-wrap: wrap; } Try it Yourself » Definition and Usage The flex-wrap property specifies whether the flexible items should wrap or not. Note: If the elements are not flexible items, the flex-wrap property has no effect. Default value: nowrap Inherited: no […]
Make the flexible items display in reverse order, and wrap if necessary: div { display: -webkit-flex; /* Safari */ -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */ display: flex; flex-flow: row-reverse wrap; } Try it Yourself » Definition and Usage The flex-flow property is a shorthand property for the flex-direction and the flex-wrap properties. The flex-direction property specifies the direction of the flexible […]
Set the direction of the flexible items inside the <div> element in reverse order: div { display: -webkit-flex; /* Safari */ -webkit-flex-direction: row-reverse; /* Safari 6.1+ */ display: flex; flex-direction: row-reverse; } Try it Yourself » Definition and Usage The flex-direction property specifies the direction of the flexible items. Note: If the element is not a flexible item, the flex-direction property has no […]
Set the initial length of the second flex-item to 100 pixels: div:nth-of-type(2) { -webkit-flex-basis: 100px; /* Safari 6.1+ */ flex-basis: 100px; } Try it Yourself » Definition and Usage The flex-basis property specifies the initial length of a flexible item. Note: If the element is not a flexible item, the flex-basis property has no effect. Default value: auto Inherited: no […]
Let the second flex-item shrink three times more than the rest: /* Safari 6.1+ */ div:nth-of-type(2) { -webkit-flex-shrink: 3; }/* Standard syntax */ div:nth-of-type(2) { flex-shrink: 3; } Try it Yourself » Definition and Usage The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container. Note: If the element […]
Let the second flex-item grow three times wider than the rest: /* Safari 6.1+ */ div:nth-of-type(1) {-webkit-flex-grow: 1;} div:nth-of-type(2) {-webkit-flex-grow: 3;} div:nth-of-type(3) {-webkit-flex-grow: 1;}/* Standard syntax */ div:nth-of-type(1) {flex-grow: 1;} div:nth-of-type(2) {flex-grow: 3;} div:nth-of-type(3) {flex-grow: 1;} Try it Yourself » Definition and Usage The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container. Note: If the […]
Let all the flexible items be the same length, regardless of its content: #main div { -webkit-flex: 1; /* Safari 6.1+ */ -ms-flex: 1; /* IE 10 */ flex: 1; } Try it Yourself » Definition and Usage The flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties. The flex property sets the flexible length on flexible […]
Change all images to black and white (100% gray): img { -webkit-filter: grayscale(100%); /* Safari 6.0 – 9.0 */ filter: grayscale(100%); } Try it Yourself » Tip: More “Try it Yourself” examples below. Definition and Usage The filter property defines visual effects (like blur and saturation) to an element (often <img>). Default value: none Inherited: no Animatable: yes. Read about animatable Version: […]
Display no borders on empty cells in a table: table { empty-cells: hide; } Try it Yourself » Definition and Usage The empty-cells property sets whether or not to display borders on empty cells in a table. Note: This property has no effect if border-collapse is “collapse”. Default value: show Inherited: yes Animatable: no. Read about animatable Version: CSS2 JavaScript syntax: object.style.emptyCells=”hide” Try […]
Use of some different display values: p.ex1 {display: none;} p.ex2 {display: inline;} p.ex3 {display: block;} p.ex4 {display: inline-block;} Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The display property specifies the display behavior of an element. Note: Every element on a web page is a rectangular box. The CSS display property determines how that rectangular box behaves. Default value: […]
Set the text direction to “right-to-left”: p.rtl { direction: rtl; } Try it Yourself » Definition and Usage The direction property specifies the text direction/writing direction within a block-level element. Tip: Use this property together with the unicode-bidi property to set or return whether the text should be overridden to support multiple languages in the same document. Default value: ltr […]
CSS can generate a bunch of different mouse cursors: .alias {cursor: alias;} .all-scroll {cursor: all-scroll;} .auto {cursor: auto;} .cell {cursor: cell;} .context-menu {cursor: context-menu;} .col-resize {cursor: col-resize;} .copy {cursor: copy;} .crosshair {cursor: crosshair;} .default {cursor: default;} .e-resize {cursor: e-resize;} .ew-resize {cursor: ew-resize;} .grab {cursor: grab;} .grabbing {cursor: grabbing;} .help {cursor: help;} .move {cursor: move;} .n-resize {cursor: n-resize;} .ne-resize {cursor: ne-resize;} .nesw-resize {cursor: nesw-resize;} .ns-resize {cursor: ns-resize;} .nw-resize {cursor: nw-resize;} .nwse-resize {cursor: nwse-resize;} .no-drop {cursor: no-drop;} .none {cursor: none;} .not-allowed {cursor: not-allowed;} .pointer {cursor: pointer;} .progress {cursor: progress;} .row-resize {cursor: row-resize;} .s-resize {cursor: s-resize;} .se-resize {cursor: se-resize;} .sw-resize {cursor: sw-resize;} .text {cursor: text;} .url {cursor: url(myBall.cur),auto;} .w-resize {cursor: w-resize;} .wait {cursor: wait;} .zoom-in {cursor: zoom-in;} .zoom-out {cursor: zoom-out;} Try it Yourself » Definition and Usage The cursor property […]
Create a counter (“my-sec-counter”) and increase it by one for each occurrence of the <h2> selector: body { /* Set “my-sec-counter” to 0 */ counter-reset: my-sec-counter; }h2:before { /* Increment “my-sec-counter” by 1 */ counter-increment: my-sec-counter; content: “Section ” counter(my-sec-counter) “. “; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The counter-reset property creates […]
Create a counter (“my-sec-counter”) and increase it by one for each occurrence of the <h2> selector: body { /* Set “my-sec-counter” to 0 */ counter-reset: my-sec-counter; }h2:before { /* Increment “my-sec-counter” by 1 */ counter-increment: my-sec-counter; content: “Section ” counter(my-sec-counter) “. “; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The counter-increment property increases […]
content: The following example inserts the value of the href attribute in parenthesis after each <a> element: a:after { content: ” (” attr(href) “)”; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The content property is used with the :before and :after pseudo-elements, to insert generated content. Default value: normal Inherited: […]
Specify the minimum width for each css column, and the maximum number of columns: div { -webkit-columns: 100px 3; /* Chrome, Safari, Opera */ -moz-columns: 100px 3; /* Firefox */ columns: 100px 3; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The columns property is a shorthand property for the column-width and column-count properties. The […]
Specify that the column width should be 100px: div { -webkit-column-width: 100px; /* Chrome, Safari, Opera */ -moz-column-width: 100px; /* Firefox */ column-width: 100px; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The column-width property specifies the column width. The number of columns will be the minimum number of columns needed to show all the […]
Column Span: Let the <h2> element span across all columns: h2 { -webkit-column-span: all; /* Chrome, Safari, Opera */ column-span: all; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The column-span property specifies how many columns an element should span across. Default value: none Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript syntax: […]
Specify the style of the rule between columns: div { -webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */ -moz-column-rule-style: dotted; /* Firefox */ column-rule-style: dotted; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The column-rule-style property specifies the style of the rule between columns. Default value: none Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript syntax: […]
