金屋藏娇：用纯css-doodle布局帖子

马黑黑

:doodle { @size: 1024px 640px; background: url('https://638183.freep.cn/638183/t23/webp1/room.webp') no-repeat center/cover; margin: 80px 0 0 calc(50% - 593px); } position: absolute; @at(1,1) { @size: 300px; background: url('https://638183.freep.cn/638183/t23/webp1/girl.webp') no-repeat center/cover; left: calc(50% - 150px); bottom: 100px; -webkit-box-reflect: below -5px linear-gradient(transparent,transparent 65%,rgba(0,0,0,.8)); } @at(1,2) { @size: 100px; @shape: clover 4; background: lightblue; left: 20px; top: 30px; }

马黑黑

css-doodle 代码

1. <css-doodle grid="1x2">
   
2.   :doodle {
   
3.     @size: 1024px 640px;
   
4.     background: url('https://638183.freep.cn/638183/t23/webp1/room.webp') no-repeat center/cover;
   
5.     margin: 80px 0 0 calc(50% - 593px);
   
6.   }
   
7.   position: absolute;
   
8.   @at(1,1) {
   
9.     @size: 300px;
   
10.     background: url('https://638183.freep.cn/638183/t23/webp1/girl.webp') no-repeat center/cover;
    
11.     left: calc(50% - 150px);
    
12.     bottom: 100px;
    
13.     -webkit-box-reflect: below -5px linear-gradient(transparent,transparent 65%,rgba(0,0,0,.8));
    
14.   }
    
15.   @at(1,2) {
    
16.     @size: 100px;
    
17.     @shape: clover 4;
    
18.     background: lightblue;
    
19.     left: 20px;
    
20.     top: 30px;
    
21.   }
    
22. </css-doodle>

复制代码

马黑黑

代码解释
头尾两行：创建 css-doodle 标签，grid="1x2" 表示网格形式为 1列 2 行；

第2-6行：:doodle 选择器设置，针对的是父元素，其中——

    第 3 行设置帖子尺寸为 1024*640；
    第 4 行设置帖子背景；
    第 5 行设置帖子定位。

第 7 行：设置单元格为绝对定位。

第8-14行：@at(1,1) { ... }

    设置在第一列、第一行的单元格，即一楼效果中的菇凉，其中——

    09行：尺寸；
    10行：背景图片；
    11、12行：定位；
    13行：设置影子（Chromium内核浏览器有效）

第15-21行：@at(1,2) { ... }

    设置位于 列1行2 的单元格，即一楼效果中左上角的四叶草，其中——

    16行：尺寸；
    17行：形状；
    18行：背景色；
    19、20行：定位

马黑黑

可以根据需要设置单元格总数，例如下面的页面：

少女之歌 (freeee.ml)

红影

这个倒影真漂亮

红影

如果不做布局，也能定位的吧，定位时的参照会不同。
为什么四叶草反倒是@at(1,2) ，看位置还以为和美女应该是反一下的呢。

红影

马黑黑 发表于 2023-4-23 09:46
可以根据需要设置单元格总数，例如下面的页面：

少女之歌 (freeee.ml)

这个比这里的例子更复杂，看到里面还带余弦的就懵了

马黑黑

红影 发表于 2023-4-23 10:30
这个比这里的例子更复杂，看到里面还带余弦的就懵了

数学功底得有，没有的话，弄个文档，将常用到的东东记下来，用的时候找找。

马黑黑

红影 发表于 2023-4-23 10:30
如果不做布局，也能定位的吧，定位时的参照会不同。
为什么四叶草反倒是@at(1,2) ，看位置还以为和美女应 ...

单元格已经设置了绝对定位，它们都在 xy坐标的 {0，0} 处，而后将它们在一一放置到所需的地方。

在 css-doodle 里，单元格没有做定位前是自然排列的，为了能够随心所欲将它们放置到任何地方，我们需要给它们设定一个 position 属性值 absolute

马黑黑

红影 发表于 2023-4-23 10:27
这个倒影真漂亮

可惜有一些主流浏览器不支持，Firefox就不支持

马黑黑

醉美水芙蓉 发表于 2023-4-23 11:43
欣赏黑黑老师新作品！

这个不是作品，这个帖子主要是讲一讲使用 css-doodle 来设计帖子元素。通过此例，大家应该可以感受到，如果掌握了 css-doodle 的基本操作，做帖子会变得更容易。

红影

马黑黑 发表于 2023-4-23 11:04
数学功底得有，没有的话，弄个文档，将常用到的东东记下来，用的时候找找。

三角函数不难，用到帖子里不明白用法的含义

红影

马黑黑 发表于 2023-4-23 11:07
单元格已经设置了绝对定位，它们都在 xy坐标的 {0，0} 处，而后将它们在一一放置到所需的地方。

在 cs ...

嗯嗯，设置了参照系统，就可以在其中安排位置了。

红影

马黑黑 发表于 2023-4-23 11:08
可惜有一些主流浏览器不支持，Firefox就不支持

还好我不是这个浏览器。

梦缘

感谢老师的代码分享，欣赏点赞！

马黑黑

梦缘 发表于 2023-4-23 16:13
感谢老师的代码分享，欣赏点赞！

感谢

马黑黑

红影 发表于 2023-4-23 13:33
还好我不是这个浏览器。

Chromium内核的支持

马黑黑

红影 发表于 2023-4-23 13:31
三角函数不难，用到帖子里不明白用法的含义

不外乎就是制定路线，计算各点的xy坐标

马黑黑

红影 发表于 2023-4-23 13:33
嗯嗯，设置了参照系统，就可以在其中安排位置了。

这个和CSS+HTML布局原理一致，它就是从那里来的