![c980921a8b07a69ec753ae24683e7042.png](https://i-blog.csdnimg.cn/blog_migrate/ce5e18c758ed80ce01cc7393aeb6a9ce.jpeg)
秘密花园卡片
Demo:
![8bcbe289c8621f9b1b3eeb029d1fb291.png](https://i-blog.csdnimg.cn/blog_migrate/a6ad4f18a9b21c0905d652a2b66353fe.jpeg)
![581a4e8f027d4e8c424bd52e9c3e8370.png](https://i-blog.csdnimg.cn/blog_migrate/5ed480c7624ff8f1d993abae18517dfb.jpeg)
![f3bd0898d05ad1ae33e283487c0eeebc.png](https://i-blog.csdnimg.cn/blog_migrate/d4ec589e286966dfc86a8d9b8984c797.jpeg)
点击直接下载,无须跳转:导入即可
- 花园卡片+Basic(已更新)
- 平铺花卉+例句笔记类型(请看评论,自行修复)
- 平铺花卉+单词笔记类型(已更新)
下载后替换模板的方法
给你的卡片快速换模板 - 问题与答案xn--wnu387i.cn![156ea0eca069952cd562826b5fb2ab06.png](https://i-blog.csdnimg.cn/blog_migrate/a286fe31645bb9b07e05620ef2fb019e.jpeg)
更新日志:
2019年7月11日:给文字添加阴影。
找到格式刷里的这段代码:
![da2c874c5e62eccd33579caaa073379a.png](https://i-blog.csdnimg.cn/blog_migrate/9e8b19a5bf484b9644524cffa75205fd.jpeg)
![8825957067bc4b06c87ddb2efd49f92e.png](https://i-blog.csdnimg.cn/blog_migrate/3cddc8126b3139677aa67e98cfc231e7.jpeg)
text-shadow
这段代码能够给字体添加阴影,使得字体能在更多的背景下清晰浮现。
![a752fbac541257159fb2b8fb842b2012.png](https://i-blog.csdnimg.cn/blog_migrate/38ab5abb7b87591ffb81c578fe6b0a50.jpeg)
这样我们就能够适应更多的背景了!
![c8b454a74fc4584da6f4b4703f535a54.png](https://i-blog.csdnimg.cn/blog_migrate/30e7e98cf9ec520da0af11677d22e8f9.jpeg)
设计说明:
源于:菜鸟网
![e352c858862096cb55f00a41da8d772b.png](https://i-blog.csdnimg.cn/blog_migrate/8a4ceb85d77f65ab355c4efc79ed452f.jpeg)
素材
案例中的图片来源于:dealjumbo.com.我所选择的是平铺图案,我也一直很喜欢平铺或小碎花。
![45057f17c1b9789b03143fbd34677506.png](https://i-blog.csdnimg.cn/blog_migrate/4f6d0e11e6aa478001e035c52e6e6381.jpeg)
案例中的字体来源于:Plom Praeng——字体天下。
![3e8ef7942514b66ad0f1e540a4eefb26.png](https://i-blog.csdnimg.cn/blog_migrate/e28c0c5f6288f116ed9be8f3746ede30.jpeg)
这些都可以根据个人的喜好进行设置。
CSS方面
基本上和Anki渐变色的模板是一模一样的,只是给头部背景添加了花卉图片。
弥乱:时尚渐变色——Anki卡片纸质模板zhuanlan.zhihu.com![156ea0eca069952cd562826b5fb2ab06.png](https://i-blog.csdnimg.cn/blog_migrate/a286fe31645bb9b07e05620ef2fb019e.jpeg)
在学习了解网页设计的过程中,发现了一些不错的效果,比如CSS中的fixed 定位,它能让我实现在点击显示答案后,在固定的位置上浮现内容,比如“冲冲冲!”文字,“赞”的小图标。给予自己积极的反馈或引导。
![686cecdb20ba92b282fb03036c1ced92.png](https://i-blog.csdnimg.cn/blog_migrate/eb5b469e0bf882a8d2cd2b3517d7d17d.png)
可以利用fixed定位效果制作一个浮动的字段,可以用来显示对自己说的话,比如:
目标:
- “2020年我实现了月入200¥”
名人名言/警句:
- “大师首先体现在有所节制。——歌德”
- 完美=衰朽
footer:用来显示一些特殊字段
笔记标签: {{Tags}}
笔记类型: {{Type}}
所属记忆库(牌组): {{Deck}}
笔记类型:包含3种笔记类型
- Basic
- 例句笔记类型
- 单词笔记类型
我将这个版式融进了我日常使用的笔记类型里,这两种笔记类型都会生成多张卡片(输入→输出)而这个笔记类型的设置原理来源于:
YJango【学习观03】www.bilibili.com 二语习得理论靠谱吗?www.zhihu.com![9e7988dd568094f12dcbdf7d908e8436.png](https://i-blog.csdnimg.cn/blog_migrate/bc0b68ec6668798f4a3df466bf38cc51.jpeg)
![ed269225176b084da97a0097da59bef9.png](https://i-blog.csdnimg.cn/blog_migrate/e0cc84298da3068bd7de85c8a45a53f4.jpeg)
![23f4363f3c28dfc8c9058279150cf84e.png](https://i-blog.csdnimg.cn/blog_migrate/40bea97ccee5e51865d3772127dd80dd.jpeg)
结语:
这次尝试探索的方向有:卡片头部背景、卡片字体、积极正向的反馈、以及笔记的字段设计。
在这次探索中,也明白了看Anki官方文档的重要性,因为很多问题在文档中是能够找到对应的答案的。(调用图片和字体方面的小知识点)
在使用Anki复习时,其本质就像是使用浏览器上网看内容。了解掌握网页设计与制作的知识和工具,能够更好的为自己创造出自己感兴趣的,自己喜欢的Anki卡片模板。自我接纳、对Anki的信赖,为Anki做些事情,体会“我对他人有人”,进而获得自己的存在价值。这个纸质样式我一直在用,这个版式通过不断的学习,会更好。
Anki在排版、图片、字体、网页行为(JS)上,还是有一定空间可以进行探索与创造的。也有许多可以借鉴的对象。
类似的案例可以参考:开源的WordPress博客平台的模板与插件、安卓手机上的主题设计、输入法的主题设计……
如何修改这个模板的细节,想折腾一下的,欢迎到卡片背景:水彩花卉图案[huì]了解更多详情。
能够实现这些都离不开前人的付出呢——计算机的发明,艾宾浩斯记忆曲线的发现,互联网的发明,编程语言的创造,艺术家们的绘画和创造……
我的其他分享:
弥乱:3款你值得拥有的Anki插件zhuanlan.zhihu.com![013751673c342868900f9b9e08d9fb2c.png](https://i-blog.csdnimg.cn/blog_migrate/b5f8073eca8048a96a14720a171194aa.jpeg)
![71837e792f29a13e2e479e46bc2eb35f.png](https://i-blog.csdnimg.cn/blog_migrate/3dc5e9a3e13245a156fed8b8c930a93a.jpeg)