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. Service Mesh 在百度网盘数万后端的落地实践

    https://www.infoq.cn/article/vpa6aypkizuqiijzflih

  2. TCMalloc源码学习（二）

    替换libc中的malloc free 不同平台替换方式不同. 基于unix的系统上的glibc,使用了weak alias的方式替换.具体来说是因为这些入口函数都被定义成了weak symbols, ...

  3. TCMalloc源码学习（一）

    打算一边学习tcmalloc的源码一边写总结文章.先从转述TCMalloc的一篇官方文档开始(TCMalloc : Thread-Caching Malloc). 为什么用TCMalloc TCMal ...

  4. epoll在fork子进程中的问题

    epoll_create 创建的 文件描述符和其他文件描述符一样,是被fork出的子进程继承的,那也就是子进程可以使用这个epoll fd添加感兴趣的io(epoll_ctl),然后是可以影响到父进程 ...

  5. Java 执行过程中的内存模型

    一.前言 本文的主要工作:尝试以时间顺序追踪一遍 Java 执行的整个过程,以及展示 JVM 中内存模型的相应变化. 本文的主要目的:希望能够通过 Java 执行过程的冰山一角,增进对编程语言工作原理 ...

  6. P95、P99.9百分位数值——服务响应时间的重要衡量指标

    前段时间,在对系统进行改版后,经常会有用户投诉说页面响应较慢,我们看了看监控数据,发现从接口响应时间的平均值来看在500ms左右,也算符合要求,不至于像用户说的那么慢,岁很费解,后来观察其它的一些指标 ...

  7. Spring框架——JDBC与事务管理

    JDBC JDBCTemplate简介 XML配置JDBCTemplate 简化JDBC模板查询 事务管理 事务简介 Spring中的事务管理器 Spring中的事务管理器的不同实现 用事务通知声明式 ...

  8. Jenkins Pipelines+Docker执行RobotFramework自动化测试

    一.Jenkins Pipelines介绍 Pipeline,简而言之,就是一套运行于Jenkins上的工作流框架,将原本独立运行于单个或者多个节点的任务连接起来,实现单个任务难以完成的复杂流程编排与 ...

  9. Luogu 2017 Autumn Camping 游记

    颓得不行的我到D2才想起来自己可以写一篇low得不能再low的游记,然后就动笔了...... Day0 愉快地看着三联,想着别人放一天我放四天的悠闲生活,内心甚是平静.然而晚上回到家就开始浪了,看完了 ...

  10. hdu5402 Travelling Salesman Problem

    Problem Description Teacher Mai is in a maze with n rows and m columns. There is a non-negative numb ...