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. 。SLI，Service Level Indicator，服务等级指标，其实就是我们选择哪些指标来衡量我们的稳定性。而 SLO，Service Level Objective，服务等级目标，指的就是我们设定的稳定性目标，比如“几个 9”这样的目标。

    .SLI,Service Level Indicator,服务等级指标,其实就是我们选择哪些指标来衡量我们的稳定性.而 SLO,Service Level Objective,服务等级目标,指的就是我 ...

  2. The WebSocket Protocol 1000

    https://tools.ietf.org/html/rfc6455 https://tools.ietf.org/html/rfc6455 7.4.1. Defined Status Codes ...

  3.  Go is more about software engineering than programming language research.

    https://talks.golang.org/2012/splash.article Go at Google: Language Design in the Service of Softwar ...

  4. maven打包三种方式

    https://blog.csdn.net/w820896059/article/details/80423143

  5. 并发安全 sync.Map

    https://mp.weixin.qq.com/s/MqPm7QH3_D9roVkpTs9Xpw 谈谈Go的并发安全相关 原创 歪鼻子 歪鼻子 2020-12-27     package main ...

  6. 大数据之Hadoop技术入门汇总

    今天,小编对Hadoop入门学习知识进行了汇总,帮助大家更好地入手大数据.小编关于Hadoop入门总共发写了12篇原创文章,文章是参照尚硅谷大数据视频教程来进行撰写的. 今天,小编带你解锁正确的阅读顺 ...

  7. 渗透测试工具-sqlmap

    简单来说:一个用来做sql注入攻击的工具 安装 1,下载sqlmap.zip,下载环境: 打开sqlmap官网https://github.com/sqlmapproject/sqlmap/ :下载p ...

  8. Struts 2学习（二）

    文章目录 @[toc] #动态结果 配置时不知道执行后的结果是哪一个,运行时才知道哪个结果作为视图显示给用户. #全局结果 全局就结果可满足一个包中多个Action共享一个结果. 全局结果位于pack ...

  9. spring MVC 3.2中@ResponseBody(Post接口)返回乱码的完美解决方案

    本来因为ajax跨域http远程调用时有问题,在服务端响应时用以下方式解决了,但IE8及下有问题. response.addHeader("Access-Control-Allow-Orig ...

  10. 搜索Ex （洛谷提高历练地）

    搜索Ex P1120 小木棍 题意:不超过65根长度小于50的小木棍(是由一批等长木棍砍断得到的),求原始木棍的最小可能长度 分析:优化+减枝爆搜 搜索状态要记录当前尝试的已经填好的长度,当前尝试填的 ...