Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.box { width: 200px; height: 100px; background-color: lightblue; text-align: center; line-height: 100px; font-size: 20px; margin: 20px; transition: outline 0.3s; } .box:hover { outline: 5px dashed red; }The CSS 'outline' property is used to create a line around an element, outside of its border, without affecting the layout of the document. It is often used for accessibility purposes, such as indicating focus on interactive elements. The outline can have different styles, widths, and colors, making it a versatile tool for enhancing user experience.
.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.