CSS伪元素BEFORE、AFTER妙用:制作时尚焦点图相框
在css标签中有这样子的标签div:before
、div:after
,对于before、after来说有部分人是相当陌生的,那么这两个标签是什么呢?有什么用处?
:befor、:after是CSS的伪元素,什么是伪元素呢?伪元素用于向某些选择器设置特殊效果。
我们用CSS手册可以查询到其基本的用法:
- E:before/E::before 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
- E:after/E::after 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
- Ie6-7 不支持
既然说到了before、after,那么我们也要大概的了解下content,content
用来和:after
及:before
伪元素一起使用,在对象前或后显示内容。基本的用法如下:
div:after{content:'任意字符串';}
现在我们大概知道before和after的大概用法了,那么我们就可以在元素的内容之前或者之后插入新内容。而插入的内容我们也可以用css样式来加以控制和美化。也许在平常中这样子的标签用处不大,但是存在即是真理,哈哈,肯定有他的妙用之处,今天就来看看利用before和after制作的一个创意的时尚焦点图相框,以后制作这种边框线的时候我们可以完全抛弃图片的做法,而且做出来的非常的精美。不信,就请先看看效果demo吧:
查看预览下载附件
制作思路以及方法:
1、 在图片层加多一层div,设置1像素的边框线,边框线有上下左右四条边框,而我们想要的只是每两条边框线组成的类似小三角形的形状,那么我们只要把四条边框线的中间部分去掉,那不就实现了我们的效果。那我们应该怎么把四条边框线中间部分去掉?或者用什么东西把他盖住,不让他显示出来?解决办法就是,我们知道before和after伪元素可以在元素之前或者之后添加新的内容,那我们就利用这两个伪元素来盖住四条边框线的中间部分。
2、 我们先去掉左右两边的边框线,在边框层,利用before伪元素,使用css样式的定位,设置白色边框,为什么要白色的边框呢?因为要把之前的左右边框中间部分遮掉,颜色设置成和背景色(本例的背景为白色背景)一致,这样子看起来就相当于中间部分被裁剪掉了。
3、我们继续去掉上下两条边框线,方法同上,利用after伪元素,使用css样式的定位,设置为白色边框,遮掉上下边框线的中间部分。这样子一来,基本的形状就出现了
4、美化步骤,调整我们的细节,边框线调整为虚线。
了解了基本的思路和方法,是不是很简单呢?那我们就开始动手写代码吧。
HTML代码:
<div class="content"> <ul><li><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_1.jpg" /><p class="focus"></p></a></li><li><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_2.jpg" /><p class="focus"></p></a></li><li><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_3.jpg" /><p class="focus"></p></a></li><li id="noborder"><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_4.jpg" /><p class="focus"></p></a></li> </ul> </div>
CSS样式代码
.content {width:788px; margin:auto; height:auto; overflow:hidden; padding:30px; } .content ul li {float:left; height:176px; border-right:1px solid #DDDDDD; position:relative; padding:10px;} .focus {background:rgba(250,250,250,0.25); width:174px; height:174px; border:1px dashed #666; position:absolute; left:10px; top:10px; display:none;} .focus:before {width:174px; height:134px; border-left:1px solid #fff; border-right:1px solid #fff; content:''; position:absolute; left:-1px; top:20px;} .focus:after {width:134px; height:174px; border-top:1px solid #fff; border-bottom:1px solid #fff; content:''; position:absolute; top:-1px; left:20px;} .content ul li:hover .focus {display:block;} #noborder {border-right:0 none;}
通过这个例子是不是很方便的把这个效果做出来了呢?而且看看我们的代码,是不是很简洁呢!哈哈……或许还有更好的方法来实现,我们可以一起探讨。我个人感觉其实div+css
是很好的一门很容易手上但是功能性很强的技术,而且他很好玩很有趣。利用你的奇思妙想, 你可以做出各种意想不到的效果。期待你的作品哦。
查看预览下载附件
原文地址:http://www.jiawin.com/css-before-after/
CSS伪元素BEFORE、AFTER妙用:制作时尚焦点图相框相关推荐
- 用CSS伪元素制作箭头
现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...
- 用css伪元素制作箭头图标
用css伪元素制作跳转箭头图标 在一些前端框架中见到过伪元素做的图标,现在一般都自己写了,用伪元素可以代替不少图片 .yui-cell{ position: relative; } .yui-cell ...
- css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是 类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑 它们 都 ...
- css 商城 两列_如何使用css伪元素实现超实用的图标库(附源码)
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识 伪元素 伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
- [JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
- 教你玩转CSS 伪元素
目录 CSS 伪元素 语法 :first-line 伪元素 :first-letter 伪元素 伪元素和CSS类 多个伪元素 CSS - :before 伪元素
- html 的css骚操作,意想不到的 CSS 伪元素 before/after 各种骚操作 - 文章教程
CSS 伪元素 before/after 我们经常用到,常见的就是画个三角形.绘画背景阴影等,这篇文章将给大家分享还有很多有趣的操作,比如画线画图标等. 画细线 普通的 border 最小高度为1px ...
- css伪元素选择器,first-letter、first-line
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪元素选择器 伪元素选择器,用于选择元素内的局部,包括first-letter.first-line等 代码如下: p:firs ...
- web前端css伪元素使用阿里iconfont中Unicode编码
web前端css伪元素使用阿里iconfont中Unicode编码 在阿里iconfont中创建项目 新建项目 搜索自己想要的图标并添加入库 点击购物车 添加至项目 回到"我的项目" ...
最新文章
- 控制编译文件控制代码质量
- Listview的点击效果
- c语言程序既可以编译执行也可以解释执行,2016年山东农业大学信息科学与工程学院C语言程序设计(同等学力加试)复试笔试仿真模拟题...
- 多目标跟踪2021总结
- mysql四列数据表代码_MySQL数据库常用代码
- 读取word对应页码_毕业论文怎样自动生成目录及从任意页开始排页码
- System.getProperty()参数
- java实现签名和解签
- 双人贪吃蛇小游戏C++原创
- 盲盒商城app开发需要具备哪些核心功能,盲盒商城app源码成品分享
- Godot—2D游戏设计笔记
- yyuc php,yyuc框架介绍
- EXCEL数据处理小结(SQL)
- 杂志特稿:元宇宙将重塑我们的生活,我们要确保它变得更好
- 2023联发科实习春招秋招内推内推码面经总结
- 【学习笔记】别怕,EXCELVBA其实很简单(第2版)
- OLYMP‘ARTS 2023奥艺大会中国推介会在北京盛大举行
- 案例研究|蜜雪冰城65亿背后的差异化商业模式创新
- Matplotlib_2
- 四 微信公众号 基础参数说明
热门文章
- 20145212罗天晨 WEB基础实践
- 【Springboot-Listener】整合监听器Listener
- React 基础知识要点快速回顾
- ParameterDirection.ReturnValue 和ParameterDirection.OutPut的区别?
- unity 制作 粒子 烟花
- 如何占用计算机大量内存,解决办法:针对大量计算机内存使用情况的几种解决方案...
- validationEngine 使用
- JavaScript:你是否对DOM还不够了解呢?一篇2w字文章带你走进DOM的世界
- 转:Virtual Function I/O
- 零基础学python编程思维---Task2 数学运算、字符串和文本、列表