你值得收藏的66个实用的css开发技巧之图形技巧

目录
文章目录隐藏
  1. Figure Skill 图形技巧

上面我们介绍了色彩技巧相关知识,本文将为大家带来的是你值得收藏的 66 个实用的 css 开发技巧之图形技巧。

Figure Skill 图形技巧

使用 div 描绘各种图形

要点:<div>配合其伪元素(::before、::after)通过 clip、transform 等方式绘制各种图形

场景:各种图形容器

兼容:clip、transform

实例代码:具体查看我之前整理css 优雅的画出形状图形

使用 mask 雕刻镂空背景

要点:通过 mask 为图像背景生成蒙层提供遮罩效果

场景:高斯模糊蒙层、票劵(电影票、购物卡)、遮罩动画

兼容:mask、perspective、transform-style、animation

实例代码:

HTML

<div class="bruce pr flex-ct-x">
	<div class="mask-layer"></div>
</div>

SCSS

$mask-bg: "/static/codepen/mask-bg.jpg";
$mask-text: "/static/codepen/mask-text.jpg";
$logo: "/wp-content/uploads/2019/09/test.png";

.bruce {
	overflow: hidden;
	&::after {
		position: absolute;
		left: -20px;
		right: -20px;
		top: -20px;
		bottom: -20px;
		background: url($mask-bg) no-repeat center/cover;
		filter: blur(10px);
		content: "";
	}
}
.mask-layer {
	position: relative;
	z-index: 9;
	width: 600px;
	height: 300px;
	background: url($mask-text) left center/150% auto;
	mask: url($logo) center/cover;
	animation: move 10s infinite;
}
@keyframes move {
	0% {
		background-position-x: 0;
	}
	50% {
		background-position-x: 100%;
	}
}

效果展示:
使用 mask 雕刻镂空背景

使用 linear-gradient 描绘波浪线

要点:通过 linear-gradient 绘制波浪线

场景:文字强化显示、文字下划线、内容分割线

兼容:gradient

实例代码:

HTML

<div class="bruce flex-ct-x">
	<p class="waveline-text">波浪线文字</p>
</div>

SCSS

@mixin waveline($h, $color: $red) {
	position: relative;
	&::after {
		position: absolute;
		left: 0;
		top: 100%;
		width: 100%;
		height: $h;
		background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
		background-size: $h * 2 $h * 2;
		content: "";
	}
}
.waveline-text {
	height: 20px;
	line-height: 20px;
	letter-spacing: 10px;
	@include waveline(10px);
}

效果展示:
使用 linear-gradient 描绘波浪线

使用 linear-gradient 描绘彩带

要点:通过 linear-gradient 绘制间断颜色的彩带

场景:主题化

兼容:gradient

实例代码:

HTML

<div class="bruce flex-ct-x">
	<div class="colour-bar"></div>
</div>

SCSS

.colour-bar {
	width: 500px;
	height: 50px;
	background-image: repeating-linear-gradient(90deg, $red, $red 50px, $purple 50px, $purple 100px);
}

效果展示:
使用 linear-gradient 描绘彩带

使用 linear-gradient 描绘方格背景

要点:使用 linear-gradient 绘制间断颜色的彩带进行交互生成方格

场景:格子背景、占位图

兼容:gradient

实例代码:

HTML

<div class="bruce flex-ct-x">
	<div class="square-bg"></div>
</div>

SCSS

.square-bg {
	width: 500px;
	height: 300px;
	background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
		linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
	background-position: 0 0, 20px 20px;
	background-size: 40px 40px;
}

效果展示:
使用 linear-gradient 描绘方格背景

使用 box-shadow 描绘单侧投影

要点:通过 box-shadow 生成投影,且模糊半径和负的扩张半径一致,使投影偏向一侧

场景:容器投影、背景补间动画 1、背景补间动画 2、立体投影、文字立体投影、文字渐变立体投影、长投影、霓虹灯、灯光阴影

兼容:box-shadow、filter、text-shadow

实例代码:

HTML

<div class="bruce flex-ct-x">
	<div class="aside-shadow">投影</div>
</div>

SCSS

.aside-shadow {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid;
	width: 100px;
	height: 100px;
	box-shadow: -7px 0 5px -5px $orange;
	font-weight: bold;
	font-size: 30px;
	color: $orange;
}

效果展示:
使用 box-shadow 描绘单侧投影

使用 filter 描绘头像彩色阴影

要点:通过 filter:blur() brightness() opacity()模拟阴影效果

场景:头像阴影

兼容:filter

实例代码:

HTML

<div class="bruce flex-ct-x">
	<div class="avatar-shadow"></div>
</div>

SCSS

$avatar: "/static/codepen/thor.jpg";

.avatar-shadow {
	position: relative;
	border-radius: 100%;
	width: 200px;
	height: 200px;
	background: url($avatar) no-repeat center/cover;
	&::after {
		position: absolute;
		left: 0;
		top: 10%;
		z-index: -1;
		border-radius: 100%;
		width: 100%;
		height: 100%;
		background: inherit;
		filter: blur(10px) brightness(80%) opacity(.8);
		content: "";
		transform: scale(.95);
	}
}

效果展示:
使用 filter 描绘头像彩色阴影

使用 box-shadow 裁剪图像

要点:通过 box-shadow 模拟蒙层实现中间镂空

场景:图片裁剪、新手引导、背景镂空、投射定位

兼容:box-shadow

实例代码:

HTML

<div class="bruce flex-ct-x">
	<div class="img-cliper">
		<img src="/static/codepen/gz.jpg">
		<div class="mask">
			<i></i>
		</div>
	</div>
</div>

SCSS

.img-cliper {
	overflow: hidden;
	position: relative;
	img {
		width: 400px;
	}
	i {
		position: absolute;
		left: 50px;
		top: 30px;
		border-radius: 100%;
		width: 100px;
		height: 50px;
		box-shadow: 0 0 0 9999px rgba(#000, .5);
	}
	.mask {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
}

使用 box-shadow 裁剪图像

使用 outline 描绘内边框

要点:通过 outline 设置轮廓进行描边,可设置 outline-offset 设置内描边

场景:内描边、外描边

兼容:outline

实例代码:

HTML

<div class="bruce flex-ct-x">
	<div class="outside-border"></div>
</div>

SCSS

.outside-border {
	outline: 10px dashed $blue;
	outline-offset: -50px;
	border: 10px dashed $orange;
	width: 300px;
	height: 300px;
	background-color: $green;
}

效果展示:
使用 outline 描绘内边框

以上就是今天为大家带来的你值得收藏的 66 个实用的 css 开发技巧之图形技巧的全部内容,希望对大家有帮助,下篇我们将会为大家介绍css 开发技巧之组件技巧,敬请期待

「点点赞赏,手留余香」

14

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 你值得收藏的66个实用的css开发技巧之图形技巧

1 评论

  1. 收藏了!很赞!

发表回复