存档

文章标签 ‘CSS’

又一次更新了INOVE主题

May 20th Tue, 2014/JiaJieChan/日志/1,417 阅读/6 comments

最近对inove主题又更新了一下,具体为css方面的修改。

看着那些边栏的线条就很纠结,很想去掉它,于是乎就将默认用图片来做线条的去掉了,把没必要的地方的线条取消。把有过渡效果的li;属性前面的图标改为简单的实心正方形。博客的整体宽度也做了小小的修改,边栏的宽度也相对前者做了修改。因为去掉了边栏的分割线,使得栏目间能够容易区分开来,因此增加了栏目间的间隔高度。

对于评分插件也调整了一下,修改了一些风格,修正了再评分时页面会产生宽度增加的问题。现在的评分位置更加的简洁好看了。如果不是要照顾连基础一点的英文单词都不会的访客,我的评分的文字描述都会采用英文。

效果就是现在最终的,简单了许多。
Read More...

小修改一下搜索栏

Aug 24th Sat, 2013/JiaJieChan/日志/1,175 阅读/1 comment

本博以前的搜索栏是浮动在右上角的,看上去比较碍眼,可是JiaJieChan的想法却是如此,原意是要隐藏掉2/3的搜索框,鼠标悬停就展开回车就立即搜索。

原来是想造个下拉的图标什么的,提示这里有个搜索栏隐藏了,可是这设计天赋为零。于是就用了最为流行的平面设计,其实就一2d图形最简单的。默认会显示一个Search的提示,鼠标悬停后会下拉,输入关键字后回车会在新窗口打开搜索结果页。

为了好看和浏览网页是不阻挡视觉,也将部分地方做了opacity透明度方面的处理,在展开缩回里也做了动画过渡效果处理。

最后想问一下大家,目前搜索栏的设计怎样,比较舒服吗?  浏览文章的时候会阻碍到正常视觉吗?

希望在下文回复!

分类: 日志 标签: , , , ,

CSS3 transition过渡动画

Aug 1st Thu, 2013/JiaJieChan/折腾/1,387 阅读/4 comments

在写网页里一些简单的动画可以使用css完成,一个常用的功能就是transition,JiaJieChan今天就对博客的几个地方加入了这个效果。它可以将不同宽度、颜色、字体、形状的元素与另一元素之间的:hover变化过程加入动画过渡效果。具体也可以看看本博边栏我的头像的区域,鼠标悬停在拉出按钮上可以看到有一段过渡的动画效果,是不是很好看,下面就看看transition的一些使用方法以及格式。

W3C标准中对css3transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

使用格式

使用方法很简单,transition: 元素 持续时间s; 这个就是格式,也可以看看下面的例子。 Read More...

老掉牙的技术 从CSS sprites重视background

Dec 2nd Sun, 2012/JiaJieChan/折腾/1,207 阅读/5 comments
这个是老掉牙的技术了,最近看到博客有很多凌散的小图片,于是就把它们用csss prites合在一起了。下面这篇文章只是介绍一下相关的优势和用法。相关的技术文都已经是几年前的了,所以干脆就找一篇比较好理解的文章转回来算了。

 

关于CSS sprite技术的详解,小弟在这里就不赘述了,因为伟大的英特网上有一篇伟大的技术文档介绍。请移步http://css-tricks.com/css-sprites/

在CSS sprite中最重要的就是关于background这个属性的理解,所以本文比较详细的介绍了background这个属性,如有错误,劳请指教。

background的集合有:'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', 和 'background'。

在介绍background特性之前首先要明确background的作用范围,background是在padding box之内有效,所以背景色和背景图片都在此范围内。 Read More...

INove在IE浏览器下很多CSS失效的解决方法

May 2nd Wed, 2012/JiaJieChan/折腾/1,325 阅读/1 comment

陈家杰博客原创文章,转载请出示页底版权信息

    其实在现在用Win7的也越来越多了,IE8.0、IE9.0的普及率也很高,但是JiaJieChan也还是喜欢用Chrome,真希望电子商务的企业能够尽快开发出基于Chrome、Firefox等其他主流浏览器的控件,使得使用网银的支付网站不再局限于IE浏览器,以浏览器制衡微软。

进入今天的主题,就是让INove支持IE浏览器的CSS特效。用INove的博主应该也发现有很多的CSS特效在IE8.0甚至9.0也不兼容,就比如说陈家杰's Blog的导航条的透明化,和首页上每篇文章的查看全文按钮的圆角效果。其实这个是与CSS和IE的兼容性无关的,只要加上了应用于IE浏览器的相应CSS代码IE也能够显示的。影响着INove主题的CSS在IE显示不出效果的原因就是INove编译的时候比较早,因此加上了一句锁定为IE7.0兼容模式的代码,我们只要把这条代码屏蔽就可以显示出CSS特效了。

首先打开INove Theme的header.php

找到下面的代码;

修改为; Read More...