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 语言有时也需要考虑对齐的问题
https://mp.weixin.qq.com/s/NE6Y2TVxrl-cpY-36puQcQ
Linux进程内存用量分析之堆内存篇
https://mp.weixin.qq.com/s/a6mLMDinYQGUSaOsGYCEaA 独家|Linux进程内存用量分析之堆内存篇姬晨烜 58技术 2019-12-06 导语本文将介绍 ...
004_C++常见错误类型总结（一）之最后几行错误
1.介绍经常进行代码测试和静态代码分析的同学,应该会遇到这样的一个问题,就是一个程序段的最后几行,或者一个源文件末尾会出现错误.本文,结合专业的静态代码分析软件PSV-Studio提供错误类型代码库 ...
linux yum rpm 和 apt-get dpkg 安装、卸载软件
一般来说著名的linux系统基本上分两大类: 1.RedHat系列:Redhat.Centos.Fedora等 2.Debian系列:Debian.Ubuntu等 RedHat 系列 ...
C链表-C语言入门经典例题
struct student { long num; float score; struct student *next; }; 注意:只是定义了一个struct student类型,并未实际分配存储 ...
SpringBoot整合spring-security-oauth2完整实现例子
SpringBoot整合spring-security-oauth2完整实现例子技术栈 : springboot + spring-security + spring-oauth2 + mybati ...
小程序navigateTo和redirectTo跳转的区别与应用
最近在做小程序的跳转,发现navigateTo的跳转无法满足业务需求,所以特地记录下业务需求类似一个淘宝的在订单界面选择地址的功能,从A页面点击跳转到B页面的地址列表页面,B页面可以选择已有的地址 ...
java类里的成员变量是自身的对象问题
今晚看单例模式饿汉时想到一个问题:假如java类里的成员变量是自身的对象,则新建该类对象时内存中怎么分配空间,我感觉似乎死循环了.于是上网搜索了下,哈哈,果然有人早就思考过这个问题了,站在巨人的肩膀上 ...
CF-1328 F. Make k Equal
F. Make k Equal 题目链接题意长度为n的序列,每次可以选择一个最大的数字将其减一或者选择一个最小的数字将其加一,问最少操作多少次可以使得序列中至少存在 k 个一样的数字分析官方题 ...
FZU - 1901 Period II （kmp）
传送门:FZU - 1901 题意:给你个字符串,让你求有多少个p可以使S[i]==S[i+P] (0<=i<len-p-1). 题解:这个题是真的坑,一开始怎么都觉得自己不可能错,然后看 ...

css picture

css picture

css picture的更多相关文章

随机推荐

热门专题