Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.text-container { width: 300px; margin: 20px; font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; orphans: 2; }The CSS 'orphans' property controls the minimum number of lines that must be shown at the bottom of a block container before it can be broken up. It helps prevent single lines from appearing at the top or bottom of a page or column, improving the overall readability of text. Setting 'orphans' to a value of 2 ensures that at least two lines of a paragraph are displayed together, avoiding the appearance of a lonely line at the end of a block.
.container {
display: flex;
justify-content: space-around;
width: 100%;
height: 100vh;
background-color: #f0f0f0;
}
.item {
background-color: #4CAF50;
color: white;
padding: 20px;
margin: 10px;
border-radius: 5px;
text-align: center;
}
.item1 {
order: 2;
}
.item2 {
order: 1;
}
.item3 {
order: 3;
}The 'order' property in CSS is used to control the order in which flex items appear within a flex container. Items with a lower order value will appear before items with a higher order value, allowing for dynamic rearrangement of elements without changing the HTML structure.
.container { background-color: #4CAF50; padding: 20px; text-align: center; }
.title { color: white; }
.description { opacity: 0.5; color: white; font-size: 18px; }The CSS 'opacity' property is used to control the transparency level of an element. It accepts values between 0.0 (completely transparent) and 1.0 (completely opaque). This property can create visually appealing effects such as overlays or fading elements in and out.
.container { width: 200px; height: 200px; position: relative; overflow: hidden; }
.box {
width: 50px;
height: 50px;
background-color: #3498db;
position: absolute;
animation: move 4s infinite;
offset-path: path('M 0 0 Q 100 200 200 0');
offset-rotate: auto;
}
@keyframes move {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}The 'offset-rotate' CSS property is used to apply a rotation transformation to an element in the context of a CSS offset path. This property is particularly useful when animating elements along a path, allowing for dynamic and visually appealing effects. By specifying an angle, you can control the rotation of the element as it moves along its defined path.
.container { position: relative; width: 300px; height: 300px; border: 2px solid #000; } .box { position: absolute; width: 100px; height: 100px; background-color: coral; offset-position: 50px 50px; transform: translate(50px, 50px); }The 'offset-position' property in CSS defines the position of an element's offset container. It determines how the element is positioned relative to its offset parent, allowing for precise control over its placement in the layout. This property is particularly useful in conjunction with the 'position' property to create complex layouts and animations.