新的一篇以及改进的主题

Plux posted @ 2011年8月07日 12:11 in Design with tags html css , 1849 阅读

终于决定把博客迁到这里了。小玖似乎也不在百度空间了,而人人上压力巨大,大多数博客系统基本上不适合写代码……

昨天晚上把自定义 CSS 玩了一把。发现这里的自定义 CSS 挺好的,主题的 HTML 结构也很好(比百度空间的标准一点吧),附有多种主题作为基础选择。相对于以前的百度空间也算是一个进步。不过有些特效还是依赖 jQuery 等库才可以玩, CSS 3 的动画目前似乎只有gecko和webkit支持,opera也不支持(但我没有测试过,据W3schools.com的测试了解到的)。

主题主要修改部分:

  • 把 header 部分改为导航栏在上,然后用 position: fixed; 固定。考虑到 IE 可能不支持,我尝试删掉 position 属性定义,效果还可以,起码不会太乱。
    这样做的好处是看文章的时候总是可以见到导航栏,真正发挥导航的作用(呵呵,一家之言罢了)
  • header 上部分 float 的内容改用 position: absolute; 来替换。
  •  header 部分圆角边框和其他一些地方的圆角微调。
  • 改进了原来 #wrapper 控制的主内容区的排版方式。采用 margin-right 属性固定留空 #sidebar 区域,然后把 #sidebar 的 position 属性设置为 absolute ,当然,这样一来,为了排版,一些父元素的 position 也改成了 relative 。取消了原来的 float 和 width 固定页宽的排版方式。
    这个改进的好处是页面会随着屏幕的宽度而改变。尽可能不浪费横向空间的同时,也保留了版式的完整。但在小屏幕上,我承认这样的设计会有问题。但小屏幕的时候,浏览器应该不会过多地考虑 position 等定义吧(尽可能利用纵向空间)
  • 一些动画的改进。仅仅对Webkit和Gecko较新的内核上测试过。IE 肯定不支持的。看看 IE 10 吧。模拟了部分以往需要 jQuery 才能达到的动画效果。
  • 底部 footer 配合样式把宽度设为 100% 了。

基本上也就是这样了。有些细节可能没写出来,毕竟也很难完全写出来。参看我的 CSS 代码吧。:-)

#coldblue .inner {
  position: relative;
  margin: auto 20ex;
  width: auto;
}

#coldblue #search {
  position: fixed;
  top: 0;
  z-index: 100;
}

#coldblue #header {
  width: auto;
  margin: 50px 20ex 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#coldblue #header .inner {
  margin: 0 1ex;
}

#coldblue #header #navigation {
  float: none;
  top: auto;
  width: auto;
  position: absolute;
  right: 1ex;
  bottom: 1em;
}

#coldblue img[alt='Avatar'] {
  box-shadow: 0px 0px 10px #333;
}

#coldblue #head ~ h2, #coldblue #head ~ #chito_search {
  display: none;
}

#coldblue #chito_search ~ h2 {
  display: block;
}

#coldblue #chito_search + h2 {
  display: none;
}

@-moz-keyframes colorFadeAnimation {
  0% { color: white; }
  40% { color: yellow; }
  60% { color: yellow; }
  100% { color: white; }
}

@-webkit-keyframes colorFadeAnimation {
  0% { color: white; }
  40% { color: yellow; }
  60% { color: yellow; }
  100% { color: white; }
}

@keyframes colorFadeAnimation {
  0% { color: white; }
  40% { color: yellow; }
  60% { color: yellow; }
  100% { color: white; }
}

#coldblue #search a {
  color: white;
}

#coldblue #search .current_page_item a {
  text-shadow: 0px 0px 10px white;
  color: green;
}

#coldblue #search a:hover {
  -moz-animation:colorFadeAnimation 5s infinite;
  -moz-animation-play-state: running;
  -webkit-animation: colorFadeAnimation 5s infinite;
  -webkit-animation-play-state: running;
  animation: colorFadeAnimation 5s infinite;
  animation-play-state: running;
  color: yellow;
  text-shadow: 0px 0px 10px white;
}

#coldblue #wrapper {
  background-image: none;
  width: auto;
  margin: auto 20ex;
  position: relative;
  border-width: 0px;
}

#coldblue #wrapper #content {
  width: auto;
  margin-right: 270px;
  float: none;
}

#coldblue .post-title h3 {
  text-align: right;
}

#coldblue .post-p {
  padding: 0.3em;
  background-color: #aaa;
  border-radius: 0.2em;
}

@-moz-keyframes backgroundFade1 {
  0% { background-color: black; }
  50% { background-color: #888; }
  100% { background-color: black; }
}

@-webkit-keyframes backgroundFade1 {
  0% { background-color: black; }
  50% { background-color: #888; }
  100% { background-color: black; }
}

@keyframes backgroundFade1 {
  0% { background-color: black; }
  50% { background-color: #888; }
  100% { background-color: black; }
}

#coldblue .post-p a {
  padding: 0.1em;
  border-radius: 0.3em;
}

#coldblue .post-p a:hover {
  -moz-animation: backgroundFade1 4s infinite;
  -moz-animation-play-state: running;
  -webkit-animation: backgroundFade1 4s infinite;
  -webkit-animation-play-state: running;
  animation: backgroundFade1 4s infinite;
  animation-play-state: running;
  background-color: #888;
}

#coldblue #wrapper #sidebar {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #ccc;
  border-bottom-left-radius: 15px;
}

#coldblue #footer {
  text-align: center;
  width: auto;
  margin: 0;
}

 

Avatar_small
λ 说:
Oct 22, 2011 11:33:29 PM

呃,导航栏竟然还有朦胧效果 Orz..
Cold Blue 主题竟然被你弄得这么简单,厉害……下次要换主题就用这个主题改好了,有两个Container。

Avatar_small
Plux 说:
Dec 01, 2011 10:20:59 PM

@λ: 其实CSS 3很多东西都还没有加进去呢,我觉得CSS 3真的简化了很多东西,但并不简陋。


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter