hello and welcome to red stapler channel in this episode we are going to show you
how to design and create css card with animating rgb
and 3d tilt effect in just a few minutes ready let's check it out
so i'm going to start with the code from previous episode
the first video is how to set up the card layout from scratch using css
and the second video is how to add 3d tilt effect using tilt.js
i will drop the link to the code and tutorials in the description box below
now here's the code from the example and the first thing i'm going to do
is to remove the lower section of the card
then i'm going to adjust the grid layout
changing background color to dark gray and default text color to white
also change the text line to justify and reduce the font size
next i'm going to add gradient fading effect to the image
you can do that easily by adding linear gradient on top of the background image
i will start the fading effect after 70% from the top of image
and here is the result
now i added fading effect to all the cards next we are going to work on the
rgb light effect first i'm going to create css for rgb
class as pseudo element
then set the linear gradient background color using rgb color
we will repeat the background and set the horizontal background size to 300%
then set the position to absolute
and inset to -3 pixels to make this element larger than the card by 3 pixels
on all dimensions finally add rgb class to the second card
looks good next we will add the animation
i'm going to create keyframes to animate the background position by moving it
horizontally
then add the animation to the rgb class
next i will set the border radius and add blur filter
then i remove the rgb layer behind the card using translateZ
note that i'm using translate because this example is in 3d transform mode
from using tilt.js to create tilt effect but if you are not using css 3d
transform you can use z-index instead of translateZ
and here is the result
so that's all for this tutorial hope you guys enjoy you can download the code
from our website in the link below if you like this video and want to see
more subscribe our channel to stay tuned thanks for watching see you next episode
bye