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

随机推荐

Linux 文件搜索神器 find 实战详解，建议收藏！
大家好,我是肖邦,这是我的第 10 篇原创文章. 在 Linux 系统使用中,作为一个管理员,我希望能查找系统中所有的大小超过 200M 文件,查看近 7 天系统中哪些文件被修改过,找出所有子目录中的 ...
（二）基于Netty的高性能Websocket服务器(netty-websocket-spring-boot)
@toc Netty是一款基于NIO(Nonblocking I/O,非阻塞IO)开发的网络通信框架,对比于BIO(Blocking I/O,阻塞IO),他的并发性能得到了很大提高. 1.Netty为 ...
Hive on MR调优
当HiveQL跑不出来时,基本上是数据倾斜了,比如出现count(distinct),groupby,join等情况,理解 MR 底层原理,同时结合实际的业务,数据的类型,分布,质量状况等来实际的考虑 ...
OpenStack (neutron 网络服务）
neutron介绍提供 OpenStack 虚拟网络服务,也是 OpenStack 重要的核心模块之一,该模块最开始是 Nova 的一部分,叫 nova-network,后来从 Nova 中分离出来 ...
linux系统计划任务
at crontab 一次性计划任务周期性计划任务摘要:linux系统中,可以通过crontab和at两种命令实现计划任务: 计划任务的作用:是做一些周期性的任务,在生产中的主要用来定期备份数据. ...
MySQL 中的自增主键
MySQL 的主键可以是自增的,那么如果在断电重启后新增的值还会延续断电前的自增值吗?自增值默认为1,那么可不可以改变呢?下面就说一下 MySQL 的自增值. 特点保存策略 1.如果存储引擎是 My ...
C#遇见C++的江湖不行！得不到就干掉
C# VS C++ C#代码遇见了非托管dll如何处理问题:托管与非托管,兼容? 方法一:DllImport 托管调试助手 "PInvokeStackImbalance" Me ...
CCPC2019网络赛总结
比赛那会过了两道题,哇贼激动,然后后面就没有然后了... 1003我想到用$kmp$,于是不会$kmp$的我开始找板子套,结果$TLE$,就觉得应该是优化不行,优化后AC妥妥$TLE$,就放弃了. 钓 ...
2019牛客暑期多校训练营（第七场）F-Energy stones（思维+树状数组）
>传送门< 题意:有n块能量石,每秒钟会增加Li的能量,但是一旦增长到了Ci它就不会增长了,它初始的能量为Ei. 现在有若干个时刻ti,会选择下标在[Si,Ti]的能量石吸取它们的能量,这 ...
(EX)中国剩余定理
中国剩余定理问题引入: 有物不知其数,三三数之剩二,五五数之剩三,七七数之剩二.问物几何?<孙子算经> 就是计算一个数$x$满足\(\begin{cases} x≡2(MOD\ 3) ...

css picture

css picture

css picture的更多相关文章

随机推荐

热门专题