CSS Colors Colors in CSS can be specified by the following methods: Hexadecimal colors RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names Hexadecimal Colors Hexadecimal color values are supported in all major browsers. A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify […]
Set different background property in one declaration: body { background: lightblue url(“img_tree.gif”) no-repeat fixed center; } Try it Yourself » Definition and Usage The background shorthand property sets all the background properties in one declaration. The properties that can be set, are: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment. It does not matter if one […]
Example Hide and show the back face of two rotated <div> elements: #div1 { backface-visibility: hidden; } #div2 { backface-visibility: visible; } Try it Yourself » Definition and Usage The backface-visibility property defines whether or not the back face of an element should be visible when facing the user. The back face of an element is a mirror image […]
Example Pause an animation: div { animation-play-state: paused; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The animation-play-state property specifies whether the animation is running or paused. Note: Use this property in a JavaScript to pause an animation in the middle of a cycle. Default value: running Inherited: no Animatable: no. Read about animatable […]
Example Let the <div> element retain the style values from the last keyframe when the animation ends: div { animation-fill-mode: forwards; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or […]
Example Play the animation forwards first, then backwards: div { animation-direction: alternate; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The animation-direction property defines whether an animation should be played forwards, backwards or in alternate cycles. Default value: normal Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript syntax: object.style.animationDirection=”reverse” Try it CSS […]
Example Binding an animation to a <div> element, using the shorthand property: div { animation: mymove 5s infinite; } Try it Yourself » Definition and Usage The animation property is a shorthand property for eight of the animation properties: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state Note: Always specify the animation-duration property, otherwise the duration is 0, […]
Example Play the animation two times: div { animation-iteration-count: 2; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The animation-iteration-count property specifies the number of times an animation should be played. Default value: 1 Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript syntax: object.style.animationIterationCount=”infinite” Try it CSS Syntax animation-iteration-count: number|infinite|initial|inherit; Property Values Value […]
Example Start the animation after 2 seconds: div { animation-delay: 2s; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The animation-delay property specifies a delay for the start of an animation. The animation-delay value is defined in seconds (s) or milliseconds (ms). Default value: 0s Inherited: no Animatable: no. Read about animatable Version: […]
Example Play an animation with the same speed from beginning to end: div { animation-timing-function: linear; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The animation-timing-function specifies the speed curve of an animation. The speed curve defines the TIME an animation uses to change from one set of CSS styles to […]
Example Specify that the animation should complete one cycle in 3 seconds: div { animation-duration: 3s; } Try it Yourself » Definition and Usage The animation-duration property defines how long an animation should take to complete one cycle. Default value: 0 Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript syntax: object.style.animationDuration=”3s”Try it CSS Syntax animation-duration: time|initial|inherit; Property Values […]
Example Specify a name for the @keyframes animation: div { animation-name: mymove; } Try it Yourself » Definition and Usage The animation-name property specifies a name for the @keyframes animation. Default value: none Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript syntax: object.style.animationName=”myNEWmove”Try it CSS Syntax animation-name: keyframename|none|initial|inherit; Property Values Value Description keyframename Specifies the name of the […]
Definition and Usage Some CSS properties are animatable, meaning that they can be used in animations and transitions. Animatable properties can change gradually from one value to another, like size, numbers, percentage and color. Example Animate the background-color from red to blue: /* Code for old Chrome, Safari and Opera */ @-webkit-keyframes mymove { from {background-color: red;} to {background-color: blue;} }/* […]
CSS inherit Keyword | CSS References Example Set the text-color for <span> elements to blue, except those inside elements with class=”extra”: span { color: blue; }.extra span { color: inherit; } Try it Yourself » Definition and Usage The inherit keyword specifies that a property should inherit its value from its parent element. The inherit keyword can be used […]
CSS initial Keyword Example Set the text color of the <div> element to red, but keep the initial color for <h1> elements: div { color: red; }h1 { color: initial; } Try it Yourself » Definition and Usage The initial keyword is used to set a CSS property to its default value. The initial keyword can be used for […]
CSS all Property | CSS References Example Change all the properties applied to the element or the element’s parent to their initial value: div { background-color: yellow; color: red; all: initial; } Try it Yourself » Definition and Usage The all property resets all properties, apart from unicode-bidi and direction, to their initial or inherited value. Default value: none […]
CSS align-self Property | CSS References Example Center the alignments for one of the items inside a flexible element: #myBlueDiv { -webkit-align-self: center; /* Safari 7.0+ */ align-self: center; } Try it Yourself » Definition and Usage The align-self property specifies the alignment for the selected item inside the flexible container. Note: The align-self property overrides the flexible container’s align-items […]
CSS align-items Property | CSS Ref Example Center the alignments for all the items of the flexible <div> element: div { display: -webkit-flex; /* Safari */ -webkit-align-items: center; /* Safari 7.0+ */ display: flex; align-items: center; } Try it Yourself » Definition and Usage The align-items property specifies the default alignment for items inside the flexible container. Tip: Use the align-self property of each item […]
align-content Property | CSS REf Example Pack lines toward the center of the flex container: div { width: 70px; height: 300px; border: 1px solid #c3c3c3; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center; } Try it Yourself » Definition and Usage The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex […]
