花潮稿纸/信笺改进版

马黑黑

我突然想到，我好久没有收到信件了。我就想，可不可以自己给自己写一封信。于是就下楼去小区的小小超市，找了好半天，也没找到信笺。服务生问我找什么，我说我找信笺。服务生把信笺听成信件，建议我如何如何处理，服务态度好到极端，我建议经理给他加薪。经理理解我的信笺是什么东东，在同意给服务生加薪之后，也给我提了个建议，就是去某某处，说那里有一个文化用品专卖店。
算了，所谓的文化用品，卖的都是单身汉用得着的东西，我去不好，容易被人误解——这情何以堪？罢了罢了，我还是在电脑上写吧。
写着写着，突然觉得哪里不对劲。嗯，是信笺问题。
好吧，我需要一张信笺。然后就做了，这是昨晚的事情。
今早又觉得，这信笺也不太像。观察了一阵子，知道问题在哪儿了：无头无尾。
对，信笺，或稿纸，天地要有，所谓的页眉、页脚吧。这个可以考虑用两个伪元素来完成。还有，信笺或稿子的格子线是不画到边缘的，得留点空间。大概如此了吧。

马黑黑

代码分享：

1. <style>
   
2. .txtBox {
   
3.         margin: auto;
   
4.         min-width: 700px;
   
5.         min-height:520px;
   
6.         background-image: linear-gradient(#fff 25px, #ed8181db 0);
   
7.         background-size: 26px 26px;
   
8.         font: normal 15px / 26px Sans-serif;
   
9.         color: black;
   
10.         border: 30px solid #fff;
    
11.         position: relative;
    
12. }
    
13. .txtBox::before, .txtBox::after {
    
14.         position: absolute;
    
15.         color: #ccc;
    
16.         text-align: right;
    
17.         width: 100%;
    
18.         height: 26px;
    
19.         font-size: 10px;
    
20.         background: #fff;
    
21.         border: 20px;
    
22. }
    
23. .txtBox::before {
    
24.         content: attr(data-1);
    
25.         top: -26px;
    
26.         border-bottom: 2px solid red;
    
27. }
    
28. .txtBox::after {
    
29.         content: attr(data-2);
    
30.         bottom: -26px;
    
31.         border-top: 2px solid red;
    
32. }
    
33. </style>
    
34. 
    
35. <div class="txtBox" data-1="花潮稿纸" data-2="Copyright &#169; 2022 All Right Reserved">
    
36.         文本<br>
    
37.         文本<br>
    
38. </div>

复制代码

红影

这个两个信笺又是新的玩法呢

马黑黑

红影 发表于 2022-4-17 20:35
这个两个信笺又是新的玩法呢

总之是尽模拟值能事吧

樵歌

格子线用虚线再淡点更好哈。

马黑黑

樵歌 发表于 2022-4-17 21:04
格子线用虚线再淡点更好哈。

这个在研发中

樵歌

马黑黑 发表于 2022-4-17 21:53
这个在研发中

辛苦发

马黑黑

樵歌 发表于 2022-4-18 11:28
辛苦发

谢谢

红影

马黑黑 发表于 2022-4-17 20:56
总之是尽模拟值能事吧

黑黑真棒

马黑黑

红影 发表于 2022-4-18 15:44
黑黑真棒

不行啊，脑子不够用的。今天试做一个方格的，有一个算法愣是算不出来

红影

马黑黑 发表于 2022-4-18 19:13
不行啊，脑子不够用的。今天试做一个方格的，有一个算法愣是算不出来

你说过的，碰到问题可以先冷处理，过后就清楚了。

马黑黑

红影 发表于 2022-4-18 21:49
你说过的，碰到问题可以先冷处理，过后就清楚了。

希望如此吧

樵歌

马黑黑 发表于 2022-4-18 12:42
谢谢

早上好

马黑黑

樵歌 发表于 2022-4-19 07:52
早上好

早啊

加林森

来学习

樵歌

马黑黑 发表于 2022-4-19 07:53
早啊

回个帖子峰会将为难找，以前是自动跳转到当页楼层，可现在不跳了，得一页页找，我我我，，，

马黑黑

樵歌 发表于 2022-4-19 21:29
回个帖子峰会将为难找，以前是自动跳转到当页楼层，可现在不跳了，得一页页找，我我我，，，

怎么回事呢

红影

马黑黑 发表于 2022-4-18 22:12
希望如此吧

看你那么快弄出来了，貌似没经过冷处理的过程呢厉害

马黑黑

红影 发表于 2022-4-20 11:55
看你那么快弄出来了，貌似没经过冷处理的过程呢厉害

原理了然于胸的

红影

马黑黑 发表于 2022-4-20 12:11
原理了然于胸的

黑黑太厉害了