Home > Article > Web Front-end > Create a modern card style: the latest use of CSS properties
Create a modern card style: the trendy use of CSS properties
In modern web design, card style is a common and popular design pattern. Cards can be used to display various content, such as images, text, links, etc., making the web page more layered and tidy. In order to make the card style more modern, we can use some trendy CSS properties to add unique effects and animations to the card. This article will introduce the use of some trendy CSS properties and provide specific code examples.
1. Shadow effect
The shadow effect is to give the card a sense of three-dimensionality and depth, which can be achieved using the box-shadow
attribute. box-shadow
Attributes can set the color, position, blur, etc. of the shadow. The following is a sample code:
.card { box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2); }
In the above code, the first parameter 0px
of box-shadow
represents the offset of the horizontal position, and the second parameter 2px
represents the offset of the vertical position, the third parameter 6px
represents the blur of the shadow, and the fourth parameter rgba(0, 0, 0, 0.2)
represents the color and transparency of the shadow.
2. Animation effects
Adding animation effects can make the cards more vivid and attractive. CSS provides the transition
attribute to implement card transition animation. The following is a sample code:
.card { transition: transform 0.3s ease; } .card:hover { transform: scale(1.1); }
In the above code, the transition
attribute sets the transform
attribute to a transition time of 0.3 seconds, and uses ease
Function to control the speed of transition. When the mouse is hovering over the card, transform: scale(1.1)
is used to enlarge the card 1.1 times, achieving a simple transition animation effect.
3. Background gradient
Using background gradient can add a modern visual effect to the card. CSS provides the background-image
attribute and the linear-gradient()
function to achieve gradient effects. The following is a sample code:
.card { background-image: linear-gradient(to right, #f44336, #2196f3); }
In the above code, the linear-gradient()
function accepts two or more parameters, separated by commas. The first parameter of the function to right
represents the direction of the gradient, here it means from left to right. The second parameter #f44336
represents the starting color of the gradient, and the third parameter #2196f3
represents the ending color of the gradient.
4. Filter effects
Using filter effects can add some special visual effects to the card. CSS provides filter
attributes to achieve various filter effects, such as blur, saturation, transparency, etc. The following is a sample code:
.card { filter: brightness(0.8) blur(2px); }
In the above code, the filter
attribute uses two filter effects, namely brightness(0.8)
and blur (2px)
. brightness(0.8)
reduces the card’s brightness to 80%, while blur(2px)
blurs the card by 2 pixels.
5. Transformation effect
Using the transformation effect can give the card a unique shape and perspective effect. CSS provides transform
attributes to achieve various transformation effects, such as rotation, scaling, tilt, etc. The following is a sample code:
.card { transform: perspective(1000px) rotateY(20deg); }
In the above code, the transform
attribute uses two transformation effects, namely perspective(1000px)
and rotateY( 20deg)
. perspective(1000px)
sets the perspective effect, while rotateY(20deg)
rotates the card 20 degrees clockwise around the Y axis.
By using the above-mentioned trendy CSS properties, we can create a variety of modern card styles. Of course, this is just a part of the sample code, and the actual application can be cleverly combined and adjusted as needed. I hope these sample codes can provide you with some ideas and inspiration.
(Note: The above example code is only used to demonstrate the use of CSS properties, not the complete HTML and CSS code. Appropriate adjustments need to be made as needed for actual application.)
The above is the detailed content of Create a modern card style: the latest use of CSS properties. For more information, please follow other related articles on the PHP Chinese website!