论坛 › 马黑黑教程专版 › 巧用css-doodle单元格伪元素做形状

马黑黑 发表于 2023-6-9 07:47

巧用css-doodle单元格伪元素做形状

<style>
.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); background: #f9f9f9; box-sizing: border-box;         overflow-x: auto; tab-size: 3; position: absolute; }
.hCode { left: 40px; margin-left: -40px; padding-left: 45px; }
.hLineNum { width: 40px; background: #ccc; border-right: 1px solid #ccc; text-align: right; pointer-events: none; }
.stage { display: grid; place-items: center; }
.hidden { display: none; }
</style>

<div class="papa">
        <p>以下代码，1、5、9单元格都通过 @shape 属性切成四叶草外观，运行代码后请逐一将鼠标移上去，观察鼠标指针手型出现的情形。</p>
        <div class="mama">
                <pre class="hCode">&lt;css-doodle grid="3"&gt;
        :doodle {@size: 300px; gap: 1px;}
        background: tan;
        @nth(1) {
                @shape: clover 4;
                background: rebeccapurple;
                cursor: pointer;
        }
        @nth(5) {
                background: pink;
                cursor: pointer;
                :before {
                        content: '';
                        @size: 100%;
                        @shape: clover 4;
                        background: red;
                }
        }
        @nth(9) {
                @shape: clover 4;
                cursor: pointer;
                :after {
                        content: '';
                        @size: 100%;
                        background: purple;
                        cursor: pointer;
                }
        }
&lt;/css-doodle&gt;</pre>
                <pre class="hLineNum"></pre>
        </div>
        <p><button class="btnok" type="button" value="运行代码">运行代码</button></p>
        <div class="stage"></div>
        <p>第五个单元格全范围显示手型，它是本文的核心：利用伪元素做形状，单元格主体默认为矩形。其他两个单元格，第一和第九个，单元格主体就是四叶草，第九个企图加载相同尺寸的伪元素，很遗憾，伪元素也被切割成了四叶草——伪元素设置为紫色。可见，为让有镂空的单元格能顺畅实现鼠标交互，我们可以像第五个单元格那样进行处理：单元格的形状使用伪元素完成，单元格主体原样透明呈现。</p>
</div>

<script>

let script = document.createElement('script');
script.src = '/css-doodle.min.js';
document.head.appendChild(script);

let btns = document.querySelectorAll('.btnok'),
        stages = document.querySelectorAll('.stage'),
        hCodes = document.querySelectorAll('.hCode'),
        hLineNums = document.querySelectorAll('.hLineNum'),
        mamas = document.querySelectorAll('.mama');

btns.forEach((item,key) => {
        let lines = hCodes.innerText.trim().split('\n').length;
        let str = '';
        for(i = 0; i < lines; i ++) {
                str += i + 1 + '\n';
        }
        hLineNums.innerText = str;
        mamas.style.cssText += `height: ${hCodes.offsetHeight + 10}px`;
        item.onclick = () => {
                let val = item.value;
                stages.innerHTML = val === '运行代码' ? hCodes.innerText : '';
                item.value = item.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
        }
});

</script>

马黑黑 发表于 2023-6-9 07:53

利用一楼对第五个单元格的处理方法，《大地》一帖，可以空出一个单元格：四叶草按钮仅需使用一个单元格来完成，所以在相同单元格总数的基础上，鹰多出了一只——

http://mahei.freeee.ml/art/bshow.php?st=3&sd=3&art=mahei_1686231267

未经改造的帖子，只有两只鹰——

https://www.huachaowang.com/forum.php?mod=viewthread&tid=69267

马黑黑 发表于 2023-6-9 07:58

实际应用中，第五单元格的处理细节中，应透明化单元格主体的背景色，方法：

如果单元格从未设置背景色，则不设置它就行；如果总体设置了所有单元格的 background 属性，在它这里则需要设置为 background: none; 或 background: transparent; 即可。

醉美水芙蓉 发表于 2023-6-9 11:50

红影 发表于 2023-6-9 12:22

马黑黑 发表于 2023-6-9 07:58
实际应用中，第五单元格的处理细节中，应透明化单元格主体的背景色，方法：

如果单元格从未设置背景色， ...

你设单元格底色，只是为了让方便观察鼠标指针手型吧。

红影 发表于 2023-6-9 12:23

这个好，可以节约一个单元格了{:4_199:}

红影 发表于 2023-6-9 12:27

“单元格的形状使用伪元素完成，单元格主体原样透明呈现。”
嗯，这样就能让有镂空的单元格能顺畅实现鼠标交互了，记下了。谢谢黑黑{:4_199:}

马黑黑 发表于 2023-6-9 13:45

红影 发表于 2023-6-9 12:27
“单元格的形状使用伪元素完成，单元格主体原样透明呈现。”
嗯，这样就能让有镂空的单元格能顺畅实现鼠标 ...

慢慢了解css-doodle的特性

马黑黑 发表于 2023-6-9 13:45

醉美水芙蓉 发表于 2023-6-9 11:50
好神奇的，多出两只老鹰！

{:4_170:}

马黑黑 发表于 2023-6-9 13:46

红影 发表于 2023-6-9 12:23
这个好，可以节约一个单元格了

方法确实不错

马黑黑 发表于 2023-6-9 13:46

红影 发表于 2023-6-9 12:22
你设单元格底色，只是为了让方便观察鼠标指针手型吧。

是的

红影 发表于 2023-6-9 16:32

马黑黑 发表于 2023-6-9 13:45
慢慢了解css-doodle的特性

正在慢慢适应它呢。

红影 发表于 2023-6-9 16:33

马黑黑 发表于 2023-6-9 13:46
方法确实不错

又是被黑黑研究出来的新方法。

红影 发表于 2023-6-9 16:34

马黑黑 发表于 2023-6-9 13:46
是的

我猜对了{:4_205:}

梦缘 发表于 2023-6-9 16:59

谢老师的代码分享，问好！{:4_204:}

樵歌 发表于 2023-6-9 17:22

加分走人{:4_199:}

南无月 发表于 2023-6-9 18:42

{:4_178:}新课新课，留着慢慢学

马黑黑 发表于 2023-6-10 07:51

南无月 发表于 2023-6-9 18:42
新课新课，留着慢慢学

理解CSS伪元素，理解这个就不难

马黑黑 发表于 2023-6-10 07:55

红影 发表于 2023-6-9 16:34
我猜对了

加十分

马黑黑 发表于 2023-6-10 07:55

红影 发表于 2023-6-9 16:33
又是被黑黑研究出来的新方法。

常规CSS，伪元素是不会被跟着切割的

查看完整版本: 巧用css-doodle单元格伪元素做形状