Contextual Slideout Tips With jQuery & CSS3
admin 
This is an interesting solution for showcasing the new features of products – using contextual slideout tips.
Knowing the importance of HTML standards, the development team is making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines. read more
45+ Fresh Wordpress Tutorials, Techniques and Hacks
The growth and popularity of Wordpress continues to spiral to a seemingly endless end. It continually proves itself time time and again that it has very few limitations, and is rapidly pushing itself to being, if not the best, but certainly the most versatile CMS available. Out of the box it is certainly not perfect, but in the hands of the huge WP community, it might just be.
In this article we have collected 45 fresh Wordpress tutorials and techniques, with some hacks, guides and best practices thrown in for good measure. Everyone, not just developers, should take something from this round-up.
Complete Theme Design Tutorials
How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial
Rounding Up the Top 10 jQuery Lightbox Scripts
Everyone loves lightbox javascript effects, since the original Lightbox script there has been countless clones generated for all the popular Javascript libraries. This collection rounds up the top ten Lightbox scripts for jQuery in particular, so remember to keep it bookmarked for your next design project!
jQuery Lightbox Plugin
Supported Media: Images
Sponsor Flip Wall With jQuery & CSS
Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.
We are using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. The resulting code can be used to showcase your sponsors, clients or portfolio projects as well.
Step 1 – XHTML read more
How to Customize fonts in WordPress blog with CSS3
Fonts type that can be used for Safari, Chrome and Firefox3.1+ are .ttf(True Type Font) and.otf(open type font). Both support the @font-face rule that allows stylesheet to point to a .ttf or .otf on server. IE has little problem with .otf. After declaring the @font-face rule give reference to your required font-family property in your stylesheet as following:
@font-face {
font-family: MEgalopolis Extra; src: url(‘MEgalopolis-Extra.otf');
}
h3 { font-family: MEgalopolis Extra, sans-serif; }
Reference:
@font-face {
font-family: MEgalopolis Extra;
src: url('MEgalopolis-Extra.otf');
}
Example:
MEgalopolis Extra
The drawback of embedding fonts in stylesheet is again licensing and infringement issues which you can handle with the sIFR (Scalable Inman Flash Replacement) method. There is a well explained article on sIFR implementing the core method, you can find it at Mike Industries’s Blog “sIFR 2.0: Rich Accessible Typography for the Masses“.
There are lots of websites where you can find Free and useful resources. read more
9 Widely-Used And Free Forum Softwares
Forums are clearly one of the most standard ways of sharing knowledge on the net. With easy-to-use interfaces & strong community features, they are still very functional & popular.
They can be easily integrated into a website by customizing the look & feel or used as a framework which is sometimes a good idea considering the features they offer.
Here are 9 widely-used, open-source & free forum softwares, where most of them are built with PHP, that you may consider using:
phpBB (PHP)
phpBB is one of the oldest & widely used forum softwares around. It is being updated frequently with improvements in speed, security & features.
It comes with a powerful administrator panel where all aspects of the system can be managed & supports almost any database.
The software has a very crowded community which makes it easier to get support. read more
CSS3实现圆角效果
创建那些完美的小圆角图片，用做适当的CSS背景，是非常费时的工作。现在，使用CSS3，我们可以用它的border-radius属性，通过几行代码来方便地创建圆角。不过这些CSS代码是基于CSS3的，这就意味着只在Firefox，Chrome，Opera等浏览器有效，IE内核的浏览器，包括IE8都不支持。
前缀：
-moz (例如 -moz-border-radius) 用于Firefox
-webkit (例如：-webkit-border-radius) 用于Safari和Chrome
CSS3圆角（所有的）
这是一个5px普通边框和15px边框半径的设置：
#roundCorderC{
font-family: Arial;
border: 5px solid #dedede;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding: 15px 25px;
height: inherit;
width: 590px;
}
致网站设计初学者：你该了解的CSS技巧
在我们初学网站设计的时候，会遇到很多关于显示的问题，然后，最终我们会发现很多都是由一些CSS暗含的小技巧来解决的。每个网站设计人员都会碰到这样的问题，花费了很多时间，我们查找原因、查找解决办法，找到答案的时候，我们就会希望：如果早知道~~
这篇文章就是关于这些你该掌握的CSS技巧：
Resets & Browser Inconsistencies
Box Model — Margin, Padding & Borders
Dimensions — Width, Height, Min & Max
Floats & Clearing
Conditional Comments
Overflow & Zoom
原文链接: http://www.noupe.com/css/css-techniques-i-wish-i-knew-when-i-started-designing-websites.html
如何在文章里嵌入代码
我们在写有关代码技巧的文章的时候，总会需要在文章里嵌入代码，诸如HTML, CSS, PHP, javascrip等等。如何让代码能够不执行，仅仅显示呢？很多博主应该都会遇到这个问题。
在一篇文章中，我们对代码一般会有这样两种处理方式：一类是我们在一段话中引用代码，来加以说明；另一种则是高亮显示完整的代码段。
在一段话中引用代码，我们可以用<code>和</code>把代码包括进来。
比如：如果要显示“我们今天要讨论的是index.php”，可以在编辑器里这样输入：我们今天要讨论的是<code>index.php</code>。
但如果代码里有HTML标签的话，这样仅仅用<code>和</code>还是不行的，Wordpress会解读为你在使用html标签。
比如要显示：“我们来看<div class="header">”，在编辑器里，我们必须使用字符集<来替换标签左括号，用>替换标签右括号，然后再用<code>和</code>把代码包括进来，即： <code><div class=”header”></code>。
你可以阅读WordPress官网上的这篇文章，那里有详细的解释。
以上是说明如何在一段话中引用代码。另一种情况是，我们需要单独高亮显示一整段代码段，来表达某个功能的实现方式。
使用Wordpress代码编辑插件。
以下有一些推荐的，其实每种都很好用，看个人喜好。
- Code Markup
- Wordpress Plugin Code Editor
- Power Code Editor
- WP-SynHighlight
- Google Syntax Highlighter for WordPress
使用SyntaxHighlighter
SyntaxHighlighter 是一款基于javascrip的开源代码高亮显示工具。使用起来也很简单，你只需要把以下代码段copy到<head>头文件里（或者是其它你需要高亮显示代码段的任意地方），移除不需要的语言。
Use WP template post-class() to style posts individually
We have so many posts in different categories or tags. Sometimes we may need to provide some special CSS style layout to some named posts, categories or tags. If that’s what you want to achieve, the wordpress template function post-class() can help.
To use this function in a theme, you will simply add it to the Loop in a place that makes sense. Most themes encapsulate every post within a DIV of some sort. That DIV usually has a class=”post” or something similar. Instead of that class, just add a call to post_class instead. Like so:
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
The post_class() outputs the class=”whatever” piece for that div. This includes several different classes of value: post, hentry (for hAtom microformat pages), category-X (where X is the slug of every category the post is in), and tag-X (similar, but with tags). It also adds “sticky” for posts marked as sticky posts. These make it easy to style different parts of the theme in different ways. Read the Wordpress documents about post-class() here.
Wordpress 2.7 after versions provide the “stick post” feature, that is, for those posts you’ve published before , now you can place them at the top of your homepage without editing the timestamp, only by checking “stick this post to the front page” in WordPress post edit panel. Here this article explains in deep details on how to style a stick post.
In the same way, you can also give special styling to named categories or tags. Another tutorial talks more about it.
Sponsored by
Recent Posts
- 52 Excellent Single Page Sites Inspiring For Designers
- Very Simple & Tiny Lightboxing: Lightbox_me
- 10+ Free HTML5-CSS3 Website Templates
- Bizarre Websites On Which You Can Kill Time With Style
- 40 Beautiful E-Commerce Websites 2010
- gMap – google maps plugin for jquery
- Contextual Slideout Tips With jQuery & CSS3
- TipTip jQuery Plugin
- Showcase Of Beautiful Vertical Navigation Designs
- 45+ Fresh Wordpress Tutorials, Techniques and Hacks
Tag Cloud
Archives
- June 2010 (4)
- May 2010 (1)
- April 2010 (8)
- March 2010 (24)
- February 2010 (10)
- January 2010 (16)
- December 2009 (25)
Blogroll
