Vikiworks™ Studio

The <span> tag is a tag that groupings of inline content within the content of a page. It can apply to a custom style to a piece of text (a single letter/word and short phrase) within a structural markup tag. Read more→

CSS is tricky and powerful. It’s easy to create a block style menu with CSS, the tricky part of put a short description under each menu is use SPAN tag, just copy the following to your markup file:

Thanks for Adam pointed out that we don’t need to be wrapped by divs. I made an update with more clean codes here.

<ul class="menu">
<li><a href="#">Menu01<br /><span>Short desc</span></a></li>
<li><a href="#">Menu02<br /><span>Short desc</span></a></li>
<li><a href="#">Menu03<br /><span>Short desc</span></a></li><
/ul>

then you need to put all these to your css file:

ul.menu { margin:0;padding:0; }
ul.menu li { display:block;padding:0; float:left;text-align:left;margin-right:2em; }
ul.menu li a { color:#fff;font:bold 14px georgia;text-decoration:none;line-height: 1.3em; display:block; }
ul.menu li a:hover { color:#ffc300; }
ul.menu li span { font:11px arial; color:#666; margin:0; }
ul.menu li span:hover {color:#999;}

Is that simple! and you can download this zipped sample file below. If you’re interested to see more CSS based menu designs, Smashingmagazine has a great collection and you check out those great design from all over the world.

441 times download.

M$ just about released its first beta verison of IE8 to public a hour ago, it really brought my attention back and would like to having a tryout to see if it’s been massive improved.

The team has officially announced that ie8 will interpret web content in the most standards compliant way and now ie8 renders Acid2Face correctly.

Here is the official download for IE8beta1 @ microsoft.

I’m a pullquote, a snippet of content what I am doing is to catching your attention.

When you are writing something and intend to catching attention of readers, put a pullquote as a snippet of preview the content is getting popular on blogs/websites. Both pullquote & blockquote are widely uses on newspapers, magazines, NYtimes.com is an actual web-based media to taking look at them.

This article will show how to get a pullquote with CSS. Technically, pullquote is different from blockquote, it is not a HTML element, which means we should markup it in HTML with heading element such as <h4> or <h5> and we use CSS to define it in a way you want.

Here is markup:

<h4 class="pullquote">I'm a pullquote, a snippet of content.</h4>

and put the following to CSS file, those will control how it looks like:

.pullquote {
padding: 10px;
float: right;
width: 200px;
margin:10px 0 10px 10px;
border-top:2px solid #ffc300;
border-bottom:2px solid #ffc300;
text-align: center;
line-height: 22px;
font-family: georgia, verdana, Arial, Helvetica, sans-serif;
color:#ccc;}

It’s all done! A nice pullquote will work just fine with your content of website/blog, enjoy.

推荐朋友去看看冰仔写的CSS扫盲一文，无论是beginner还是Guru，我想多看这样的文章不会有什么坏处的。我近期陆续写一些CSS小技巧，相信其中很多都是鲜为人知的，但同样目标群体还是针对所有人。

看烦了默认的按钮样式吗？我们可利用滑动门（Sliding doors）来实现替换传统button样式，我们先看看在不同系统下默认的按钮样式：

实现的最终效果：Click me! Read more→

As you can see, here is a trick to display two separate images in one blockquote.

The tricky part is adding some css, that’s all. I’m not a css Guru too, so no worries about messy codes, all you need to do is copy & paste to your existing page.

Thanks 北极冰仔, he fixed some buggy codes and hv it works in a perfect way. Unfortunately, it work sucks under IE! Again!

blockquote {
color: #777;
padding-top: 6px;
padding-bottom: 10px;
background: url(close-quote.gif) no-repeat right bottom;}

blockquote p {
font: 12px Georgia, "Times New Roman", Times, serif;
width: 400px;
padding-left: 18px;
text-indent: -18px;
}

blockquote p:first-letter {
background: url(open-quote.gif) no-repeat left top;
padding-left: 18px;
padding-top: 12px;
font: italic 26px Georgia, "Times New Roman", Times, serif;
}

blockquote p ~ p:first-letter {
font: normal 12px Georgia, "Times New Roman", Times, serif;
background: none;
}

I’m really exciting about introducing you guys an alternative way to get rid of classic windows desktop - such a boring wallpaper, instead with a fully RSS integrated capability by use Windows Active desktop features.

Sometime I’ve replaced my desktop image with a solid color (mostly black) but I still feel a kinda wastes of screen space, especially if you have a kick-ass wide screen. Someone would like to put many shortcuts of apps on the desktop, someone using apple-styled dock to quick launch apps, I’m turning my desktop to a feed desktop. let me show you how to make this works. Read more→

Hello! Thanks for dropping by.
你好! 感谢到来
こんにちは! 来ることをありがとう
여보세요! 하락 곁에의를 위해 감사

Unicode support is definitely sparking on present websites, say hello in multiple languages on the same page at same time, to be more friendly.

Jonathan has made a reseaching on replacing starndard name of IDs and classes with some symbol characters, such as “┌ “, ” ┐” to represents #left and #right classes. Read more→