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-shadowAttributes 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 easeFunction 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!