【兔】- CSS画个兔年邮票

Tomorrowed
1,668 阅读2分钟

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛”

用CSS画一个兔年邮票，主要展示了邮票背景图片的制作，邮票的边框绘制。邮票整体呈咖啡色，有邮资，带邮戳，还有兔子！来试试亲手制作一张邮票吧~

前期准备

自己做一张邮票背景图，主要是准备兔子图片，用到的网站主要有三个

下载模型

  • 模型的好处是，可以调整各种不同角度，还可以结合其他模型展示，制作图片效率高！
  • 找个可爱的兔子，下载！

image.png

加载模型->制作图片

  • 最近发现的网站，用来制作图片很合适！
  • 放入兔子模型
  • 调整背景颜色
  • 这里选用了黑色，增加了主体和背景的对比度，方便后期使用滤镜调色
  • 选好角度和兔子比例，即可导出为图片了！

image.png

给图片加个颜色滤镜

  • 网站可以选用多种滤镜色彩，
  • 这里选择的是咖啡色，可以看到背景的黑色都变成了咖啡色，还包括兔子的眼睛
  • 和上一步直接导出的图片相比，更有复古风！

image.png

还需要准备一张邮戳图片，图片来源 - 百度搜索。。

  • 选了一张带有雪花图案的邮戳
  • png透明图片，可以直接叠加到图片上，模仿盖章效果
  • 邮戳的颜色，可以直接用filter滤镜调整。

image.png

好，图片准备好了！

代码部分

邮票边缘

  • 主要使用的是background的radial-gradient, 绘制透明圆形图案，
  • 通过background-size，缩小图案大小，重复排列，
  • 再加上background-position,调整图案位置。
  • codepen学来的 - 学习链接 - CSS3 Stamp effect using radial gradients (codepen.io)

接下来就是插入图片，和文字部分了。

代码结构

div.stamp - 邮票边框
    div.stampImg - 邮票图片
    div.stampImgPattern - 邮戳
    div.feeBox - 展示邮资
    span.year - 年份
    span.info - 兔年大吉 文字

文字部分和图片用到了都是position: absolute定位，邮票边框为父元素进行定位，年份放左上角，游资放右上角，文字放右下角，还有盖章的部分，放在左下角。

image.png

文字部分用到，文字垂直样式，可以让文字垂直显示

-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;

邮戳部分，用到了滤镜，使蓝色变成灰色

 filter: grayscale(100%);

复制三份邮票，完成效果~

最后，祝大家新年 “钱”“兔”无量、大展鸿“兔”~

avatar
文章
阅读
粉丝