Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.container {
width: 300px;
height: 200px;
overflow: hidden;
border: 2px solid #333;
}
.responsive-image {
width: 100%;
height: 100%;
object-fit: cover;
}The 'object-fit' property in CSS is used to control how an element, typically an image or video, is resized to fit its container. It defines how the content of a replaced element should be resized to fit its box, allowing for options like 'cover', 'contain', or 'fill'. This property is particularly useful for responsive design, ensuring that images maintain their aspect ratio while filling the available space appropriately.
.container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
background: #FFFFFF;
}
.background {
background: url('https://via.placeholder.com/300x200/FF5733/FFFFFF?text=Background') no-repeat center;
width: 100%;
height: 100%;
}
.blend {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: white;
background-color: rgba(0, 0, 0, 0.5);
mix-blend-mode: multiply;
}The 'mix-blend-mode' CSS property defines how an element's content should blend with its background. It allows for creative visual effects by controlling how colors and images interact with one another based on the blending mode applied. This property can create striking graphics and enhance the overall aesthetic of a webpage.
.container {
width: 100%;
background-color: #f0f0f0;
padding: 20px;
}
.box {
min-width: 200px;
width: 100%;
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
border: 2px solid #388E3C;
transition: width 0.3s;
}
.box:hover {
width: 300px;
}The 'min-width' CSS property sets the minimum width of an element. This means that the element cannot be narrower than the specified value, regardless of the content inside it. It is useful for ensuring that elements maintain a certain size for better layout control, especially in responsive designs.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.box {
background-color: #4CAF50;
color: white;
padding: 20px;
min-inline-size: 200px; /* Sets a minimum width */
border-radius: 5px;
text-align: center;
transition: width 0.3s;
width: 150px; /* Initial width less than min-inline-size */
}
.box:hover {
width: 300px; /* Expands to a width greater than min-inline-size on hover */
}The 'min-inline-size' CSS property sets the minimum size of an element in the inline direction, which is determined by the writing mode. This property is useful for ensuring that elements do not shrink below a specified width, allowing for better control over layout and readability in responsive designs.
.container {
background-color: lightblue;
min-height: 200px;
padding: 20px;
border: 2px solid blue;
text-align: center;
}The 'min-height' CSS property sets the minimum height of an element. If the content inside the element exceeds this height, the element will expand to fit the content. This property is useful for ensuring that elements maintain a consistent size, even when they contain varying amounts of content.