css picture
css picture
demo
https://github.com/cyanharlow/purecss-vignes
https://diana-adrianne.com/purecss-vignes/
.strawberry .fruit {
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #D83131;
border-radius: 50% 50% 50% 50% / 24% 25% 62% 73%;
box-shadow: inset 0 -23px 25px -3px #750000, inset 0 0 16px 3px #690303, inset 10px -27px 34px 7px #800, inset 53px -19px 71px 3px #A40101, inset 57px 71px 13px -34px #FFDADA;
}
<div class="strawberry">
<div class="fruit"></div>
<div class="seed seed1"></div>
<div class="seed seed2"></div>
<div class="seed seed3"></div>
<div class="seed seed4"></div>
<div class="seed seed5"></div>
<div class="seed seed6"></div>
<div class="seed seed7"></div>
<div class="seed seed8"></div>
<div class="seed seed9"></div>
<div class="seed seed10"></div>
<div class="seed seed11"></div>
<div class="seed seed12"></div>
<div class="seed seed13"></div>
<div class="seed seed14"></div>
<div class="seed seed15"></div>
<div class="seed seed16"></div>
<div class="seed seed17"></div>
<div class="seed seed18"></div>
<div class="seed seed19"></div>
<div class="seed seed20"></div>
<div class="seed seed21"></div>
<div class="seed seed22"></div>
<div class="seed seed23"></div>
<div class="seed seed24"></div>
<div class="seed seed25"></div>
<div class="seed seed26"></div>
<div class="seed seed27"></div>
<div class="seed seed28"></div>
<div class="seed seed29"></div>
<div class="seed seed30"></div>
<div class="seed seed31"></div>
<div class="seed seed32"></div>
<div class="seed seed33"></div>
<div class="seed seed34"></div>
<div class="seed seed35"></div>
<div class="seed seed36"></div>
<div class="seed seed37"></div>
<div class="seed seed38"></div>
<div class="seed seed39"></div>
<div class="seed seed40"></div>
<div class="seed seed40"></div>
<div class="seed seed41"></div>
<div class="seed seed42"></div>
<div class="seed seed43"></div>
<div class="seed seed44"></div>
<div class="seed seed45"></div>
<div class="seed seed46"></div>
<div class="seed seed47"></div>
<div class="seed seed48"></div>
<div class="seed seed49"></div>
<div class="seed seed50"></div>
<div class="seed seed51"></div>
<div class="seed seed52"></div>
<div class="seed seed53"></div>
<div class="seed seed54"></div>
<div class="seed seed55"></div>
<div class="seed seed56"></div>
<div class="seed seed57"></div>
<div class="seed seed58"></div>
<div class="seed seed59"></div>
<div class="seed seed60"></div>
<div class="seed seed61"></div>
<div class="seed seed62"></div>
<div class="seed seed63"></div>
<div class="seed seed64"></div>
<div class="seed seed65"></div>
<div class="seed seed66"></div>
<div class="seed seed67"></div>
<div class="seed seed68"></div>
<div class="seed seed69"></div>
<div class="seed seed70"></div>
<div class="leaf">
<div class="tip1"></div>
<div class="tip2"></div>
<div class="tip3"></div>
<div class="tip4"></div>
<div class="tip5"></div>
<div class="tip6"></div>
</div>
<div class="stem"></div>
</div>
css picture的更多相关文章
- css实现平行四边形、菱形图片效果
一.平行四边形 1. 使用两个元素实现 html <a class="button"> <div>click me</div> </a&g ...
- 使用html2canvas实现批量生成条形码
/*前台代码*/ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Generat ...
- 用css3绘制你需要的几何图形
1.圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class="size example ...
- css3绘制几何图形
用css3绘制你需要的几何图形 1.圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class=&q ...
- Python协程爬取妹子图(内有福利，你懂得~)
项目说明: 1.项目介绍 本项目使用Python提供的协程+scrapy中的选择器的使用(相当好用)实现爬取妹子图的(福利图)图片,这个学会了,某榴什么的.pow(2, 10)是吧! 2.用到的知 ...
- Python网络爬虫 | Scrapy爬取妹子图网站全站照片
根据现有的知识,写了一个下载妹子图(meizitu.com)Scrapy脚本,把全站两万多张照片下载到了本地. 网站的分析 网页的网址分析 打开网站,发现网页的网址都是以 http://www.mei ...
- Box-shadow制作漂亮的外阴影输入框
背景:之前做项目中的一个移动端页面,关于在搜索框中输入信息查找对应的照片 改了几次ui图之后,最终的搜索框的设计图如下: 开始做页面的时候,就想到了用box-shadow 来实现外阴影边框.用bord ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS: Float a div on another div, Ex: Text caption on picture
<style type="text/css"> .figure { width: 316px; height: 205px; display: block; borde ...
随机推荐
- Go Concurrency Patterns: Context At Google, we require that Go programmers pass a Context parameter as the first argument to every function on the call path between incoming and outgoing requests.
小结: 1. Background is the root of any Context tree; it is never canceled: 2. https://blog.golang. ...
- Springboot中PropertySource注解的使用
https://blog.csdn.net/qq_30739519/article/list/3 注解 https://blog.csdn.net/qq_30739519/article/detail ...
- HTTPS是怎么保证数据安全传输的？
前言 关于HTTPS的连接过程,也是老生常谈的话题了. 其中涉及到的数字证书.电子签名.SSL/TLS.对称加密.非对称加密的问题总是让人摸不清头脑,不知道怎么回答. 今天就和大家再熟悉熟悉这其中千丝 ...
- CSS选择器，属性前缀，长度单位，变形效果，过渡效果，动画效果
CSS3选择器 ·*通配选择器 ·E标签选择器 ·E#id ID选择器 ·E.class类选择器 ·E F包含选择器,后代选择器 ·E>F子包含选择器 ·E+F相邻兄弟选择器 ·E[foo]属性 ...
- 函数式编程(logging日志管理模块)
本节内容 日志相关概念 logging模块简介 使用logging提供的模块级别的函数记录日志 logging模块日志流处理流程 使用logging四大组件记录日志 配置logging的几种方式 向日 ...
- H3C交换机端口聚合配置
1.接入交换机: interface Ten-GigabitEthernet1/0/21 port link-mode bridge port link-type trunk port trunk p ...
- Think in Java 第四 五 章
Think in Java 第四章 控制执行流程 测试while public class whileTest { static boolean condition(){ boolean result ...
- linux（4）Linux 文件内容查看
查看文件内容总览 cat 由第一行开始显示文件内容 tac 从最后一行开始显示,可以看出 tac 是 cat 的倒着写! nl 显示的时候,顺道输出行号! more 一页一页的显示文件内容 less ...
- 2019 Multi-University Training Contest 2 Harmonious Army(最小割)
题意:给你n个点 每个点都有两种选择 成为战士或者法师 现在给你m个关系 对应这两个人的对应关系的权值A,B,C 思路:按照下面的思路建图跑最小割(要注意权值要乘2 可能存在不整除的情况) #incl ...
- P3980 [NOI2008]志愿者招募 (费用流)
题意:最多1000天 每天需要至少ai个工人施工 有10000种工人可以雇佣 每种工人可以工作si到ti天 雇佣一个的花费是ci 问怎样安排使得施工花费最少 思考:最直白的建模方式 就是每种工人可以和 ...