Set the padding for all four sides of a <p> element to 35 pixels: p { padding: 35px; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage An element’s padding is the space between its content and its border. The padding property is a shorthand property for the padding-top, padding-right, padding-bottom, and […]
Make <h2> elements invisible: h2 { visibility: hidden; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The visibility property specifies whether or not an element is visible. Tip: Even invisible elements take up space on the page. Use the display property to create invisible elements that do not take up space! Default value: visible […]
Clip the top/bottom edges of the content inside the <div> element – if it overflows the element’s content area: div { overflow-y: hidden; } Try it Yourself » Definition and Usage The overflow-y property specifies what to do with the top/bottom edges of the content – if it overflows the element’s content area. Tip: Use the overflow-x property to determine […]
Show different overflow-x property values: div.ex1 { overflow-x: scroll; }div.ex2 { overflow-x: hidden; }div.ex3 { overflow-x: auto; } div.ex4 { overflow-x: visible; } Try it Yourself » Definition and Usage The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges. Tip: Use the overflow-y property […]
Show different overflow property values: div.ex1 { overflow: scroll; }div.ex2 { overflow: hidden; } div.ex3 { overflow: auto; } div.ex4 { overflow: visible; } Try it Yourself » Definition and Usage The overflow property specifies what should happen if content overflows an element’s box. This property specifies whether to clip content or to add scrollbars when an element’s content is too big […]
Hover over a <div> element to gradually change the width from 100px to 300px: div { width: 100px; transition: width 2s; }div:hover { width: 300px; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The transition property is a shorthand property for the four transition properties: transition-property, transition-duration, transition-timing-function, and transition-delay. Note: Always specify the transition-duration […]
Wait 2 seconds before the transition effect starts: div { transition-delay: 2s; } Try it Yourself » Definition and Usage The transition-delay property specifies when the transition effect will start. The transition-delay value is defined in seconds (s) or milliseconds (ms). Default value: 0s Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript syntax: object.style.transitionDelay=”2s” Try it CSS Syntax […]
A transition effect with variable speed from start to end: div { width: 100px; height: 100px; background: red; transition: width 2s; transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); } Try it Yourself » Definition and Usage The cubic-bezier() function defines a Cubic Bezier curve. A Cubic Bezier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the […]
A transition effect with the same speed from start to end: div { transition-timing-function: linear; } Try it Yourself » Definition and Usage The transition-timing-function property specifies the speed curve of the transition effect. This property allows a transition effect to change speed over its duration. Default value: ease Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript […]
Let the transition effect last for 5 seconds: div { transition-duration: 5s; } Try it Yourself » Definition and Usage The transition-duration property specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete. Default value: 0s Inherited: no Animatable: no. Read about animatable Version: CSS3 JavaScript syntax: object.style.transitionDuration=”1s”Try it CSS Syntax transition-duration: time|initial|inherit; Property Values Value […]
Hover over a <div> element, and change the width with a smooth transition effect: div { transition-property: width; } div:hover { width: 300px; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the […]
Set a 3D element’s base placement: div { -webkit-perspective: 150px; /* Safari 4-8 */ -webkit-perspective-origin: 10% 10%; /* Safari 4-8 */ perspective: 150px; perspective-origin: 10% 10%; } Try it Yourself » Definition and Usage The perspective-origin property defines where a 3D element is based in the x- and the y-axis. This property allows you to change the bottom position of 3D elements. […]
Set the perspective from where an element is viewed: div { -webkit-perspective: 500px; /* Safari 4-8 */ perspective: 500px; } Try it Yourself » Definition and Usage The perspective property defines how many pixels a 3D element is placed from the view. This property allows you to change the perspective on how 3D elements are viewed. When defining the […]
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 of […]
Set the maximum width of a <p> element: p { max-width: 100px; } Try it Yourself » Definition and Usage The max-width property is used to set the maximum width of an element. This prevents the value of the width property from becoming larger than max-width. Note: The value of the max-width property overrides width. Default value: none Inherited: […]
Set the minimum width of a <p> element: p { min-width: 150px; } Try it Yourself » Definition and Usage The min-width property is used to set the minimum width of an element. This prevents the value of the width property from becoming smaller than min-width. Note: The value of the min-width property overrides both max-width and width. Default value: 0 […]
Set the height and width of a <p> element: p.ex { height: 100px; width: 100px; } Try it Yourself » More “Try it Yourself” examples below. Definition and Usage The width property sets the width of an element. Note: The width property does not include padding, borders, or margins; it sets the width of the area inside the padding, […]
Set the top margin for a <p> element: p { margin-top: 2cm; } Try it Yourself » Definition and Usage The margin-top property sets the top margin of an element. Note: Negative values are allowed. Default value: 0 Inherited: no Animatable: yes, see individual properties. Read about animatable – Try it Version: CSS1 JavaScript syntax: object.style.marginTop=”100px” Try it CSS Syntax margin-top: length|auto|initial|inherit; Property Values […]
Set the right margin for a <p> element: p { margin-right: 2cm; } Try it Yourself » Definition and Usage The margin-right property sets the right margin of an element. Note: Negative values are allowed. Default value: 0 Inherited: no Animatable: yes, see individual properties. Read about animatable – Try it Version: CSS1 JavaScript syntax: object.style.marginRight=”100px” Try it CSS Syntax margin-right: length|auto|initial|inherit; Property Values […]
Set the left margin for a <p> element: p { margin-left: 2cm; } Try it Yourself » Definition and Usage The margin-left property sets the left margin of an element. Note: Negative values are allowed. Default value: 0 Inherited: no Animatable: yes, see individual properties. Read about animatable – Try it Version: CSS1 JavaScript syntax: object.style.marginLeft=”100px” Try it CSS Syntax margin-left: length|auto|initial|inherit; Property Values Value […]
