当前位置:网站首页>Butterfly theme beautification - Page frosted glass effect
Butterfly theme beautification - Page frosted glass effect
2022-07-05 07:29:00 【SongErrors】
List of articles
One 、 Basic settings
1、 establish css file
Create a mycss.css file
Move to \themes\butterfly\source\css
Under the table of contents .
2、 introduce
inject In butterfly.yml
Medium or customized _config.butterfly.yml
in
Introduce css file , No matter which way above Are introduced in the following code .
inject:
head:
- <link rel="stylesheet" href="/css/mycss.css">
Two 、 beautify
In the created mycss.css Add the following to the document
1、 All pages have frosted glass effect
/* All pages realize frosted glass effect */
#aside-content{
background: rgba(255,255,255,0);
}
#aside-content > .card-widget:first-child {
background: rgba(255,255,255,0.5);
backdrop-filter: blur(10px);
}
#aside-content .card-widget {
background: rgba(255,255,255,0.5);
backdrop-filter: blur(10px);
}
.layout > div:first-child:not(.recent-posts) {
background: rgba(255,255,255,0.5);
backdrop-filter: blur(10px);
}
#recent-posts > .recent-post-item {
background: rgba(255,255,255,0.5);
backdrop-filter: blur(10px);
}
2、 Title Block matte effect
/* The title bar */
#page-header.nav-visible #nav {
background: rgba(255,255,255,0.5);
backdrop-filter: blur(50px);
}
3、 Search bar frosted glass effect
/* Search box beautification */
.search-dialog {
background: rgba(255,255,255,0.5);
backdrop-filter: blur(10px);
border-radius: 0px;
}
#search-mask {
background: rgba(255,255,255,0);
}
4、 The effect of frosted glass on the end of the mobile phone
/* Mobile phone end ground glass optimization */
#sidebar #sidebar-menus.open {
background: rgba(255,255,255,0.5);
backdrop-filter: blur(10px);
}
#sidebar #menu-mask {
background: rgba(255,255,255,0);
}
Contrast before and after beautification
6、 The footer 、 Scroll bars beautify
/* The footer footer */
/* Gradient scrolling animation */
@-webkit-keyframes Gradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
@keyframes Gradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
#footer {
background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
background-size: 400% 400%;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite;
-o-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#footer:before {
background-color: rgba(0, 0, 0, 0);
}
#footer-wrap {
background-color: rgba(0, 0, 0, 0);
}
/* Scroll bar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background-color: rgba(73, 177, 245, 0.2);
border-radius: 2em;
}
::-webkit-scrollbar-thumb {
background-color: #49b1f5;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.4) 75%,
transparent 75%,
transparent
);
border-radius: 2em;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
::-moz-selection {
color: #fff;
background-color: #49b1f5;
}
7、 Beautify the blog background
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#web_bg {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
}
#web_bg {
background: -webkit-linear-gradient(
0deg,
rgba(247, 149, 51, 0.1) 0,
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1) 100%
);
background: -moz-linear-gradient(
0deg,
rgba(247, 149, 51, 0.1) 0,
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1) 100%
);
background: -o-linear-gradient(
0deg,
rgba(247, 149, 51, 0.1) 0,
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1) 100%
);
background: -ms-linear-gradient(
0deg,
rgba(247, 149, 51, 0.1) 0,
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1) 100%
);
background: linear-gradient(
90deg,
rgba(247, 149, 51, 0.1) 0,
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1) 100%
);
}
3、 ... and 、 The final result
If you want to check the final effect, you can go to my blog : Song's blog
边栏推荐
- Idea push project to code cloud
- ModuleNotFoundError: No module named ‘picamera‘
- deepin 20 kivy unable to get a window, abort
- repo. conda. An example of COM path error
- Deepin get file (folder) list
- Simple operation of nixie tube (keil5)
- Cookie operation
- [vscode] recommended plug-ins
- Basic series of SHEL script (III) for while loop
- Shadowless cloud desktop - online computer
猜你喜欢
[software testing] 04 -- software testing and software development
剑指 Offer 56 数组中数字出现的次数(异或)
Rough notes of C language (2) -- constants
C#学习笔记
Solve tensorfow GPU modulenotfounderror: no module named 'tensorflow_ core. estimator‘
HDU1232 畅通工程(并查集)
Detailed explanation of miracast Technology (I): Wi Fi display
Mathematical analysis_ Notes_ Chapter 8: multiple integral
Unforgettable summary of 2021
Altimeter data knowledge point 2
随机推荐
Miracast技术详解(一):Wi-Fi Display
[software testing] 04 -- software testing and software development
Ue5 hot update - remote server automatic download and version detection (simplehotupdate)
Implementation of one-dimensional convolutional neural network CNN based on FPGA (VIII) implementation of activation layer
selenium 元素定位
Matrix and TMB package version issues in R
目标检测系列——Faster R-CNN原理详解
Raspberry pie 4B arm platform aarch64 PIP installation pytorch
The golang timer uses the stepped pit: the timer is executed once a day
How to modify the file path of Jupiter notebook under miniconda
Hdu1231 maximum continuous subsequence (divide and conquer or dynamic gauge or double pointer)
PostMessage communication
Eclipse project recompile, clear cache
Three body goal management notes
Don't confuse the use difference between series / and / *
Now there are HTML files and MVC made with vs (connected to the database). How can they be connected?
[software testing] 03 -- overview of software testing
I 用c I 实现队列
氢氧化钠是什么?
The difference between NPM install -g/-save/-save-dev