CSS图书馆 » HTML & CSS » 用CSS3制作漂亮的设计达人留言评论样式

用CSS3制作漂亮的设计达人留言评论样式

发表于: HTML & CSS, 优秀设计资源, 前端开发, 网页设计 & 灵感. 评论 (266)
赞助商链接

最近很多用户问我这多说留言样式怎么弄的,看来大家很喜欢设计达人这个留言样式啊,当初设计这个留言样式就是为了让更多用户去留言。其实我觉得这个留言制作不难,懂CSS的人花点时间也知道怎样制作出来,所以我觉得难点还是UI设计、交互以及创意方面,所以设计师们多点来设计达人网站上找灵感吧^^

查看Demo →

下面一起来看看这个漂亮的留言评论样式是怎么制作的吧:

CSS代码

这里重点注意的就是 .ds-avatar 的背景要和页面背景一致,这样就能展示出凹进去的效果。

body {background:#333;}
.ds-post-main {position:relative; width:500px;}
.ds-avatar {position:absolute; top:20px; width:31px; height:31px; padding:5px; background:#333;border-radius:50%;}
.ds-avatar a {display:block; width:31px; height:31px; background:#01cc01; border-radius:50%;}
.ds-comment-body {margin-left:20px;padding:10px 10px 10px 30px ;height:80px;background:#01644f;}

HTML代码

这是多说留言评论的结构,其实我们的wordpress也可以这样的。

<div class="ds-post-main">
	<div class="ds-avatar">
		<a href="#nogo" > </a>
	</div>
	<div class="ds-comment-body"> </div>
</div>

美化留言评论样式

添加质感:这里主要使用CSS3的圆角(border-radius)、阴影(box-shadow)来实现质感,具体使用方法网上一大堆了,我就不啰嗦啦^^ 配色方面要尽量配合你的网站风格哦。

交互设计:达人使用的交互只是一个简单的CSS3旋转动画(transform:rotate),当然你可以使用更多的动画效果来,不过我不建议搞得过于花哨。

设计达人多说评论样式完整版 (2013-4-6更新)

这个代码是根据设计达人网站的风格而配色的,所以使用的时候记得改下配色哦。特别是记得改「#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {background:网站的背景颜色}」。

用户气泡提示框代码:倒数8-11行。(隐藏用户气泡提示框「#ds-thread #ds-reset #ds-bubble {display:none !important}」,这是隐藏鼠标移至用户名称时弹出来的气泡提示框,个人觉得没什么用啊,所以直接隐藏了。)

评论盖楼样式代码:倒数1-7行。(不用盖楼的评论方式用户可以直接删除这几行,精简一下代码。)

添加方法:打开「Wordpress后台」 > 「多说评论」 > 「个性化设置」 > 然后把样式粘贴到「自定义CSS」文本框 > 「保存」

#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {border:0px;color:#848568;text-shadow:none;background:#dddfc2}
#ds-thread #ds-reset .ds-highlight {font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;color:#848568 !important;}
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover {color:#696a52;background:#d4d6ba}
#ds-thread #ds-reset a.ds-highlight:hover {color:#696a52 !important;}

#ds-thread {padding-left:30px;}
#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset #ds-hot-posts {overflow:visible}
#ds-thread #ds-reset .ds-post-self {padding:10px 0 10px 10px;}
#ds-thread #ds-reset li.ds-post,#ds-thread #ds-reset .ds-post-self {border:0 !important;}
#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {position:absolute;top:26px;left:-14px;padding:5px;width:36px;height:36px;box-shadow:-1px 0 1px rgba(0,0,0,.15) inset;border-radius:46px; background:#E5E6D0;}
#ds-thread #ds-reset ul.ds-children .ds-avatar {left:-23px;}
#ds-thread .ds-avatar a {display:inline-block;padding:1px; width:32px;height:32px;border:1px solid #b9baa6;border-radius:50%; background-color:#fff !important}
#ds-thread .ds-avatar a:hover {border-color:#de5a4e}
#ds-thread .ds-avatar > img {margin:2px 0 0 2px}
#ds-thread #ds-reset .ds-replybox {box-shadow:none;}
#ds-thread #ds-reset ul.ds-children .ds-replybox.ds-inline-replybox a.ds-avatar,
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar {left: 0;top: 0; padding: 0;width: 32px !important;height: 32px !important; background: none;box-shadow: none; } 
#ds-reset .ds-replybox.ds-inline-replybox a.ds-avatar img {width: 32px !important;height: 32px !important; border-radius:50%;} 
#ds-reset .ds-replybox a.ds-avatar,
#ds-reset .ds-replybox .ds-avatar img { padding:0;width:50px !important;height:50px !important; border-radius:5px; }
#ds-reset .ds-avatar img {width:32px !important;height:32px !important;border-radius:32px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.22);
							-webkit-transition:.4s all ease-in-out;-moz-transition:.4s all ease-in-out;-o-transition:.4s all ease-in-out;-ms-transition:.4s all ease-in-out;transition:.4s all ease-in-out;
							}
.ds-post-self:hover .ds-avatar img {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}

#ds-thread #ds-reset .ds-comment-body {background: #F0F0E3;padding:15px 15px 12px 32px;border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.75) inset;}

#ds-thread #ds-reset .ds-comment-body p{color:#787968}
#ds-thread #ds-reset .ds-comments a.ds-user-name {font-weight:bold;color:#696A52 !important;}
#ds-thread #ds-reset .ds-comments a.ds-user-name:hover {color:#D32 !important;}

#ds-thread #ds-reset #ds-hot-posts {border:0}
#ds-reset #ds-hot-posts .ds-gradient-bg {background:none;}



#ds-reset #ds-bubble #ds-ctx .ds-ctx-entry {padding:0;}
#ds-reset #ds-bubble .ds-avatar, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {position:static;padding:0;border:0; background:none;box-shadow:none;}
#ds-reset #ds-bubble .ds-avatar img, #ds-reset #ds-bubble #ds-ctx-bubble .ds-avatar a {width:45px !important;height:45px !important;}
#ds-reset #ds-bubble .ds-user-name{padding-left:13px;}


#ds-reset .ds-comment-body #ds-ctx {border-left:1px solid #b9baa6;background-color:#e8e8dc !important}
#ds-reset #ds-ctx {margin-right:-15px}
#ds-reset #ds-ctx .ds-ctx-entry {position:relative;padding:10px 30px 10px 10px;}
#ds-reset #ds-ctx .ds-ctx-entry .ds-avatar {top:6px;left:5px;background:none;box-shadow:none;}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body {margin-left:46px;}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-content {color:#787968}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {color:#696A52;font-weight:bold}

查看Demo →

最后

如果使用遇到什么问题,可以在这里留言提问,当然也可以发表你的独特意见,一起交流。

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,欢迎转载。
  1. 博主,能否给一下你评论框的最新代码啊?我照你上面的代码复制到我的多说,显示的效果和你这个不一样.
    1,头像不会转
    2.头像感觉被切刀切了一样.(与"雨印 雨音"一样的效果.)

  2. 按楼主的方法做好了,最后还发现一点.
    如果使用了去版权的代码头像框就会显示不正常,代码如下
    #ds-thread .ds-powered-by{display:none!important;}/*去多说版权*/

  3. 感谢分享!
    本人已大致修改为适合自己的风格,其中有一个问题请教:在实现评论框背景半透明的前提下,如何让文字不透明?我仅仅试过添加span{position:relative;},结果把整个评论框样式都破坏了~

  4. 我把字体颜色设置成#ffffff,头像直接变成正方形!!!有什么办法可以使得背景框为主题默认啊,我那主题背景使用图片的。半透明效果,直接删了修改背景颜色代码行不

  5. 有没有比较全的代码呢?这个是结合多说来写的,但是好些样式多说本来就有了,我意思是从0开始写所有的代码,表现出你这个样式,谢谢。我准备移植到博客上用。

  6. 参考了博主的代码,我也贡献点儿吧:博主有没有感觉鼠标离去后头像还要旋转一周看起来有些多余了(因为鼠标移上去时为了把注意力吸引到头像处,加上旋转动画,可是鼠标离去时应该只让下一个头像旋转即可,离去的这个头像应该不旋转。自己没有任何css3的知识,昨晚查了一些属性,没有弄出来,今天早晨找到了方法: @keyframes cmxz{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);}} @-webkit-keyframes cmxz{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);}} @-moz-keyframes cmxz{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);}} @-o-keyframes cmxz{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);}} .commont-item:hover .commont-avatar img {-webkit-animation:cmxz .4s ease-in-out;} 用keyframes只有鼠标移上去时有动画,鼠标移开时是没有动画的。是根据http://www.w3cfuns.com/forum.php?mod=redirect&goto=findpost&ptid=5592366&pid=38961 才弄出来的

  7. #ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {position:absolute;top:26px;left:-14px;padding:5px;width:36px;height:36px;box-shadow:-1px 0 1px rgba(0,0,0,.15) inset;border-radius:46px; background:#FFFFFF;}

  8. 我更改了图像的像素大小,但是错位了不知道怎么改,麻烦帮忙看下啦!我不会网页,做这个博客也是百度,找人帮忙弄了好久才得以成型的。拜托了!

  9. 因为留言的地方图像太大,修改成32了,导致写字也有点困难,所以把留言空白留宽了点,调成了55,手机也刚好了。此处要修改下代码如下#ds-thread #ds-reset .ds-replybox {padding: 0 0 0 55px;}#ds-reset .ds-replybox .ds-avatar img{padding: 0; width: 32x !important; height: 32x !important; border-radius: 5px;}参考http://hao.92wd.cn/link/

  10. 你那都没问题是吧,那就好了……不知道为什么我的电脑里所有的浏览器都不行……chrome、ff、ie10、还试了opera,都是这样,总之没事就行了,大概是我电脑出什么问题了……

  11. 哦,说错了,是我的回复之后显示的样式,跟你的不一样。你的回复是下一层都靠右一点的,而我的都是竖着一排,回复的div都没有靠右。不知道这是为什么呢

  12. 这个问题可以使用-webkit-backface-visibility: hidden;解决.
    #ds-reset .ds-avatar img {width:32px !important;height:32px !important;border-radius:32px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.22);-webkit-backface-visibility: hidden;-webkit-transition:.4s all ease-in-out;-moz-transition:.4s all ease-in-out;-o-transition:.4s all ease-in-out;-ms-transition:.4s all ease-in-out;transition:.4s all ease-in-out;}