小 |
小 |
||
| 第75行： | 第75行： | ||
</div> | </div> | ||
| − | <h2>Some effects</h2> | + | <section> |
| + | <h2>Some effects</h2> | ||
| − | <div style="width: 100%"> | + | <div style="width: 100%; display: grid; grid-template-columns: 1fr 1fr auto;"> |
| + | <div>Rainbow Glow</div> | ||
| − | + | <div style="display: flex; justify-content: center; margin: 0 2rem;"> | |
| − | + | <div class="rainbow-glow--wrapper" style="position: relative; width: 8rem; height: 4rem; padding: 4px; box-sizing: border-box;"> | |
| − | <div style="display: flex; justify-content: center; margin: 0 2rem;"> | + | <div |
| − | + | class="rainbow-glow--glow" | |
| − | <div class="rainbow-glow--glow" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 8px; background-image: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); box-sizing: border-box;"> </div> | + | style=" |
| − | <div class="rainbow-glow--content" style="position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; padding: .5rem 1rem; width: 100%; height: 100%; background-color: #fff; color: #000; border: solid 2px #000; border-width: 2px 3px 4px; border-radius: 6px; box-sizing: border-box;">YOOHOO</div> | + | position: absolute; |
| + | left: 0; | ||
| + | top: 0; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | border-radius: 8px; | ||
| + | background-image: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); | ||
| + | box-sizing: border-box; | ||
| + | " | ||
| + | > | ||
| + | | ||
| + | </div> | ||
| + | |||
| + | <div | ||
| + | class="rainbow-glow--content" | ||
| + | style=" | ||
| + | position: relative; | ||
| + | z-index: 1; | ||
| + | display: flex; | ||
| + | justify-content: center; | ||
| + | align-items: center; | ||
| + | padding: .5rem 1rem; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | background-color: #fff; | ||
| + | color: #000; | ||
| + | border: solid 2px #000; | ||
| + | border-width: 2px 3px 4px; | ||
| + | border-radius: 6px; | ||
| + | box-sizing: border-box; | ||
| + | " | ||
| + | > | ||
| + | YOOHOO | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div> | ||
| + | * The <code>filter</code> property will eliminate inline styles (wish I could use this on the glow layer though) | ||
</div> | </div> | ||
| − | </div> | + | </div> |
| − | + | </section> | |
| − | |||
| − | |||
<section> | <section> | ||
2021年4月13日 (二) 15:56的版本
/ / b. / *#V .i A .##. _..-#] A .#. .# *#. ___________ ..-=########7 i#. %## ;#' q#. `^----=######=############7 b ;###. O###T 4 ;7 9#. 'q####P^*'` "'` ##- ##### ;#### .## -=A ;# .###. ##:"` ### ;##`##; J### -###7 .=##%} .-=..#: ;#`##. .##' _.--==- .##; ##7 |## .### _-##### .#####= @#######7 :#7 ##o d## .-=######7 ;## ;##` ###. ;##" -+=^*`##: .####* &#** ;##. ##: `###. .###$P^*"` " ##; ##: #### $#: ##7 .### ## #^##. ;##' ####. :##` .## ;## ##$#; ##' ;## .##P ## #7 `##. ### =###-### .. ;#7 d#: .#7?## :#7 ##7 .##P ## ;# >#k> ### ... `#####7 ..--==######=-._ ## .-=##' ;#' $#./#: %## &#$ .=A ## .##+=euG; d################' .-=################H. ;##=###### ## ?#L## ###* *###v==###=##7 ##########7.##################.-#####$P^*"'` `*^V* @###=^` t# .#7 ###: <@##; `##########/ *$^#` `>#####^*"` `*#########*` *#° Y d#' :##: *V *" ' #7 .###*` B#####P* .## K^` ## 4$*` *@##* ##: .# .$ `V* z@# /7 7 *# # 7 ;7 !
Visit my personal website to find out who I am and what I am doing
:D
Some effects
filter property will eliminate inline styles (wish I could use this on the glow layer though)
CREmoteFixes
This may fix most of inconsistent vertical alignment and allow better visual effect.