First, the effect picture#
Idea#
Before beautifying XLog, I have seen many bloggers publish their own xLog CSS, but I feel that the original one is more pure. Just add a blurred background, and it will be perfect.
CSS file#
.swiper-button {
position: absolute;
top: 50%;
z-index: 1;
height: 1.5rem;
width: 1.5rem;
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
justify-content: center;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: #00000030;
opacity: .8;
}
.header {
height: 20vh; /* Set the height to 30% of the viewport height */
background-image: url("https://vpic2024.xingluo.eu.org/uploads/picgo/202402282219442.webp"); /* Replace with your background image path */
filter: blur(60px);
background-size: cover; /* Scale the background image proportionally to fill the container */
background-position: center; /* Center the background image */
}
.dark .xlog-banner {
background-image: url(https://vpic2024.xingluo.eu.org/uploads/picgo/202402282219442.webp);
filter: blur(123px);
}
.xlog-banner {
background-image: url(https://vpic2024.xingluo.eu.org/uploads/picgo/202402260904562.jpeg);
filter: blur(98px);
}
This article is synchronized updated to xLog by Mix Space
The original link is http://mixspace.en.icu/posts/default/221