CSS小温泉

凡哥

2024年7月28日 星期日

使用角向渐变做国际象棋棋盘

效果：

代码：

<style>
#papa {
    margin: 20px auto;
    width: 400px;
    height: 400px;
    background: conic-gradient(#000 90deg, #fff 0deg 180deg, #000 180deg 270deg, #fff 0deg) center/25% 25%;
    border: 1px solid #000;
}
</style>

<div id="papa"></div>

花简静

凡哥 发表于 2024-7-28 21:44
#papa {
    margin: 20px auto;
    width: 400px;

这个学了渐变之后终于知道为何能画这么正的格子。
赞叹一下，这个用得太灵活，出现意想不到的结果。

凡哥

花简静 发表于 2024-8-10 10:22
这个学了渐变之后终于知道为何能画这么正的格子。
赞叹一下，这个用得太灵活，出现意想不到的结果。 ...

多实践就会有不同的体会

花简静

凡哥 发表于 2024-8-10 11:59
多实践就会有不同的体会

渐变吧，一直感觉就是边缘模糊渐渐融入。。
用它来画线画格子画棋盘就有点颠覆认知。
人家就是能做到，所以……除了赞叹就是称神。。

凡哥

花简静 发表于 2024-8-10 12:52
渐变吧，一直感觉就是边缘模糊渐渐融入。。
用它来画线画格子画棋盘就有点颠覆认知。
人家就是能做到， ...

讲义里讲到硬过渡、软过渡、硬线、防锯齿这类概念，硬过渡和硬线或硬边界等，就是用于画格子画线的

花简静

凡哥 发表于 2024-8-10 17:38
讲义里讲到硬过渡、软过渡、硬线、防锯齿这类概念，硬过渡和硬线或硬边界等，就是用于画格子画线的 ...

嗯哪，这个讲义真的可以反复看，每次都有新的收获

花简静

凡哥 发表于 2024-8-10 17:38
讲义里讲到硬过渡、软过渡、硬线、防锯齿这类概念，硬过渡和硬线或硬边界等，就是用于画格子画线的 ...

就是看了讲义里的这些概念，才知道画格子和画线的原理。。
讲义还是要反复细看。。
都是有用的东西

凡哥

2024年8月22日 星期四

CSS+HTML多叶草

凡哥

多叶草代码

<style>
#mydiv {
	margin: 80px auto;
	width: 80px;
	height: 80px;
	filter: drop-shadow(0 0 1px darkgreen);
	position: relative;
}
.leaf {
	position: absolute;
	left: -50%;
	top: -50%;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, yellow, green);
	border-radius: 80% 0%;
	transform-origin: 100% 100%;
	transform: rotate(var(--deg)) translateY(80px);
}
.leaf:nth-of-type(1) { --deg: 0deg; }
.leaf:nth-of-type(2) { --deg: 72deg; }
.leaf:nth-of-type(3) { --deg: 144deg; }
.leaf:nth-of-type(4) { --deg: 216deg; }
.leaf:nth-of-type(5) { --deg: 288deg; }
</style>

<div id="mydiv">
	<span class="leaf"></span>
	<span class="leaf"></span>
	<span class="leaf"></span>
	<span class="leaf"></span>
	<span class="leaf"></span>
</div>

凡哥

改变一些数据，效果会大不一样。例如，单单改变 .leaf 的 border-radius