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

随机推荐

命名规范 api-guidelines api规范
https://weui.io weui.css .weui-cell_select-before .weui-cell__bd:after{ display:none; } .weui-cell_s ...
分别简述computed和watch的使用场景
computed: 当一个属性受多个属性影响的时候就需要用到computed 最典型的栗子: 购物车商品结算的时候watch: 当一条数据影响多条数据的时候就需要用watch 栗子:搜索数据
ASP.NET Core 5.0 MVC中的视图分类——布局视图、启动视图、具体视图、分部视图
一.创建MVC应用程序创建后的项目二.(全局性)启动视图 _ViewStart.cshtml 顾名思义,就是在View开始执行之前执行,而且是每一个View, 它的预设内容是 @{ Layout ...
SpringMVC 中 @ControllerAdvice 注解
SpringMVC 中 @ControllerAdvice 注解 1.@ControllerAdvice 1.1 全局异常处理 1.2 全局数据绑定 1.3 全局数据预处理原文地址: 江南一点雨:S ...
JavaWeb——JSP,JSP指令,注释
什么是JSP JSP原理 JSP页面中的java代码服务器是如何执行的 Web服务器在调用jsp时会给jsp提供一些什么java对象 JSP执行过程 JSP页面的元素包括 JSP模版元素 JSP脚本片 ...
Spark JDBC方式连接MySQL数据库
Spark JDBC方式连接MySQL数据库一.JDBC connection properties(属性名称和含义) 二.spark jdbc read MySQL 三.jdbc(url: Str ...
linux系统计划任务
at crontab 一次性计划任务周期性计划任务摘要:linux系统中,可以通过crontab和at两种命令实现计划任务: 计划任务的作用:是做一些周期性的任务,在生产中的主要用来定期备份数据. ...
YOLOv1论文解读
摘要我们提出一种新的目标检测算法--YOLO.以前有关目标检测的研究将检测转化成分类器来执行.然而,我们将目标检测框架化为空间分隔的边界框及相关的类概率的回归问题.在一次评估中,单个神经网络直接从整 ...
codeforces628D. Magic Numbers (数位dp)
Consider the decimal presentation of an integer. Let's call a number d-magic if digit d appears in d ...
hdu2818 Building Block
Problem Description John are playing with blocks. There are N blocks (1 <= N <= 30000) numbere ...

css picture

css picture

css picture的更多相关文章

随机推荐

热门专题