What are the new features in CSS3
CSS3 introduced many new features and enhancements to the CSS specification. Below are some of the notable CSS3 features with examples:
1. Border Radius:
Allows you to create rounded corners for elements.
2. Box Shadow:
Creates a shadow effect around elements.
3. Text Shadow:
Adds a shadow effect to the text.
4. Gradients:
Allows you to create gradient backgrounds.
5. Transitions:
Enables smooth transitions between property values.
6. Animations:
Allows you to define complex animations.
7. Flexbox:
A powerful layout system for arranging items within a container.
8. Grid Layout:
A two-dimensional layout system for designing complex web page layouts.
9. Media Queries:
Allows you to apply different styles based on the user's device or screen size.
10. Transforms:
Allows you to perform transformations on elements, such as scaling, rotating, and translating.
Conclusion:
These are just a few examples of the new features introduced in CSS3. CSS3 brought a wide range of capabilities that enable web developers to create more dynamic and visually appealing web pages without relying on complex JavaScript or images for certain effects.
/* CSS3 */
.box {
border-radius: 10px;
}
/* CSS3 */
.box {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
/* CSS3 */
.text {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
/* CSS3 - Linear Gradient */
.box {
background: linear-gradient(to right, #ff0000, #00ff00);
}
/* CSS3 - Radial Gradient */
.circle {
background: radial-gradient(circle, #ff0000, #00ff00);
}
/* CSS3 */
.box {
transition: background-color 0.3s ease;
}
.box:hover {
background-color: #ffcc00;
}
/* CSS3 */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
.box {
animation: bounce 2s infinite;
}
/* CSS3 */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/* CSS3 */
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
/* CSS3 */
@media screen and (max-width: 768px) {
.box {
font-size: 14px;
}
}
/* CSS3 */
.box {
transform: rotate(45deg);
}