|
|
| (未显示同一用户的8个中间版本) |
| 第1行: |
第1行: |
| <templatestyles src="User:晨茗biu~/common.css"/><br> | | <templatestyles src="User:晨茗biu~/common.css"/> |
| | <templatestyles src="模板:黑幕/黑幕.css" /><br> |
|
| |
|
| 晨茗biu~的个人css沙盒,用于本人的部分css测试。<br> | | 晨茗biu~的个人css沙盒,用于本人的部分css测试。<br> |
| 测试成功的代码可能会保留,可供各位随意参考或使用。<br> | | 测试成功的代码可能会保留,可供各位随意参考或使用。<br> |
| ==像素画== | | ==像素画== |
| 一个像素画:<br>
| |
| <div class="pixelart-to-css"></div>
| |
| <br><br><br><br><br>
| |
| 代码解释:用box-shadow属性填充色块。box-shadow为一种针对图形的阴影属性,该属性可在类型定义中通过调整阴影位置来同时创建多个色块,可简化代码复杂度。该属性的用法为<nowiki>box-shadow: offset-x offset-y blur-radius spread-radius color</nowiki>,其中“blur-radius”“spread-radius”用于调整阴影的模糊程度,在像素画实现中填0或不填(本段代码使用工具直接生成,因此这两个参数都填了0,实际上不填也是没问题的)。“offset-x”“offset-y”分别定义了阴影的在两个方向的偏移距离,单位为“px”,在本段代码中为调整色块的位置。<br>
| |
| 示例代码:<br>
| |
| .pixelart-to-css {
| |
| /*在创建多个阴影时,不同阴影的设定用“,”隔开*/
| |
| /*阴影位置的设定和单个“像素”的大小成整数关系*/
| |
| box-shadow: 5px 5px 0 0 #303f46, 10px 5px 0 0 #303f46, 15px 5px 0 0 #303f46, 20px 5px 0 0 #303f46, 25px 5px 0 0 #303f46, 30px 5px 0 0 #303f46, 35px 5px 0 0 #ffffff, 40px 5px 0 0 #303f46, 45px 5px 0 0 #303f46, 50px 5px 0 0 #303f46, 55px 5px 0 0 #303f46, 60px 5px 0 0 #ffffff, 65px 5px 0 0 #303f46, 70px 5px 0 0 #303f46, 75px 5px 0 0 #303f46, 80px 5px 0 0 #303f46,/*设置第一行*/
| |
| 5px 10px 0 0 #303f46, 10px 10px 0 0 #303f46, 15px 10px 0 0 #303f46, 20px 10px 0 0 #303f46, 25px 10px 0 0 #303f46, 30px 10px 0 0 #ffffff, 35px 10px 0 0 #ffcdd2, 40px 10px 0 0 #ffffff, 45px 10px 0 0 #303f46, 50px 10px 0 0 #303f46, 55px 10px 0 0 #ffffff, 60px 10px 0 0 #ffcdd2, 65px 10px 0 0 #ffffff, 70px 10px 0 0 #303f46, 75px 10px 0 0 #303f46, 80px 10px 0 0 #303f46,/*第二行*/
| |
| 5px 15px 0 0 #303f46, 10px 15px 0 0 #303f46, 15px 15px 0 0 #303f46, 20px 15px 0 0 #303f46, 25px 15px 0 0 #303f46, 30px 15px 0 0 #ffffff, 35px 15px 0 0 #ffcdd2, 40px 15px 0 0 #ffcdd2, 45px 15px 0 0 #ffffff, 50px 15px 0 0 #ffffff, 55px 15px 0 0 #ffcdd2, 60px 15px 0 0 #ffcdd2, 65px 15px 0 0 #ffffff, 70px 15px 0 0 #303f46, 75px 15px 0 0 #303f46, 80px 15px 0 0 #303f46,/*第三行*/
| |
| 5px 20px 0 0 #303f46, 10px 20px 0 0 #303f46, 15px 20px 0 0 #303f46, 20px 20px 0 0 #303f46, 25px 20px 0 0 #303f46, 30px 20px 0 0 #ffffff, 35px 20px 0 0 #ffcdd2, 40px 20px 0 0 #ffffff, 45px 20px 0 0 #ffffff, 50px 20px 0 0 #ffffff, 55px 20px 0 0 #ffffff, 60px 20px 0 0 #ffcdd2, 65px 20px 0 0 #ffffff, 70px 20px 0 0 #303f46, 75px 20px 0 0 #303f46, 80px 20px 0 0 #303f46,/*第四行*/
| |
| 5px 25px 0 0 #303f46, 10px 25px 0 0 #303f46, 15px 25px 0 0 #303f46, 20px 25px 0 0 #303f46, 25px 25px 0 0 #303f46, 30px 25px 0 0 #ffffff, 35px 25px 0 0 #ffffff, 40px 25px 0 0 #ffffff, 45px 25px 0 0 #ffffff, 50px 25px 0 0 #ffffff, 55px 25px 0 0 #ffffff, 60px 25px 0 0 #ffffff, 65px 25px 0 0 #ffffff, 70px 25px 0 0 #303f46, 75px 25px 0 0 #303f46, 80px 25px 0 0 #303f46,/*第五行*/
| |
| 5px 30px 0 0 #303f46, 10px 30px 0 0 #303f46, 15px 30px 0 0 #303f46, 20px 30px 0 0 #303f46, 25px 30px 0 0 #303f46, 30px 30px 0 0 #ffffff, 35px 30px 0 0 #000000, 40px 30px 0 0 #ffffff, 45px 30px 0 0 #ffffff, 50px 30px 0 0 #000000, 55px 30px 0 0 #ffffff, 60px 30px 0 0 #ffffff, 65px 30px 0 0 #ffffff, 70px 30px 0 0 #303f46, 75px 30px 0 0 #303f46, 80px 30px 0 0 #303f46,/*第六行*/
| |
| 5px 35px 0 0 #303f46, 10px 35px 0 0 #303f46, 15px 35px 0 0 #303f46, 20px 35px 0 0 #303f46, 25px 35px 0 0 #303f46, 30px 35px 0 0 #ffffff, 35px 35px 0 0 #ffffff, 40px 35px 0 0 #000000, 45px 35px 0 0 #ffffff, 50px 35px 0 0 #ffffff, 55px 35px 0 0 #ffffff, 60px 35px 0 0 #ffffff, 65px 35px 0 0 #ffffff, 70px 35px 0 0 #303f46, 75px 35px 0 0 #303f46, 80px 35px 0 0 #303f46,/*第七行*/
| |
| 5px 40px 0 0 #303f46, 10px 40px 0 0 #303f46, 15px 40px 0 0 #303f46, 20px 40px 0 0 #303f46, 25px 40px 0 0 #303f46, 30px 40px 0 0 #ffffff, 35px 40px 0 0 #ffffff, 40px 40px 0 0 #ffffff, 45px 40px 0 0 #ffffff, 50px 40px 0 0 #ffffff, 55px 40px 0 0 #ffffff, 60px 40px 0 0 #ffffff, 65px 40px 0 0 #ffffff, 70px 40px 0 0 #303f46, 75px 40px 0 0 #303f46, 80px 40px 0 0 #303f46,/*第八行*/
| |
| 5px 45px 0 0 #303f46, 10px 45px 0 0 #303f46, 15px 45px 0 0 #303f46, 20px 45px 0 0 #303f46, 25px 45px 0 0 #303f46, 30px 45px 0 0 #303f46, 35px 45px 0 0 #ffffff, 40px 45px 0 0 #ffffff, 45px 45px 0 0 #ffffff, 50px 45px 0 0 #ffffff, 55px 45px 0 0 #ffffff, 60px 45px 0 0 #ffffff, 65px 45px 0 0 #303f46, 70px 45px 0 0 #303f46, 75px 45px 0 0 #303f46, 80px 45px 0 0 #303f46,/*第九行*/
| |
| 5px 50px 0 0 #303f46, 10px 50px 0 0 #303f46, 15px 50px 0 0 #303f46, 20px 50px 0 0 #303f46, 25px 50px 0 0 #303f46, 30px 50px 0 0 #303f46, 35px 50px 0 0 #303f46, 40px 50px 0 0 #ffffff, 45px 50px 0 0 #ffffff, 50px 50px 0 0 #ffffff, 55px 50px 0 0 #ffffff, 60px 50px 0 0 #303f46, 65px 50px 0 0 #303f46, 70px 50px 0 0 #ffffff, 75px 50px 0 0 #303f46, 80px 50px 0 0 #303f46,/*第十行*/
| |
| 5px 55px 0 0 #303f46, 10px 55px 0 0 #303f46, 15px 55px 0 0 #303f46, 20px 55px 0 0 #303f46, 25px 55px 0 0 #303f46, 30px 55px 0 0 #303f46, 35px 55px 0 0 #303f46, 40px 55px 0 0 #ffffff, 45px 55px 0 0 #ffffff, 50px 55px 0 0 #ffffff, 55px 55px 0 0 #ffffff, 60px 55px 0 0 #303f46, 65px 55px 0 0 #303f46, 70px 55px 0 0 #303f46, 75px 55px 0 0 #ffffff, 80px 55px 0 0 #303f46,/*第十一行*/
| |
| 5px 60px 0 0 #303f46, 10px 60px 0 0 #303f46, 15px 60px 0 0 #303f46, 20px 60px 0 0 #303f46, 25px 60px 0 0 #303f46, 30px 60px 0 0 #303f46, 35px 60px 0 0 #ffffff, 40px 60px 0 0 #ffffff, 45px 60px 0 0 #ffffff, 50px 60px 0 0 #ffffff, 55px 60px 0 0 #ffffff, 60px 60px 0 0 #ffffff, 65px 60px 0 0 #303f46, 70px 60px 0 0 #303f46, 75px 60px 0 0 #ffffff, 80px 60px 0 0 #303f46,/*第十二行*/
| |
| 5px 65px 0 0 #303f46, 10px 65px 0 0 #303f46, 15px 65px 0 0 #303f46, 20px 65px 0 0 #303f46, 25px 65px 0 0 #ffffff, 30px 65px 0 0 #ffffff, 35px 65px 0 0 #ffffff, 40px 65px 0 0 #ffffff, 45px 65px 0 0 #ffffff, 50px 65px 0 0 #ffffff, 55px 65px 0 0 #ffffff, 60px 65px 0 0 #ffffff, 65px 65px 0 0 #303f46, 70px 65px 0 0 #303f46, 75px 65px 0 0 #ffffff, 80px 65px 0 0 #303f46,/*第十三行*/
| |
| 5px 70px 0 0 #303f46, 10px 70px 0 0 #303f46, 15px 70px 0 0 #303f46, 20px 70px 0 0 #303f46, 25px 70px 0 0 #ffffff, 30px 70px 0 0 #ffffff, 35px 70px 0 0 #ffffff, 40px 70px 0 0 #ffffff, 45px 70px 0 0 #ffffff, 50px 70px 0 0 #ffffff, 55px 70px 0 0 #ffffff, 60px 70px 0 0 #ffffff, 65px 70px 0 0 #303f46, 70px 70px 0 0 #ffffff, 75px 70px 0 0 #ffffff, 80px 70px 0 0 #303f46,/*第十四行*/
| |
| 5px 75px 0 0 #303f46, 10px 75px 0 0 #303f46, 15px 75px 0 0 #303f46, 20px 75px 0 0 #ffffff, 25px 75px 0 0 #ffffff, 30px 75px 0 0 #ffffff, 35px 75px 0 0 #ffffff, 40px 75px 0 0 #ffffff, 45px 75px 0 0 #ffffff, 50px 75px 0 0 #ffffff, 55px 75px 0 0 #ffffff, 60px 75px 0 0 #ffffff, 65px 75px 0 0 #ffffff, 70px 75px 0 0 #ffffff, 75px 75px 0 0 #303f46, 80px 75px 0 0 #303f46,/*第十五行*/
| |
| 5px 80px 0 0 #607d8b, 10px 80px 0 0 #607d8b, 15px 80px 0 0 #607d8b, 20px 80px 0 0 #607d8b, 25px 80px 0 0 #607d8b, 30px 80px 0 0 #ffffff, 35px 80px 0 0 #ffffff, 40px 80px 0 0 #607d8b, 45px 80px 0 0 #607d8b, 50px 80px 0 0 #607d8b, 55px 80px 0 0 #ffffff, 60px 80px 0 0 #ffffff, 65px 80px 0 0 #607d8b, 70px 80px 0 0 #607d8b, 75px 80px 0 0 #607d8b, 80px 80px 0 0 #607d8b;/*第十六行*/
| |
| height: 5px;
| |
| width: 5px;/*定义单个“像素”大小*/
| |
| }<br>
| |
| 在实际的运用中,可通过只设定关键像素的位置、对空白像素采用不加设定的方法来压缩代码长度。<br>
| |
| 为方便测试,本段代码由网站[https://pixelartcss.com/ Pixel Art to CSS]直接生成。<br>
| |
|
| |
|
| <div class="container-qiuyudao-daoren"><div class="qiuyudao-daoren"></div></div><br>
| | ==一些解析器函数的测试== |
| <div class="container-qiuyudao-daoqiao"><div class="qiuyudao-daoqiao"></div></div><br>
| | {{#ifeq:{{#time:m-d|now + 8 hours}}|04-19|一段和系统时间相关的测试代码,用的参数是我的生日。你能看到这一段说明今天就是我的生日,祝我生日快乐!|一段和系统时间相关的测试代码,用的参数是我的生日。你能看到这一段说明今天不是我的生日。}} |
| <div class="container-qiuyudao"><div class="qiuyudao"></div></div><br>
| | |
| ==基于老密码盘的文字化改版== | | ==基于老密码盘的文字化改版== |
| 很简单的改版方法,基于原英文密码盘,各位可查看源代码,并根据自己的情况进行改版,甚至不局限于文字解密,而是选择通过相近的思想实现多按钮的页面内容转化,或者搞一些更有趣的玩法。这个密码盘的密码是“我是晨茗”,密码输入错误会自动回到开头。<br> | | 很简单的改版方法,基于原英文密码盘,各位可查看源代码,并根据自己的情况进行改版,甚至不局限于文字解密,而是选择通过相近的思想实现多按钮的页面内容转化,或者搞一些更有趣的玩法。这个密码盘的密码是“我是晨茗”,密码输入错误会自动回到开头。<br> |
| 第122行: |
第94行: |
|
| |
|
| |} | | |} |
| | | 为土星论坛设计的模板用例: |
| <div class="container-SF">
| | {{SaturnForum|晨茗|488/9/27 01:54:52|17|一段来自土星论坛的留言}} |
| <div class="portrait"></div>
| | {{SaturnForum|晨茗|488/9/27 01:54:52|17|一段来自土星论坛的留言}} |
| <div class="line-top"></div>
| | {{SaturnForum|晨茗|488/9/27 01:54:52|17|一段来自土星论坛的留言}} |
| <div class="line-left"></div>
| | {{Timeline |
| <div class="line-bottom"></div>
| | |items= |
| <div class="user">1145141651651651655651</div>
| | {{TimelineItem |
| <div class="time">发表于:733/12/32 10:30:24</div>
| | |year=770.A.P |
| <div class="floor">#15</div>
| | |content= |
| <div class="refence">回复</div>
| | {{TimelineContent|month=03.32|title=[[巴别]]|desc=幽蓝边界到达冰封。}} |
| <div class="ping">@</div>
| | {{TimelineContent|month=08.29~08.31|title=虹再现|desc=幽蓝边界吞灭霓虹。}} |
| <div class="report">举报</div>
| | {{TimelineContent|month=08.32|title=方舟蜃景|desc=幽蓝边界到达港湾。}} |
| <div class="text">16548646148949841841box-shadow: 630px 10px rgba(0,0,0,255), 640px 10px<br> rgba(0,0,0,255), 650px 10px rgba(0,0,0,255), 620px 20px rgba(0,0,0,255), 630px 20px rgba(75,91,171,255), 640px 20px rgba(0,0,0,255), 30px 30px rgba(0,0,0,255), 40px 30px rgba(0,0,0,255), 50px 30px rgba(0,0,0,255), 60px 30px rgba(0,0,0,255), 140px 30px rgba(0,0,0,255), 150px 30px rgba(0,0,0,255), 160px 30px rgba(0,0,0,255), 170px 30px rgba(0,0,0,255), 180px 30px rgba(0,0,0,255), 190px 30px rgba(0,0,0,255), 200px 30px rgba(0,0,0,255), 210px 30px rgba(0,0,0,255), 220px 30px rgba(0,0,0,255), 230px 30px rgba(0,0,0,255), 240px 30px rgba(0,0,0,255), 250px 30px rgba(0,0,0,255), 260px 30px rgba(0,0,0,255), 600px 30px<br> rgba(0,0,0,255), 610px 30px rgba(0,0,0,255), 620px 30px rgba(75,91,171,255), 630px 30px rgba(177,219,227,255), 640px 30px rgba(0,0,0,255), 20px 40px rgba(0,0,0,255), 30px 40px rgba(227,105,86,255), 40px 40px rgba(202,73,63,255), 50px 40px rgba(227,105,86,255), 60px 40px rgba(202,73,63,255), 70px 40px rgba(0,0,0,255), 80px 40px rgba(0,0,0,255), 90px 40px rgba(0,0,0,255), 100px 40px rgba(0,0,0,255), 110px 40px rgba(0,0,0,255), 120px 40px rgba(0,0,0,255), 130px 40px rgba(0,0,0,255), 140px 40px rgba(75,91,171,255), 150px 40px rgba(75,91,171,255), 160px 40px rgba(75,91,171,255), 170px 40px rgba(75,91,171,255), 180px 40px rgba(75,91,171,255), 190px 40px rgba(75,91,171,255), 200px 40px rgba(75,91,171,255), 210px 40px rgba(75,91,171,255)<br>, 220px 40px rgba(75,91,171,255), 230px 40px rgba(75,91,171,255), 240px 40px rgba(75,91,171,255), 250px 40px rgba(75,91,171,255418964189418964159641848948948948948949489498498489498afnkajhfouiahsfiuhaifbawofbouabfiuoawbifubaibfiasbfiuabiufwbiubsiufbiuabwiufbsiuabfiuabiwufbiusabfa</div>
| | }} |
| </div>
| | }} |
| | <poem> |
| | ==黑幕新模板测试== |
| | <span class="DarkShroud" title="你知道的太多了"><span class="DarkShroud-text">文本</span></span> |
| | <span class="DarkShroud" title="你知道的太少了"><span class="DarkShroud-text">[[文本]]</span></span> |
| | <span class="DarkShroud" title="你无所不知"><span class="DarkShroud-text">[[逆魅鸮]]</span></span> |
| | <span class="DarkShroud" title="你一无所知"><span class="DarkShroud-text">逆魅鸮</span></span> |
| | </poem> |