纯CSS3实现（无图片）的彩色条纹电子明信片

使用纯CSS3实现的明信片，未使用图片，比较简洁实用。

思路是通过DIV和DIV:after元素叠加而成，DIV:after用来构造一个斜向渐变（linear-gradient方法）彩色条纹，

然后放置在DIV的背后，调整好相对位置。

CSS代码：

div {width: 450px;margin: 0px auto;padding: 10px 20px;background: #fff;position: relative;border-radius: 3px;
}
div:after {content: '';background: -webkit-repeating-linear-gradient(45deg, #114abc, #114abc 10px, #fff 10px, #fff 20px, #bf2010 20px, #bf2010 30px, #fff 30px, #fff 40px);background: repeating-linear-gradient(45deg, #114abc, #114abc 10px, #fff 10px, #fff 20px, #bf2010 20px, #bf2010 30px, #fff 30px, #fff 40px);padding: 20px;border-radius: 6px;box-shadow: 1px 2px 6px 1px rgba(76, 66, 47, 0.75);width: calc(100% - 24px);height: calc(100% - 24px);position: absolute;top: -8px;left: -8px;z-index: -1;
}
h1 {display: inline-block;margin: 15px 0 10px -28px;padding: 10px 15px 5px 30px;background: #bf2010;border-width: 1px 1px 1px 0px;border-style: dashed;color: #fff;box-shadow: 2px 0 0 2px #bf2010, 2px 2px 0 2px #bf2010, 2px -2px 0 2px #bf2010, inset 0 0 5px 2px rgba(0, 0, 0, 0.2);
}
html,
body {height: 100%;
}
body {background: #d3ccc1;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;font-family: 'IM Fell English', serif;background-image: -webkit-radial-gradient(rgba(191, 32, 16, 0.075) 15%, rgba(0, 0, 0, 0) 16%), -webkit-radial-gradient(rgba(17, 74, 188, 0.05) 15%, rgba(0, 0, 0, 0) 16%);background-image: radial-gradient(rgba(191, 32, 16, 0.075) 15%, rgba(0, 0, 0, 0) 16%), radial-gradient(rgba(17, 74, 188, 0.05) 15%, rgba(0, 0, 0, 0) 16%);background-size: 120px 120px;background-position: 0 0, 60px 60px;background-color: #d3ccc1;
}
h1 {font-size: 2.5rem;
}
p {font-size: 1.75rem;line-height: 140%;margin: 20px 0;
}

HTML代码：

<div><h1>To: You</h1><p>Dear friend,</p><p>Thank you so much for the tea; it was delicious. You're always so thoughtful!</p>
</div>

在线演示：http://wow.techbrood.com/fiddle/4963

by iefreer

纯CSS3实现（无图片）的彩色条纹电子明信片相关推荐

怎样实现banner自动播放html,纯CSS3实现banner图片自动轮播效果方式总结
自动轮播: 实现切换图片,图片循环播放:鼠标悬停某张图片, 则暂停切换.css 方法一.opacity控制透明度实现轮播效果依照需求咱们选择用CSS3的animation动画进行实现:transit ...
纯CSS3实现GIF图片动画效果
在线演示本地下载
18种各式各样的loading，纯html5+css3无图片
网友总结的18种各式各样的loading,纯html5+css3无图片,我再次整理下 <!DOCTYPE html> <html lang='zh_CN'> <head& ...
网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图（4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
纯css3鼠标经过出现文字或图片鼠标移走消失
2019独角兽企业重金招聘Python工程师标准>>> 纯css3鼠标经过出现图片鼠标移走消失(文字只需修改样式即可,需要相反的话只需改透明图) css.big_box{margin ...
vue 图片被背景色覆盖_如何使用纯css3打造有点意思的故障艺术(附React/Vue加强组件版)...
前言很早之前就看到国外很多酷炫的网站在实践"故障艺术", 或者错位动画", 感觉非常有意思, 现在APP端的抖音启动界面有着这种设计的影子, 作为一名用于探索未知的前端 ...
css33d图片轮播_手把手教你用纯css3实现轮播图效果
首先先看demo吧,点击查看demo 一.随便说几句 css3动画效果的强大不言而喻,自它出现一直热度不减,它与js动画的优劣也一直成为前端界争论的话题,不可置疑的是css3动画的出现在一定程度上降低 ...
css33d图片轮播_手把手教你用纯css3实现轮播图效果实例
首先先看demo吧,点击查看demo 一.随便说几句 css3动画效果的强大不言而喻,自它出现一直热度不减,它与js动画的优劣也一直成为前端界争论的话题,不可置疑的是css3动画的出现在一定程度上降低 ...
html图片动态案例,10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互.本文分享了1 ...

纯CSS3实现（无图片）的彩色条纹电子明信片

纯CSS3实现（无图片）的彩色条纹电子明信片相关推荐

最新文章

热门文章