css picture

https://github.com/cyanharlow

https://diana-adrianne.com/

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的更多相关文章

  1. css实现平行四边形、菱形图片效果

    一.平行四边形 1. 使用两个元素实现 html <a class="button"> <div>click me</div> </a&g ...

  2. 使用html2canvas实现批量生成条形码

    /*前台代码*/ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Generat ...

  3. 用css3绘制你需要的几何图形

    1.圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class="size example ...

  4. css3绘制几何图形

    用css3绘制你需要的几何图形 1.圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class=&q ...

  5. Python协程爬取妹子图(内有福利，你懂得~)

    项目说明: 1.项目介绍   本项目使用Python提供的协程+scrapy中的选择器的使用(相当好用)实现爬取妹子图的(福利图)图片,这个学会了,某榴什么的.pow(2, 10)是吧! 2.用到的知 ...

  6. Python网络爬虫 | Scrapy爬取妹子图网站全站照片

    根据现有的知识,写了一个下载妹子图(meizitu.com)Scrapy脚本,把全站两万多张照片下载到了本地. 网站的分析 网页的网址分析 打开网站,发现网页的网址都是以 http://www.mei ...

  7. Box-shadow制作漂亮的外阴影输入框

    背景:之前做项目中的一个移动端页面,关于在搜索框中输入信息查找对应的照片 改了几次ui图之后,最终的搜索框的设计图如下: 开始做页面的时候,就想到了用box-shadow 来实现外阴影边框.用bord ...

  8. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  9. CSS: Float a div on another div, Ex: Text caption on picture

    <style type="text/css"> .figure { width: 316px; height: 205px; display: block; borde ...

随机推荐

  1. MySQL 高性能优化规范建议

    数据库命令规范 所有数据库对象名称必须使用小写字母并用下划线分割 所有数据库对象名称禁止使用 MySQL 保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来) 数据库对象的命名要能做到见名 ...

  2. JavaWeb——JSP内置对象request,response，重定向与转发 学习总结

    什么是JSP内置对象 九大内置对象 requestJSP内置对象 request对象常用方法 request练习 responseJSP内置对象 response练习 response与request ...

  3. Fastjson使用实例

    Fastjson使用实例 一.FastJson使用范例 1.1FastJson三个核心类 1.2Maven依赖 1.3Scala API 1.3.1反序列化 1.3.2序列化 1.4Java API ...

  4. Horde Groupware Webmail Edition 远程命令执行

    saturn:~ mr_me$ ./poc.py (+) usage ./poc.py <target> <path> <user:pass> <connec ...

  5. stop脚本

    PID=$(ps -ef | grep eladmin-system-2.0.jar | grep -v grep | awk '{ print $2 }')if [ -z "$PID&qu ...

  6. 深入浅出Java线程池：源码篇

    前言 在上一篇文章深入浅出Java线程池:理论篇中,已经介绍了什么是线程池以及基本的使用.(本来写作的思路是使用篇,但经网友建议后,感觉改为理论篇会更加合适).本文则深入线程池的源码,主要是介绍Thr ...

  7. 2020牛客暑期多校训练营（第五场）B - Graph （异或 最小生成树 分治 Trie）

    B - Graph 题目链接 每次操作不会改变两点之间的路径异或和 以 1 号点为起点,算出任意一点到 1 号点的异或值 dis[i](把该值当做 i 号点权值), 那么任意两点的异或值为 \(dis ...

  8. CF 1288 E. Messenger Simulator

    CF 1288 E. Messenger Simulator 题目传送门 官方题解 题意想必大家都明白了这里就不赘述了,这里只想重点记录一下几种实现方法 分析 设向前移动的序列为\(a\)序列 对于没 ...

  9. 1154 Vertex Coloring

    题目前半略 Sample Input: 10 11 8 7 6 8 4 5 8 4 8 1 1 2 1 4 9 8 9 1 1 0 2 4 4 0 1 0 1 4 1 0 1 3 0 0 1 0 1 ...

  10. Codeforces Round #690 (Div. 3)

    第一次 ak cf 的正式比赛,不正式的是寒假里 div4 的 Testing Round,好啦好啦不要问我为什么没有 ak div4 了,差一题差一题 =.= 不知不觉已经咕了一个月了2333. 比 ...