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. shiro的授权与认证

    shiro的授权与认证 package com.cy.pj.common.aspect;import java.lang.reflect.Method;import java.util.Arrays; ...

  2. Vue技术点整理-vue.config.js

    1,proxy代理解决本地开发环境跨域问题 配置proxy代理后,proxy会将任何未知请求 (没有匹配到静态文件的请求) 代理到 https://192.168.3.49:8080 vue.conf ...

  3. 记一次，Docker镜像1G多精简至300+M的过程

    记一次,Docker镜像1G多精简至300+M的过程 一.业务场景描述 二.Docker时区不一致,相差8小时 三.通过Docker发布的服务上传文件上传不上去 四.上传的图片带水印,水印中包含的字体 ...

  4. Linux环境mysql快速备份及迁移

    在项目实施的过程中,经常会面临数据库迁移,导出和导出数据,如果用普通的mysql客户端备份,时间较长且容易出错.那么mysql快速备份及迁移,就成为数据库迁移的重中之重. 下面介绍我在项目实现过程中用 ...

  5. java压缩图片设置宽高

    package html2pdf_2; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; ...

  6. 1152 Google Recruitment

    题干前半略. Input Specification: Each input file contains one test case. Each case first gives in a line ...

  7. HDU6321 Dynamic Graph Matching【状压DP 子集枚举】

    HDU6321 Dynamic Graph Matching 题意: 给出\(N\)个点,一开始没有边,然后有\(M\)次操作,每次操作加一条无向边或者删一条已经存在的边,问每次操作后图中恰好匹配\( ...

  8. Educational Codeforces Round 84 (Div. 2)

    Educational Codeforces Round 84 (Div. 2) 读题读题读题+脑筋急转弯 = =. A. Sum of Odd Integers 奇奇为奇,奇偶为偶,所以n,k奇偶性 ...

  9. 【noi 2.6_9288】&【hdu 1133】Buy the Ticket（DP / 排列组合 Catalan+高精度除法）

    题意:有m个人有一张50元的纸币,n个人有一张100元的纸币.他们要在一个原始存金为0元的售票处买一张50元的票,问一共有几种方案数. 解法:(学习了他人的推导后~) 1.Catalan数的应用7的变 ...

  10. CodeForces 630Q Pyramids（数学公式）

    IT City administration has no rest because of the fame of the Pyramids in Egypt. There is a project ...