CSS Shapes

shape-outside & shape-image-threshold



<img class=”element” src=”image.png” />

<p>Lorem ipsum…</p>

<style>

.element{

  shape-outside: url(image.png);

  shape-image-threshold: 0.5;

  float: left;

}

</style>

https://www.html5rocks.com/en/tutorials/shapes/getting-started/

clip-path

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path



clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

mask & mask-borde

https://www.html5rocks.com/en/tutorials/masking/adobe/



img:hover {

  clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);

  animate: star 3s;

}

@keyframes star {

  0% {

    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);

  },

  100% {

    clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);

  }

}




img {

  -webkit-mask-box-image: url("stamp.svg") 35 repeat;

  mask-border: url("stamp.svg") 35 repeat;

}

https://developer.mozilla.org/en-US/docs/Web/CSS/mask

https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image

refs

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

CSS Shapes的更多相关文章

  1. 奇妙的 CSS shapes(CSS图形)

    CSS 发展到今天已经越来越强大了.其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到.今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outsid ...

  2. 奇妙的 CSS shapes(CSS图形) 【css 图形，绘图，CSS 几何图形)】

    http://www.cnblogs.com/coco1s/p/6992177.html <!DOCTYPE html> <html> <head> <met ...

  3. 【CSS】305- [译] Web 使用 CSS Shapes 的艺术设计

    %; %; %; %; 0, 0 100%, 100% 100%); %; %; % 0, 0 100%, 100% 100%); %; %; ) p:nth-of-type(1)::before { ...

  4. CSS shapes布局教程

    文章参考至 一.前言&索引 CSS Shapes布局可以实现不规则的文字环绕效果,需要和浮动配合使用. 兼容性如下图: 还是很不错的,移动端可用,内部中后台项目可用. CSS shapes布局 ...

  5. 借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海

    CSS代码: .box { max-width: 414px; height: 480px; border: solid #000; margin: auto; overflow: auto; } . ...

  6. CSS的clip-path 一

    首先介绍一下,我觉得前端开发都是很具有分享精神的,很多人都写出了很多优秀的总结经验供新手们参考,本人只是个搬运工,将别人优秀的文章进行了总结,本文主要转载自  大漠  的文章  http://www. ...

  7. css中clip-path属性的运用

    今天看到一位同学的需求,要在一个div中加一个小尖尖,对话时发的图片,旁边这个三角是怎么实现与图片的颜色一致,效果如下: 当然,解决这个问题有各种奇淫巧技,现在我们来看一个css属性clip-path ...

  8. CSS的clip-path

    在Web网页中主要是以矩形分布的.而平面媒体则倾向于更多不同的形状.造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容.这也就造成了很多设计师的创意发挥,就算是有创意,前端实现也将付出巨 ...

  9. CSS之剪切横幅

    简述 clip-path属性指定一个应用到元素上的剪切路径.应用在SVG中<clipPath>元素上的属性值可以完全运用在clip-path属性上.还可以使用CSS Shapes模块中的基 ...

随机推荐

  1. 2021最新WordPress安装教程（一）：Centos7安装Apache

    一转眼2020年已经过去了,看网络上很多WordPress的安装教程都比较旧,有些写的不太详细,WordPress是站长最喜欢的一款建站系统,数据统计到2020年为止,WordPress在所有网站的市 ...

  2. 小程序UnionID浅谈

    UnionID机制说明 如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用.网站应用和公众帐号(包 ...

  3. 关于SANGFOR AC记录上网记录

    1.查看加密APP的访问记录,不支持推送证书的方式.也就是这种的是没办法查看到的:2.查看加密网站的访问记录,通过推送证书,电脑可以查看到:手机端安卓的不能,苹果可以,但是不建议做,适用性不好:3.查 ...

  4. （9）Linux的哲学思想及文件概念

    一.Linux的哲学思想 1. 一切皆文件 把几乎所有资源统统抽象为文件形式,包括硬件设备,甚至通信接口等,便于统一管理和定义: 对文件的操作有:open,read,write,close,delet ...

  5. Linux常用命令：性能命令

    本文介绍Linux常用性能统计分析命令,监控进程或者系统性能.主要包括CPU(top.mpstat).内存(vmstat.free).I/O(iostat).网络性能(sar).系统日志信息(dems ...

  6. .net core 和 WPF 开发升讯威在线客服与营销系统：实现对 IE8 的完全完美支持 【干货】

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...

  7. codeblocks输出中文乱码解决办法

    在使用codeblocks进行编程的时候我发现控制台输出会出现中文乱码,就像这样: 所以很快我就问了老师,解决步骤如下: 一:如果源码是用codeblock编写的,打开Setting->Edit ...

  8. 1155 Heap Paths

    题干前半略. Sample Input 1: 8 98 72 86 60 65 12 23 50   Sample Output 1: 98 86 23 98 86 12 98 72 65 98 72 ...

  9. 【noi 2.6_6046】数据包的调度机制（区间DP）

    题意:给定一个队列延迟值为Di的任务,以任意顺序入栈和出栈,第K个出栈的延迟值为(K-1)*Di.问最小的延迟值. 解法:f[i][l]表示完成以第i个任务开始,长度为l,到第i+l-1个任务的最小延 ...

  10. Codeforces Round #651 (Div. 2) A. Maximum GCD (思维)

    题意:在\(1\)~\(n\)中找两个不相等的数使得他们的\(gcd\)最大. 题解:水题,如果\(n\)是偶数,那么一定取\(n\)和\(n/2\),\(n\)是奇数的话,取\(n-1\)和\((n ...