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 ...

随机推荐

# Functions are First-Class Citizens in Python 一等公民
# Functions are First-Class Citizens in Python 一等公民https://cn.bing.com/search?form=MOZSBR&pc=MOZ ...
Socket的用法——NIO包下SocketChannel的用法 ———————————————— 版权声明：本文为CSDN博主「茶_小哥」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/ycgslh/article/details/79604074
服务端代码实现如下,其中包括一个静态内部类Handler来作为处理器,处理不同的操作.注意在遍历选择键集合时,没处理完一个操作,要将该请求在集合中移除./*模拟服务端-nio-Socket实现*/pu ...
Hyper-v安装centos后的网络配置
修改配置文件进入目录:cd /etc/sysconfig/network-scripts/ 修改ifcfg-eth0文件(不通机器文件名可能不同,可以通过 ip addr 命令查看网卡名) HWAD ...
synchronized的底层探索
其实没看懂,但是提供了不同的思路,先记下 https://www.cnblogs.com/yuhangwang/p/11256476.html https://www.cnblogs.com/yuha ...
Cobaltstrike去除特征
出品|MS08067实验室(www.ms08067.com) 本文作者:BlackCat(Ms08067实验室内网小组成员) 前言: 红蓝对抗的时候,如果未修改CS特征.容易被蓝队溯源. 去特征的几种 ...
Maven pom中的 scope 详解
Maven的一个哲学是惯例优于配置(Convention Over Configuration), Maven默认的依赖配置项中,scope的默认值是compile,项目中经常傻傻的分不清,直接默认了 ...
设计模式（七）——适配器模式（SpringMVC框架分析）
适配器模式 1 现实生活中的适配器例子泰国插座用的是两孔的(欧标),可以买个多功能转换插头 (适配器) ,这样就可以使用了. 2 基本介绍 1) 适配器模式(Adapter Pattern)将某个类 ...
NOIP2015提高组信息传递 ---并查集问题
题目描述有 n 个同学(编号为 1 到 n )正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为 i 的同学的信息传递对象是编号为 Ti 的同学. 游戏开始时,每人都只 ...
HDOJ 1848(SG函数)
对于SG函数来说,sg[y]=x的意义为,x与y的输赢状态是相同的 sg[y]=mex(y)的定义与n.p点的定义是相同的 #include<iostream>#include<cs ...
P4570 [BJWC2011]元素 (线性基)
题意:n个石头每个石头有a,b两个属性要求选出一些石头使得没有一个子集的a属性xor和为0 且b属性和最大题解:线性基例题了.. 好像需要理解一些性质 1.原序列里任一数都可有由线性基xor得到 ...

css picture

css picture

css picture的更多相关文章

随机推荐

热门专题