前端开发者学堂 - fedev.cn

CSS3美化图片

发布于 大漠

有关于美化图片的教程,W3cplus有好几篇了,比如说《CSS3制作图片样式》、《jQuery和CSS3给图片制作圆角》这两篇是针对于美化图片圆角效果的教程,昨天在《CSS美化图片》一文中介了使用标签给图片设置朦板效果。

CSS美化图片》制作原理是通过给元素添加一个额外的标签,比如说“span”标签,或者能过jQuery的append函数给元素添加标签,在把将此标签运用朦板背景图片定位在图片元素之上,达到美化图片的效果。今天要和大家分享一种新的方法,基于《CSS美化图片》介绍的理论之上,把里面的“span”标签去掉,同时使用CSS3中的伪元素“::before”和“::after”或者CSS3的伪类选择器“:before”和“:after”来代替增加的标签“span”,接着将运用在span上的样式转架嫁到伪元素或者伪类选择器上。下面我们一起来学习一下这种制作方法与CSS方法有何不一样?

demodownload

HTML结构的变化

首先来简单的回忆一下《CSS美化图片》介绍的结构,如图所示:

那么今天要介绍的方法,关键之处是不需要这个额外增加的“span”标准,此时结构就改成了:

<div class="photo">
  <a href="">
    <img src="xxx.jpg" alt="" />
  </a>
</div>

“span”标签去掉了,为了有空间或者说有位置来放置IMG需要的朦板图片,就需要另选择其它方法,也就是今天要为大家介绍的方法使用CSS3的“::before”、“::after”或者“:before”、“:after”(这两者只是称呼不一样,但所起的效果是一样的,详细的大家可以参阅《CSS3 选择器——伪类选择器》和red-team-design.com介绍的《The :before and :after pseudo-elements syntax》)。空间位置,我们找到了,接下来就是怎么实现,样式实现和前面介绍的方法是类似的,只不过将span标签上的样式置外为“a::before”,在这里同样有两个关键之处,第一在元素a标签定义“position:relative”,第二将IMG的朦板背景放置在“a::before”上,并且对其时行绝对定位,如下图所示:

实现原理我想大家都清楚了,如果你还不太清楚,也不用担心,接下来,我们跟着webdesignerwall.com的《Decorative CSS Gallery - Part2》中的实例在学习一回。

1、PAPER CLIP

别针列表效果,结构基本上和前面原理介绍的一样,只不过的了一种方式:

<ul class="gallery clip">
  <li><a href="#"><img src="sample-1.jpg" alt="image"></a></li>
  ...
  <li><a href="#"><img src="sample-6.jpg" alt="image"></a></li>
</ul>

由于不是一张图片,这里采用了列表形式代替当初的div,具体样式如下:

/* based gallery style */
.gallery {
	margin: 0 0 25px;
	text-align: center;
}
.gallery li {
	margin: 5px;
	list-style: none;
	display: inline-block;
}
.gallery a {
	position: relative;/*这个很关键*/
	display: inline-block;
}

/* paper clip style */
.clip img {
	padding: 4px;
	border: solid 1px #bbb;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
/*图片朦板的制作*/
.clip a:before {
	position: absolute;
	content: ' ';
	top: -5px;
	left: -4px;
	width: 30px;
	height: 60px;
	background: url(paper-clip.png) no-repeat;
}

这个例子中主要通过“a::before”创建了一个30px * 60px的容器,并且将别针背景图片(paper-clip.png)放在这里,并且定位到图片上面。在使用“::before”之类时,一定要配合“content”一起使用,不然这个容器将不存在。详细如下所示:

.clip a:before {
	position: absolute;
	content: ' ';
	top: -5px;
	left: -4px;
	width: 30px;
	height: 60px;
	background: url(paper-clip.png) no-repeat;
}

最终效果如下图所示:

2、ART FRAME

可以使用这个技巧给IMG添加任何朦板效果,并助放置任何位置,DEMO一中,制作的是左上角别针的效果,在这个实例中,给其制作一个艺术边框效果。在DEMO一的基础上,我们只将“a::before”的背景图片做一定的调整,并把样式做一点点对应的修整:

/* frame clip style */
.frame li {
	margin: 30px;
}
.frame a:before {
	position: absolute;
	content: ' ';
	top: -22px;
	left: -23px;
	width: 216px;
	height: 166px;
	background: url(frame.png) no-repeat;
}

最终效果如下所示:

3、TAPE

有时,我们实际需要的效果并不只前面两个案例的那样,比如说图片底下带有一定的简短标题或描述之类的,这时候前面的结构就无法满足需求,因此我们需要对结构做一定的调整。在这里使用一个HTML5的模板,正如下面的例子,用了一个<figure>标签包裹图片和图片标题(图片标题使用<figcaption>),如下所示:

<ul class="gallery tape">
  <li>
    <figure><a href="#"><img src="sample-4.jpg" alt="image"></a>
      <figcaption>Tony</figcaption>
    </figure>
  </li>
  ...
  <li>
    <figure><a href="#"><img src="sample-4.jpg" alt="image"></a>
      <figcaption>Tony</figcaption>
    </figure>
  </li>	
</ul>

结构完成后,给IMG添加样式,这个实例和前面的有所不同,图片上有一个胶带效果,并且还给IMG添加了一个半透明的朦板效果,而且他们分为两张图片在使用,那么一个“:beofer”就无法满足这个案例放置背景图片的需求。这个时候就运用了两个“:before”:一个用在了标签“<figure>”,而另一个仍旧运用在"<a>"标签上。将"overlay.pn"朦板图片运用在“figure:before”上,同时将tape图片运用在“a:beofor”上,如图所示:

样式代码如下所示

/* tape style */
.tape li {
	width: 170px;
	padding: 5px;
	margin: 15px 10px;
	border: solid 1px #cac09f;
	background: #fdf8e4;
	text-align: center;

	box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.2);
}
.tape figure {
	position: relative;
	margin: 0;
}
.tape figure:before {
	position: absolute;
	content: ' ';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(overlay.png) no-repeat;
}
.tape figcaption {
	font: 100%/120% Handlee, Arial, Helvetica, sans-serif;
	color: #787568;
}
.tape a:before {
	position: absolute;
	z-index: 2;
	content: ' ';
	top: -12px;
	left: 50%;
	width: 115px;
	height: 32px;
	margin-left: -57px;
	background: url(tape.png) no-repeat;
}

效果如图所示:

其实,我们也不用将“:before”分开运用在两个元素上面,大家别忘了,还有一个“:after”,所以可以直接将“a:after”来代替“figuer:before”。

4、图片墙

在DEMO三的基础上,在父元素上添加一个纹理,并元素添加一个旋转效果,我们就可以制作出一个图片墙效果:

/* transform */
.transform {
	background: url(cork-bg.png);
	padding: 25px;
	border-radius: 10px;

	box-shadow: inset 0 1px 5px rgba(0,0,0,.4);
}
.transform li {
	border: none;
}

图片墙效果,我们不想让图片千篇一律的,整齐旋转,此时可以运用CSS3选择器中的“:nth-of-type”来实现,在一定规律下进行相同的角度旋转,如图所示:

具体的代码如下所示:

.transform li:nth-of-type(4n+1) {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
}
.transform li:nth-of-type(2n) {
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	transform: rotate(-1deg);
}
.transform li:nth-of-type(4n+3) {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
}

旋转后就得到了我们需要的图片墙效果,如下所示:

当然大家还可以使用别的旋转规律,大家不仿参阅一下《CSS3制作留言墙》。

那么有关于CSS3美化图片就介绍到这里,在这里最后给大家总结一下:“主要使用伪类元素(::before和::after)或者伪类选择器(:before和:after)放置图片的朦板背景图片,并进行绝对定位到图片上面”。原理很简单,但在制作这个效果时运用到了不少的CSS3属性,比如说CSS3 选择器——伪类选择器CSS3 Transform等,如果你对这些属性还不太清楚,建议你仔细阅读CSS3属性教程与案例分享一文。

特别声明,上面所有DEMO的代码和图片来自于webdesignerwall.comDecorative CSS Gallery - Part2,如需转载请注明相关出处。

大家可以点相关的DEMO或者下载源码仔细研究:

demodownload

如需转载,烦清注明出处:https://www.fedev.cn/css3/css3-decorative-gallery.html

Afterpay