马黑黑 发表于 2023-4-23 09:15

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

<css-doodle grid="1x2">
: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>

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js';
        document.head.appendChild(script);
})();
</script>

马黑黑 发表于 2023-4-23 09:17

css-doodle 代码

<css-doodle grid="1x2">
: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>

马黑黑 发表于 2023-4-23 09:17

本帖最后由 马黑黑 于 2023-4-23 09:36 编辑

代码解释
头尾两行：创建 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行：定位

马黑黑 发表于 2023-4-23 09:46

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

少女之歌 (freeee.ml)

红影 发表于 2023-4-23 10:27

这个倒影真漂亮{:4_187:}

红影 发表于 2023-4-23 10:30

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

红影 发表于 2023-4-23 10:30

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

少女之歌 (freeee.ml)

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

马黑黑 发表于 2023-4-23 11:04

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

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

马黑黑 发表于 2023-4-23 11:07

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

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

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

马黑黑 发表于 2023-4-23 11:08

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

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

醉美水芙蓉 发表于 2023-4-23 11:43

马黑黑 发表于 2023-4-23 11:46

醉美水芙蓉 发表于 2023-4-23 11:43
欣赏黑黑老师新作品！
这个不是作品，这个帖子主要是讲一讲使用 css-doodle 来设计帖子元素。通过此例，大家应该可以感受到，如果掌握了 css-doodle 的基本操作，做帖子会变得更容易。

红影 发表于 2023-4-23 13:31

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

三角函数不难，用到帖子里不明白用法的含义{:4_173:}

红影 发表于 2023-4-23 13:33

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

在 cs ...

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

红影 发表于 2023-4-23 13:33

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

还好我不是这个浏览器。{:4_173:}

梦缘 发表于 2023-4-23 16:13

感谢老师的代码分享，欣赏点赞！{:4_187:}

马黑黑 发表于 2023-4-23 22:34

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

感谢

马黑黑 发表于 2023-4-23 22:39

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

Chromium内核的支持

马黑黑 发表于 2023-4-23 22:40

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

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

马黑黑 发表于 2023-4-23 22:41

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

这个和CSS+HTML布局原理一致，它就是从那里来的
页: [1] 2
查看完整版本: 金屋藏娇：用纯css-doodle布局帖子