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. Linux下unix socket 读写 抓包

    Linux下unix socket 读写 抓包-ubuntuer-ChinaUnix博客 http://blog.chinaunix.net/uid-9950859-id-247877.html

  2. Spring听课笔记（专题二）

    第3章 Spring Bean的装配(上) 3-1:配置项及作用域 1.Bean的配置项: -- Id -- Class (这个必须,其他的都可以不配置) -- Scope (作用域) -- Cons ...

  3. Linux——软件安装

    Linux--软件安装 一.gcc 二.make 三.rpm 四.yum 一.gcc gcc是Linux上面最标准的C语言的编译程序,用来源代码的编译链接. gcc -c hello.c 编译产生目标 ...

  4. Spark Dataset DataFrame空值null,NaN判断和处理

    Spark Dataset DataFrame空值null,NaN判断和处理 import org.apache.spark.sql.SparkSession import org.apache.sp ...

  5. Maven 私服（Nexus)

    @[toc](Maven 私服(Nexus)) 1.Nexus 简介 Nexus是Maven仓库管理器,也可以叫Maven的私服.Nexus是一个强大的Maven仓库管理器,它极大地简化了自己内部仓库 ...

  6. nohup和&后台运行，进程查看及终止

    文章目录 一.nohup 1.1用途:不挂断地运行命令. 1.2语法:nohup Command [ Arg - ] [ & ] 1.3退出状态:该命令返回下列出口值: 二.& 2.1 ...

  7. Nginx，Nginx 搭建图片服务器

    Nginx Nginx 概述 反向代理 工作流程 优点 1:保护了真实的web服务器,保证了web服务器的资源安全 2:节约了有限的IP地址资源 3:减少WEB服务器压力,提高响应速度 4:其他优点 ...

  8. Spring boot 异步线程池

    package com.loan.msg.config; import org.springframework.aop.interceptor.AsyncUncaughtExceptionHandle ...

  9. 深入理解nodejs的HTTP处理流程

    目录 简介 使用nodejs创建HTTP服务 解构request 处理Request Body 处理异常 解构response 简介 我们已经知道如何使用nodejs搭建一个HTTP服务,今天我们会详 ...

  10. cloudera manager server迁移

    一.迁移背景 服务器出了问题,导致整个cm server界面呈现出不可用的状态,也就是获取不到各个大数据组件以及主机相关的状态的信息,整个cm server的前端界面处于瘫痪的状态,不可用,刚开始怀疑 ...