CSS Shapes

shape-outside & shape-image-threshold


  2. <img class=”element” src=”image.png” />
  3. <p>Lorem ipsum…</p>
  5. <style>
  6. .element{
  7.   shape-outside: url(image.png);
  8.   shape-image-threshold: 0.5;
  9.   float: left;
  10. }
  11. </style>

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

clip-path

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


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

mask & mask-borde

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


  2. img:hover {
  3.   clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  4.   animate: star 3s;
  5. }
  7. @keyframes star {
  8.   0% {
  9.     clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  10.   },
  11.   100% {
  12.     clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
  13.   }
  14. }

  2. img {
  3.   -webkit-mask-box-image: url("stamp.svg") 35 repeat;
  4.   mask-border: url("stamp.svg") 35 repeat;
  5. }

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. 自修改代码 on the fly 动态编译 即时编译 字节码

    https://zh.wikipedia.org/wiki/自修改代码 自修改代码(Self-modifying code)是指程序在运行期间(Run time)修改自身指令.可能的用途有:病毒利用此 ...

  2. 如何设计一个亿级网关(API Gateway)？

    1.背景 1.1 什么是API网关 API网关可以看做系统与外界联通的入口,我们可以在网关进行处理一些非业务逻辑的逻辑,比如权限验证,监控,缓存,请求路由等等. 1.2 为什么需要API网关 RPC协 ...

  3. editplus 5.0 破解

    先安装软件,安装步骤就不解释了,很傻瓜式的,一直下一步就行.   到了最重要的一步,请看仔细了!!!   在两个输入框中分别输入 注册名 Vovan 注册码 3AG46-JJ48E-CEACC-8E6 ...

  4. Java并发练习

    1.按顺序打印ABC 三个线程,每个线程分别打印A,B,C各十次,现在要求按顺序输出A,B,C package concurrency; import java.util.concurrent.Exe ...

  5. jQuery——样式与动画

    通过jQuery,不仅能够轻松地为页面操作添加简单的视觉效果,甚至能创建更精致的动画. ###修改内联CSS jQuery提供了.css()方法. 这个方法集getter(获取方法)和setter(设 ...

  6. kubenetes 相关命令(转载)

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/xingwangc2014/article/details/51204224好久没写博客了,前段时间公 ...

  7. eclipse中Tomcat修改项目名称

    1.打开你的项目目录,找到一个.project文件,打开后修改<name> test</name>中的值,将test修改成你要修改的名字: 2.在项目目录下,打开.settin ...

  8. java调用shell脚本执行操作

    //定时清空 日志 String shellString = "sh /home/jyapp/delete_log.sh"; Process process = Runtime.g ...

  9. java--Aop--记录日志

    package com.pt.modules.log; import java.util.Map; import java.util.concurrent.ConcurrentHashMap; imp ...

  10. 一条sql查出数据库某张表的所有属性

    select t.TABLE_NAME,--表名 t.COLUMN_NAME,--字段名 t.DATA_TYPE,--字段属性 t.DATA_LENGTH,--类型长度 t.DATA_PRECISIO ...