一些简单好玩的样式集

发表于 | 作者：

上周六刚刚辞职，这几天闲着没事把wp升级了下，重做了样式，务求简单易用。

我确实挺懒，每年浪费几百大洋弄这么个博客，结果到现在也没写上几篇，今天天气晴朗，心情不错 :c5 ，写点简单好玩的。

博客右下角添加了个返回顶部按钮，当然，假如你使用的是IE8及以下浏览器，是看不见的，使用其他浏览器的同学可以点击 F12 按钮，调出开发者工具选项查看实现方式，这里我来讲解下各样式含义：

1
2
3
4

<div id="gtt">
     <div id="tt"></div>
     <div id="g"></div>
</div>

这是它的基本结构，由一个圆角方框，一个横条，一个三角组成，样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#gtt{                          //容器即圆角方框的样式
width: 4em;
height: 4em;
position: fixed;               //确保始终以屏幕为坐标基点
right: 1em;
bottom: 1em;
background: rgba(0,0,0,.4);    //背景色半透明
border-radius: .6em;           //圆角
cursor: pointer;               //鼠标悬浮变手型图标
overflow: hidden;              //防止溢出
}
#gtt:hover{background: rgba(0,0,0,.6);}     //鼠标悬浮时颜色加深
#tt{                           //横条的样式
width: 2.4em;
height: .4em;
background: rgba(255,255,255,.6);
border-radius: .6em;
position: fixed;
bottom: 3.6em;
right: 1.8em;
}

三角单独拿出来说下，可能有同学看过类似的三角CSS实现，即利用 border 的填充来实现假的三角，样式如下：

1
2
3
4
5
6
7
8
9

#g{
width: 0;
height: 0;              //宽高为0，自己想象一下
position: fixed;
right: 2em;
bottom: 1.8em;
border: 1em transparent solid;      //边框颜色为透明直线
border-bottom: 1.8em rgba(255,255,255,.6) solid;    //下边框下拉成等腰直角三角形
}

如何，明白否？稍微想象下很简单的 :b9 。

接下来是一个利用颜色相差原理制作一个立体间隔线的小样式，说白了很简单，上边框颜色浅点，下边框颜色深点，人的眼睛就会误以为这条线凸出来了，效果就博客里的这些横线，样式也很简单的：

1
2
3
4
5
6

br{
height: 0;              
overflow: hidden;  
border-top: 1px #fff solid;
border-bottom:1px #ccc solid;
}

然后呢，WP的评论默认样式挺古板的，想把其中的方形头像改成圆形？很简单：

1
2
3

.commentlist .avatar {
border-radius: 27px;
}

但是我还想加个边框加个阴影，这就不好办了：

1
2
3
4
5

.commentlist .avatar {
box-shadow: 0px 1px 2px #999;
border-radius: 27px;
border: 3px #fff solid;
}

代码是加上了，但是头像也变成这个鬼样子了：

没错，一旦给img标签添加了边框然后又添加圆角，img会自作主张的在四周填充，结果就成了这样，这可如何是好

我想的办法是包裹一个容器只实现边框，img只实现圆角，一般的评论样式都会在 WP 的 Theme 包里的 functions.php 里，我是基于 twentyeleven 修改的，所以打开后搜索 “echo get_avatar( $comment, $avatar_size );”，然后修改如下：

1
2
3
4
5
6
7

<div class="comment-author vcard">
	<div class="a-f">      //在 get_avatar 方法上包裹一层容器，通过容器来实现边框和阴影
	<?php
		$avatar_size = 48;
		echo get_avatar( $comment, $avatar_size );
	?>
	</div>

再修改样式，搜索“.commentlist .avatar”，修改如下：

1
2
3
4
5
6
7
8
9
10
11

.a-f {
	box-shadow: 0px 1px 2px #999;
	border-radius: 27px;
	border: 3px #fff solid;
	overflow: hidden;
	width: 48px;
	height: 48px;
}
.commentlist .avatar {
	border-radius: 27px;
}

完事了，看看其他文章的评论，是不是很完美？，另：哪位同学有更好的实现方法比如不用包裹等，请留言告知，谢谢。

这些东西都很简单，不过稍微改改就可以在其他地方使用，12点了又，吃饭去了 :a7 。

4 条评论在 “一些简单好玩的样式集”

  3. 对啊，更新速度比以前慢了啊，不过网站的风格好像变了不少，另外问下您，我自己的博客始终不被百度收录，你当时是怎么弄的？

    回复 ↓

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。