一些简单好玩的样式集

上周六刚刚辞职,这几天闲着没事把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 条评论在 “一些简单好玩的样式集

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

发表回复

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

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