用CSS3制作尖角标签按钮样式

演示地址:http://jiongks.name/demos/css3-tag/

CSS 3 tag demo

如图的效果。标签有背景色,且左侧有一个三角形,三角形中间有个白色的圆圈。

  • 你一定在想这个效果是背景图切出来的吧——答案是没有用到任何图片
  • 那你会不会在想这个效果的html结构很复杂呢——答案是最简单的html结构

    <p>
    <a href="#">Tag1</a>
    <a href="#">Tag2</a>
    <a href="#">Tag3</a>
    <a href="#">Tag4</a>
    <a href="#">Tag5</a>
    </p>

之所以可以达到这样的效果,是因为我们运用了一些比较巧妙的技术。接下来告诉你实现方式:

阅读剩余部分...

分享Typecho插件:Markdown 解析器 + 编辑器

  1. 该插件是在 明城 的“使用 Markdown 解析器”的基础上完善的。
  2. 使用 Markdown 语法 编写和发布文章。
  3. 在正文上方加入了简单的格式按钮;
  4. tab键自动输入4个空格;
  5. 正文下方加入了预览功能;
  6. 在侧边栏加入了语法提示。

下面是三张截图,一个是工具栏,一个是预览区域,一个是语法提示区域

工具栏

预览

语法

有需要的童鞋可以移步到这里下载,但特别注意:一定要放在/usr/plugins/Markdown文件夹下,其它命名可能会导致500错误(感谢大家的反馈,我之前没有注意到这个细节)。

分享Typecho皮肤:我的字很大

截图

没错,就是前面提到过的字很大的皮肤,我给这款皮肤起了个非常土的名字叫:“我的字很大

有几点说明:

  1. 侧边栏我隐藏掉了,并没有预留合适的位置,因为希望界面简介
  2. 搜索栏我隐藏掉了,但预留了位置,就是右上角,在style.css文件里去掉#search {display: none;}那一段就好
  3. 右下角的文字算是版权信息,是通过创建body的一个css伪元素实现的,略有一些技巧,如果大家觉得碍事,当然可以在css文件中去掉
  4. 对IE6效果做了简单的降级

有需要的童鞋可以移步到这里下载

汇总自己过去的一些HTML5科普文章

新网站开张总得找点东西充数,刚好我这阵子集中看了一些w3c关于html5的文档,所以顺道把之前看过的东西汇总了一下。这些内容如果今后继续有积累的话,还会保持更新。

另外诸位对哪些html5新特性有科普需求的,不妨留言在下面,我会尽力而为 :-)

目前这些内容的最近更新时间是2012年3月

阅读剩余部分...

网站装修计划

写给自己的网站装修计划。

首先,选个现成的程序。这个已经选好了,就是Typecho了。

然后,给这个程序做个皮肤,经过了前后设计三个版本之后,我觉得现在这个看着靠谱一些。为了避免以后换了别的皮肤。在此截图留念
屏幕快照 2012-03-23 下午10.32.30.png

然后,把我之前分享过的一些demo、ppt等内容汇聚过来。现在基本都照原样拿过来了。不过我觉得还不够,因为之前的幻灯片都是针对webkit设计和开发的,另外url规则还是不够简单明了。回头要做的事情是:把url规则弄得更简单、兼容更多的浏览器。

然后,了解一些SEO和网站统计的知识,在这里做点尝试,也让自己更认识我的读者。(说实话我在启动这个网站的时候,并不太清楚我的读者是哪些人,喜欢什么,突然觉得这个重要)

然后,我希望尝试着放一些照片的展示。其实现在即将是视频时代了,拍照上传微博这种事情都快out了。不过我还是想跟风一把,试试看,放一些自己的想法在里面。

然后,我还希望尝试着做一些后台开发的学习和分享。这也是我转向sae的原因。最开始写博客的时候,我只是奢望一个能够直接写html代码的博客,给文章里做点样式和特效;到后来,我找到了github,通过gh-pages放静态页面;现在,我想通过sae写写php神马的。

以上是我近期的计划