生成器
CSS3 Please!跨浏览器的CSS规则生成器，支持：border-radius、 box-shadow、渐变(线性)、rgba色彩、transform (旋转)、transition和@font-face。
CSS3 生成器支持border radius、box shadow、text shadow、RGBA、@font-face、多列、box resize、box sizing 和outline.
CSS3 Sandbox有一些列的CSS3生成器：线性渐变、放射渐变、文字阴影、盒阴影、Transforms和文字描边。
@font-face生成器来自于Font Squirrel的很好用的CSS3 @font-face 生成器。
CSS3渐变生成器为Firefox和Webkit浏览器生成线性渐变。
CSS 圆角生成用于Firefox、Webkit和标准CSS3语法的“border- radius”属性。
Webkit CSS3 生成器简单的助你理解Webkit引入的CSS3特性。
CSS3 学习工具动态为你的浏览器获取私有前缀并检测该属性是否被它支持。
JavaScript方案
Modernizr一个确实很有用的JavaScript库，可以检测HTML5/CSS3的原 生支持，并为你提供一种维护良好控制级别的方法，不管浏览器的能力。如果你更喜欢使用MooTools，你可以使用MooModernizr (MooTools 版本的Modernizr)
Sizzle – JavaScript 选择器库一个纯Javascript选择器引擎，被设计用来方便的插入到一个主库中。Sizzle 实际上支持所有的CSS3 选择器——它甚至包括一些很不常用的选择器，比如忽略选择器(escaped selectors )(”.foo\\+bar”)、Unicode 选择器、以及在document序列中返回的结果。这也是jQuery使用的选择器引擎。
YUI 选择器组件YUI CSS3 选择器组件，提供一个收集、过滤和测试HTML元素的稳定的简写方法。
ie7-js一个让IE拥有兼容标准的浏览器一样的行为的JavaScript库。
CSS3伪类选择器模拟ie-css3.js 可使Internet Explorer识别CSS3 伪类选择器并渲染任何使用它们定义的样式规则。简单滴在你的页面中引入这个脚本，然后在你的样式表中使用这些伪类选择器，然后IE就可以使用了。
参考指南
CSS 3.0参考手册
腾讯ISD WebTeam制作的一个CHM格式的参考手册，很全面，介绍+实例，推荐下载收藏；
我什么时候能用CSS3CSS3、HTML5、 SVG以及其它即将可用的页面技术的浏览器兼容性列表；
浏览器支持清单使用Modernizr库检测你的浏览器支持的“高级”特性，包括CSS3特性和 选择器的支持。
CSS3选择器测试自动运行大量的判断你的浏览器 是否支持一些CSS选择器的小测试；
SelectORacle一个提供CSS2和 CSS3选择器介绍的在线工具。简单的给它一些选择器，他就会返回选择器匹配的相关说明。
CSS3手册与快速指南提供当前CSS3规范的 列表，列出属性可用的值、常用的选择器模式参考，以type/单位组织，选择器类型参考和单位参考和信息(另有PDF 版本)；
CSS3伪类SitePoint的CSS参考的相 关部分内容；
CSS3 速查手册CSS3属性、选择器类型以 及可用的值的列表，PDF格式；
CSS3色彩名称
提供所有147种色彩的名字以及按照字母排序的值。
六月 18th, 2010 in
Technical |
No Comments
The Importance of Cross Browser Compatibility: Tips and Resources - Noupe.
Nowadays everyone’s using a different browser. Between popular options like Firefox, Safari, Chrome and Internet Explorer, which make up close to 98% of the internet market share of browsers, and the other little known browsers like Konqueror, there are a multitude of browsers being used to view your site.
How does your website function across all these options? It’s important that your website is usable across all major media, whether it be popular browsers, mobile devices, or any other web browsing devices. In this article, we’ll cover some basics of making sure your site is cross-browser-compatible, including snippets and resources to help you along the way.
The Problem
Not everyone uses the same browser. Similar to how everyone is running on a different operating system, you can’t expect all people to be using the same web browsing tool.
So what are the options? The data about current browser share varies depending on the source and the region, but in general, Internet Explorer, Firefox, Chrome, Safari, and Opera make up most of the market share, with Internet Explorer dominating the market. Internet Explorer 8 has over 25% market share, Internet Explorer 6 has 215 and Internet Explorer 7 having 14%.
When there are so many different options out there, each running their own rendering engine, how do you ensure that your web design or application will hold up in each of them? That what we hope to cover and provide solutions for in this article.
How does your site perform?
So, how does your current site perform in the multitude of browsers that are out there? Why not check for yourself? If you don’t want to install all the major browsers out there on your own personal machine, here are some resources to help you out.
Adobe Browser Lab
Adobe Browserlab offers an awesome solution for viewing on demand screenshots of your site. This is usually my go-to program for testing in various browsers.
Browsershots
Makes screenshots of your web design in a lot of different browsers. After you submit your URL, it gives you a url where your screenshots will be loaded up.
Browser Sandbox
Runs an application to view your site in a variety of browsers.
Browsrcamp
Allows you to test the compatibility of your design with Mac OS X browsers.
IE Tester
A free WebBrowser that allows you to check how your site looks like on IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP.
Browser Proofing Your Site
So turns out your site doesn’t function as expected across all the major browsers? Don’t worry. It happens to the best of us. Now it’s time to go about fixing it.
Validate
First off, validate your site. Ironing out those XHTML and CSS errors can often solve those pesky browser bugs. I suggest running your site through W3’s XHTML Validator and CSS Validator.
CSS Reset
Another great way to ensure your site is cross browser compatible is to always reset your CSS before working on a project. There are many different global CSS resets, but Eric Meyer’s one and Yahoo’s one are considered to be the most correct ones:
Eric Meyer’s Reset Reloaded
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
YUI’s CSS Reset
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;}
Either include thet CSS reset styling at the top of your stylesheet, or have Yahoo host it and simply link to it in your HTML-documents, right before your own stylesheet:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">
Conditional Statements
Another popular method of ensuring your site is cross-browser-compatible is targeting specific browsers using conditional statements. Basically, the idea is to detect the user’s browser, and if it is one of those specified, it should perform a certain action.
One of the most common uses of conditional statements is to include a stylesheet if the browser is Internet Explorer. By doing this, you can correct some bugs that exist in your code and override your current stylesheet.
To use conditional statements, simply include the statement in the head section of your XHTML, right below the stylesheet inclusion.
Include a stylesheet if the browser is IE
<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
Target Specfic Versions of IE
<!--[if IE6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
(Of course, you can replace IE6 with any version of IE)
PHP Browser Detect
If you are looking for a more specific way of targeting browsers and even operating systems, then you should consider checking out Techpattern’s PHP Browser Detection Script. It’s a very powerful script that will detect everything from your visitor’s operating system, browser, JavaScript support, screen resolution, and more.
jQuery Browser Detection
For a jQuery-based solution of detecting browsers and adding a corresponding class to the body of your site, check out TVI Design’s Browser Detection using jQuery. The script adds a class to the body, which you can then style in CSS.
Mobile Devices
Things are changing. New devices are emerging as a medium for browsing the web these days. Whether it’d be smartphones, iPods or an iPad, there is a new enviornment for web design and as they become increasingly popular, it means that you must also take them into consideration when designing a site.
What does my site look like in a mobile device?
How about testing your site in some web based mobile emulators? If you are looking to test your design in a mobile device, here are some great resources:
Test iPhone
Simulator for quickly testing your iPhone web applications
iPhoney
iPhoney is a free application you can download in order to simulate a iPhone browsing experience. Includes support for rotating, zooming, and even turning off plugins like Flash.
MobiReady
Excellent tool for testing in mobile devices. Provides feedback including test results, options, and emulators.
Mobile Device Emulator
A great way to test your site across a multitude of mobile devices.
Ways to make your site mobile friendly
So how do you go about making your site mobile friendly? Well, if you are interested in pursuing a mobile version of your site, here are a few ways of doing so.
Redirect Users on a Mobile Device
An easy way of making sure your site is mobile-friendly is to redirect users viewing it from a mobile device to a certain “plain” version of the page on your server. Some of the easiest ways of doing this include Studio Hyperset’s Mobile Redirect Script, or using Mobiforge’s Lightweight Device Detection in PHP.
Mobify
Mobify allows you to design a mobile version of your site based on your current design. It also allows for traffic stats and advertising options.
Mofuse
Mofuse lets you create a mobile version of your blog for free. It’s pretty easy, and only takes a bit of time.
http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/
Create WordPress themes
http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/
http://www.siteground.com/tutorials/wordpress/wordpress_create_theme.htm
http://themeshaper.com/wordpress-themes-templates-tutorial/
http://net.tutsplus.com/site-builds/how-to-create-a-wordpress-theme-from-scratch/
How to convert any web template into a WordPress theme
http://max.limpag.com/2006/09/01/how-to-convert-any-web-template-into-a-wordpress-theme/
40 Exceptional “CMS Enabling” WordPress Plugins
http://www.noupe.com/wordpress/wordpress-cms-plugins.html
101 Techniques for a Powerful CMS using WordPress
http://www.noupe.com/wordpress/powerful-cms-using-wordpress.html
四月 28th, 2010 in
Technical |
No Comments
Juicy Resources: 20+ Amazing Product PSD files found on DeviantART | Design Juices.
Not every designer has the time to start from scratch on projects, these PSD files help you to edit each one to suit your needs for various projects you may be designing for. These are a selection of over twenty PSD files which I have found over on DeviantART, specifically of various electronic products. They include great up-to-date files of products such as; iPhone, Blackberry, PSP and Nintendo DS.
Mobile Phone PSDs
Some incredible phone PSD files here found on DeviantART; iPhone, Nokia 5800, HTC, Nexus one and Blackberry to name a few. All the files are the ownership of the owners stated and can be downloaded via the links given with each file showcased here.
iPhone PSD
Created by Manicho
DeviantART link
HTC Incredible Smartphone
Created by Zandog
DeviantART link
Nokia 5800 Xpress Music
Created by MK Graphics
DeviantART link
RIM Blackberry
Created by Digital Phenom
DeviantART link
TV Mobile
Created by Leozerosty
DeviantART link
Nexus One
Created by Zandog
DeviantART link
Blackberry Bold
Created by Just flik Walk
DeviantART link
SE Advert
Created by Siostranosy
DeviantART link
Gaming Console PSDs
Some incredible game console PSD files here found on DeviantART; Xbox, Sony PSP, Nintendo Wii to name a few. All the files are the ownership of the owners stated and can be downloaded via the links given with each file showcased here.
Playstation 3
Created by Bobby Perux
DeviantART link
Sony PSP
Created by Digital Phenom
DeviantART link
XBox 360
Created by Bobby Perux
DeviantART link
Nintendo DS Lite
Created by Jbensch
DeviantART link
Nintendo Wii Black
Created by Zandog
DeviantART link
Computer & Music Devices PSDs
iPod Touch
Created by Kol
DeviantART link
Ipod Nano
Created by Spud 100
DeviantART link
iPod Nano Chromatic
Created by Zikkzak
DeviantART link
Microsoft Zune Music Player
Created by Digital Phenom
DeviantART link
Dell Vostro
Created by Digital Phenom
DeviantART link
Macbook
Created by Obsillion
DeviantART link
Apple Keyboard
Created by Djeric
DeviantART link
Apple Remote
Created by bobby Perux
DeviantART link
Apple Display
Created by Djeric
DeviantART link
HDTV
Created by Nurutheone
DeviantART link
Headphones
Created by Nurotheone
DeviantART link
四月 27th, 2010 in
Design |
No Comments
14 most sexy galleries and slideshows usign javascript and CSS | Web Developer Juice.
On April 22, 2010, In CSS, HTML, jquery, by Steve
A slideshow is a display of a series of chosen pictures, which is done for artistic or instructional purposes. And if the slideshow is cool and sexy , it would surely add glamor and feeling of impressiveness. Here is the list of 14 cool galleries and slideshows using javascript which may addimpressive looks to your web application.
1. Pikachoose
.
2. Workshop.rs
.
3. Gadgetinspiration
.
4. Newmediacampaigns
.
5. Serie3.info
.
6. Dev.herr-schuessler.de
.
7. Smoothgallery.jondesign.net
.
8. Gayadesign
.
9. Nivo.dev7studios.com
.
10. Pirolab.it
.
11. Project66.net
.
12. Eyecon.ro
.
13. Jcoverflip
.
14. Cssglobe
.
That’s all
Cheers!!
四月 27th, 2010 in
Technical |
No Comments
In this post you will find a huge list of Free SEO (Search Engine Optimization) Web Tools and Softwares for SEO Specialist and Web developers. This roundup of SEO Web Tools should help speed up the SEO process of a website . I hope these essential SEO Web Tools which will come in handy. Please feel free to suggest some of the Web tools or softwares I did not mention. Subscribe to the feed if you would like to be informed for the latest posts.
You may also be interested in one of these older posts
Awesome And Free Fonts For Web Designers
13 Magnificent Free WordPress Portfolio Themes
13 Free Professional Looking WordPress Magazine Style/CMS Themes
25 Essential Tutorials And Resources For Learning CSS3
Page Rank
Get a overview of your website’s ranking
Check the PageRank for a website
Predicted PR of a site
View your Google PageRank and Alexa Ranking in bulk
View your Google PageRank on differnet Google servers
Links Related
Check whether your link partners are linking back to your website
A popularity score given to a website based on inbound links
A tool for checking the price of links
Check your links to see if it’s still valid or not
Checks the total number of web pages which link to a website
Help to determine the approximate amount you should be paying (or charging) per month for a text link (ad) from each and every page of the specified website
Analyze a given web page and return a table of data containing columns of outbound links and their associated anchor text
Convert dynamic URLs into static looking HTML URLs
Extract links from a specific web page
Shorten a web address
Check link text used by your backlinks to Link to your wesbite
Keyword Related
Checks to see if your site is in the top three pages of a search engine result for a specific keyword
Another SEO tools for keywords
A visual representation of keywords used on a website
Another SEO tool for checking keyword density
See how difficult it would be to rank for specific keywords or phrases
Optimizer your keywords with this tool
Find related keywords matching your search
Sitemap
Build your Site Map online (XML, ROR, Text, HTML)
Google (and Yahoo!) Sitemap Generator for Windows
Search Engine Optimizion Tool for validating your xml sitemaps
Search Engines
Tells you everything about your visitors
Check whether a site is banned by Google or not
SEO Tool to simulate search engine parsing of webpages and display discovered links.
Check the no. of indexed pages for your blog
Simulates a search engine by displaying the contents of a web page
Checks the exact HTTP headers that a web server is sending with an HTTP response.
Locate your search listings on Google and Yahoo!
Preview your website on Google, MSN and Yahoo! Search
HTML Related
Hide your HTML source code
Optimize and clean your HTML source code
Extract the HTTP Headers of a web page
Check HTTP headers for any specific URL
Extract meta-tags information from a web page
Generate and configure your meta-tags
Analyze a website’s meta tags
Help you to generate meta tags
View the source code of a page
Web stats
Real-time stats for your website or blog.
Famous free web tracker
Free, real time updated web stats service
Provide free website statistics
Domain related
View and compare Alexa Ranking graphs
Find out the age of your competitor’s domains
Get all kind of statistics of your competitor’s domains
Check the availability of domains
Retrieve a range of information about a domain
Retrieve domain whois information
Check the availability of domains instantly
Check the presence of an active connection
Resolve a host to an IP address
Check if your website is online or offline
Find out how fast your website loads
Shows your ip address
Determine the Country, City, Latitude and Longitude of an IP Address
Determine the Country in which the specified website is Hosted
Google
Reporting Spam to Google Use Google to search your website
Submit your website to Google
Monitor Keyword Phrases
Googles Guidelines for Websmasters
Facts for Webmasters
Having Trouble? Contact Google Directly
Search Engine Submissions
You must have an account for this
This is where you go when you website doesn’t show up in DMOZ after you have submitted
Keyword Suggestion Tools
This is the best one of the three
Analyze the ratio of internal links vs. external links.
Want to know whether or not you actually want your link on that page?
This place has EVERY tool under the sun for everything you could ever possibly want
Reveals backlinks pointing to the target URL along with a link survey for eack backlink.
A fantastic PageRank tool.
Obfuscates your e-mail so spambots don’t pick it up from the Internet
After using all of the tools and more on this page. This has helped out the rankings faster than anything else.
Is your website being sandboxed?
See what the spider sees on your website
These are some things that I had in my favorites. Some of them are okay.
This website has a variety of misc. tools on it that you can use to better your search engine rankings.
This is a phenomenal script that will track what bots hit your website at what times. (Runs on PHP enabled websites)
This will break your website down and tell you any errors that you may be unaware of.
This will track your clients throughout the dynamically created pages of your website. This is a free service.
This will test your website for any errors that you may be unaware of and tell you how to fix them.
Calculates the PageRank of a webpage.
Link Exchanging
This is great for the beginner however you will find out that you need to majorly adjust your pages manually in order to pread page rank throughout them otherwise you end up with 20 pages with no PR and 1 page with PR.
Website Design & Tools
Miscellaneous
For Atom and RSS
Check for conformance to W3C Recommendations and other standards
Preview Kontera Ads on your website
Simple online spell checking tools
Shows what your site looks like with different screen resolutions
View your IP address and your browser details
Send e-mails to users anonymously
Encrypt text to MD5
A simple online calculator
Checks Reciprocal Links
Ameta Meta tag editor
Makes simple XML sitemaps
Simple RSS feed maker
Checks the size of the webpage
Website Design & Tools</h2>
<p><a rel=”nofollow” href=”http://www.bruceclay.com/searchenginerelationshipchart.htm” target=”_blank”>Search Engine Relationship Chart</a><br>
Bruce Clay does an excellent job of keeping this updated.<br />
<br>
<a rel=”nofollow” href=”http://www.uptimebot.com/” target=”_blank”>Link Popularity Checker</a><br />
Checks the popularity of a link<br />
<br>
<a rel=”nofollow” href=”http://a1portal.com/freetools/charcount.htm” target=”_blank”>Character Counting</a> <br />
This is great when optimizing your title or meta tags<br />
<br>
<a rel=”nofollow” href=”http://www.itnews.org.uk/w_qrefs/w_international/p_charsets.cfm” target=”_blank”>Character Encoding</a><br />
<br>
<a rel=”nofollow” href=”http://www.hypersolutions.org/pages/hex.html%23DectoHex” target=”_blank”>Converting Hex to Dec or Vias Versa</a><br>
<a rel=”nofollow” href=”http://www.sonofsofaman.com/misc/ascii/default.asp” target=”_blank”>Ascii-Dec-Hex Conversion Code Chart</a><br />
Decimal to hex conversion chart<br>
<a rel=”nofollow” href=”http://a1portal.com/freetools/asciicodes.htm” target=”_blank”>Ascii-HTML View Conversion Chart<br />
</a>This is an excellent resource when placing ascii code on your website. Remember to use the correct character encoding)<br>
<a rel=”nofollow” href=”http://www.jimprice.com/ascii-0-127.gif” target=”_blank”>Ascii Chart in .GIF Format</a><br />
An Ascii chart in GIF Format<br>
<a href=”http://www.futurenowinc.com/wewe.htm” target=”_blank” rel=”nofollow”>Customer Focus Tool<br />
</a>Tells you whether your website is focused on your customers or not)<br>
<a rel=”nofollow” href=”http://www.dead-links.com/” target=”_blank”>Dead Link Checker<br />
</a>Doesn’t crawl links within Frames or JavaScript)<br>
<a rel=”nofollow” href=”http://www.digitalpoint.com/tools/adsense-sandbox/” target=”_blank”>Adsense Simulator</a> <br />
This will give you an idea of what ads will be displayed on your website before you place them<br>
<a rel=”nofollow” href=”http://www.seo-guy.com/seo-tools/google-pr.php” target=”_blank”>Page Rank Finder</a> <br />
This is a great tool to find quality websites with the PR that you are looking for to exchange websites with.<br>
<a rel=”nofollow” href=”http://www.mcdar.net/” target=”_blank”>Keyword Analysis Tool</a><br />
This tool is a must. It’s quick and easy to use<br>
<a rel=”nofollow” href=”http://www.webjectives.com/keyword.htm” target=”_blank”>Keyword Density Analyzer</a><br />
Analyzes the density of a keyword<br>
<a rel=”nofollow” href=”http://www.searchguild.com/cgi-bin/difficulty.pl” target=”_blank”>Keyword Difficulty Checker</a><br />
You will need a Google API for this one<br>
<a rel=”nofollow” href=”http://www.google.com/api” target=”_blank”>Free Google API</a><br />
Google api for making applications<br>
<a rel=”nofollow” href=”http://www.rocketrank.com/” target=”_blank”>Rocket Rank</a><br />
This will only check the top 20 of the following SE’s:<br>
(All The Web DMOZ AltaVista Overture Excite Web Crawler HotBot Lycos What U Seek Yahoo)
<p><a rel=”nofollow” href=”http://nms-cgi.sourceforge.net/” target=”_blank”>Free Forms for your website TFMail</a><br />
<br />
<a rel=”nofollow” href=”http://validator.w3.org/” target=”_blank”>Validate Your HTML</a><br />
<br />
<a rel=”nofollow” href=”http://www.searchengineworld.com/validator/httperrorcodes.htm” target=”_blank”>HTTP Error Code Meanings</a><br />
<br />
<a rel=”nofollow” href=”http://www.digitalpoint.com/tools/keywords/” target=”_blank”>Keyword Tracking</a><br />
<br />
<a rel=”nofollow” href=”http://dev.w3.org/cvsweb/~checkout~/perl/modules/W3C/LinkChecker/docs/checklink.html?content-type=text/html;%20charset=utf-88″ target=”_blank”>Link Checker</a>
Website Design & Tools
Bruce Clay does an excellent job of keeping this updated.
Checks the popularity of a link
This is great when optimizing your title or meta tags
Decimal to hex conversion chart
This is an excellent resource when placing ascii code on your website. Remember to use the correct character encoding)
An Ascii chart in GIF Format
Tells you whether your website is focused on your customers or not)
Doesn’t crawl links within Frames or JavaScript)
This will give you an idea of what ads will be displayed on your website before you place them
This is a great tool to find quality websites with the PR that you are looking for to exchange websites with.
This tool is a must. It’s quick and easy to use
Analyzes the density of a keyword
You will need a Google API for this one
Google api for making applications
四月 23rd, 2010 in
Technical |
No Comments
from: http://www.webstuffshare.com/2010/04/nice-menu-css-animation-jquery-animate/
四月 23rd, 2010 in
Technical |
No Comments
I’m going to share with you my latest collection of Magazine style WordPress themes in this blogpost. I hope you’ll find it convenient to use – IMO, themes listed below are absolutely stunning, user friendly, and I personally like them a lot. In fact, I was a little picky when I first drafted this post and decided to list out only the free themes. Feel free to share this post around and do leave a comment if you knew any other themes that I should get it listed here.
Download and Demo Magazine Style WordPress Themes
1. WP Clear
Details: Download / Demo
2. FX Mag
Details: Download / Demo
3. Smashing MultiMedia
Details: Download / Demo
4. iGames
Details: Download / Demo
5. Hamasaki Theme
Details: Download / Demo
6. IsoTherm News
Details: Download / Demo
7. Lap of Luxary
Details: Download / Demo
8. Mimbo Theme
Details: Download / Demo
9. Subtly Made
Details: Download / Demo
10. Trista
Details: Download / Demo
11. The Morning After
Details: Download / Demo
12. Small Magazine Theme
Details: Download / Demo
13. ColorBold
Details: Download / Demo
14. Pro Start
Details: Download / Demo
15. WebFolio
Details: Download / Demo
16. SimpleScheme Mag
Details: Download / Demo
17. RockWell
Details: Download / Demo
18. FreshMotar
Details: Download / Demo
19. PixDesign
Details: Download / Demo
20. Bueno
Details: Download / Demo
21. Berita
Details: Download / Demo
22. Magiting
Details: Download / Demo
23. Render Magazine
Details: Download / Demo
24. OrganicMoss Theme
Details: Download / Demo
25. TypoPrint
Details: Download / Demo
26. Moi Magazine
Details: Download / Demo
27. Creative by Nature
Download / Demo
28. FakeBlog
Details: Download / Demo
29. Magazeen
Details: Download / Demo
30. Milano
Details: Download / Demo
31. Elegant News
Details: Download / Demo
32. WordPress Blues
Details: Download / Demo
33. PureMagazine
Details: Download / Demo
34. Urbane
Details: Download / Demo
35. Visoko
Details: Download / Demo
36. Magnum Black
Details: Download / Demo
37. Vodpod
Details: Download / Demo
38. Brightness
Details: Download / Demo
39. DesignMagz
Details: Download / Demo
40. Equilibrium
Details: Download / Demo
四月 23rd, 2010 in
Technical |
No Comments
24 Irresistible jQuery Tips to Power Up Your JavaScript Skills | tripwire magazine.
Storing Data
Use data method and avoid storing data inside the DOM. Some developers have a habit of storing data in the HTML attributes like fx.:
$('selector').attr('alt', 'data being stored');
// later the data can be retrieved using:
$('selector').attr('alt');
HTML attributes is not meant to store data like that and the “alt” as a parameter name does not really make sense. The right alternative in most cases is using the data method in jQuery. It allows you to associate data with an element on the page.
$('selector').data('paramtername', 'data being stored');
// then later getting the data with
$('selector').data('paramtername');
This approach allows you to store data with meaningful names and it is more flexible as you can store as much data as you want on any element on the page. For more information about data() and removeData(), see here jQuery internals One classical use of this is saving the default value of a input field because you want to clear it on focus.
<form id="testform">
<input type="text" class="clear" value="Always cleared" />
<input type="text" class="clear once" value="Cleared only once" />
<input type="text" value="Normal text" />
</form>
$(function() {
//Go through every input field with clear class using each function
//(NB! "clear once" is two classes clear and once)
$('#testform input.clear').each(function(){
//use the data function to save the data
$(this).data( "txt", $.trim($(this).val()) );
}).focus(function(){
// On focus test for default saved value and if not the same clear it
if ( $.trim($(this).val()) === $(this).data("txt") ) {
$(this).val("");
}
}).blur(function(){
// Use blur event to reset default value in field that have class clear
// but ignore if class once is present
if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
//Restore saved data
$(this).val( $(this).data("txt") );
}
});
});
Demo here
Columns of equal height
This tip show you how to use two CSS columns, and make them having exactly the same height?
function equalHeight(columns) {
tallest = 0;
columns.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
columns.height(tallest);
}
/*
How it works:
$(document).ready(function() {
equalHeight($(".box"));
});
*/
Test and improve you jQuery selector skills
This jQuery selector Lab is really cool and can be used free online and you can even download the lab and use it off-line. There’s a test page with most of the combination of html fields you can imagine and then a very long list of predefined selectors you can try. If that is not enough you can also type in your own selectors. 
Target blank links
Did you know that XHTML 1.0 Strict don’t allow “target=blank” attribute on links? Still it is quite useful to keep visitors on the site when they press an external link. A good solution to this problem should be using JQuery to make links opening in new windows. The rel=”external” attribute is used to match the links that we want to open in a new window.
$('a[@rel$='external']').click(function(){
this.target = "_blank";
});
/*
This is how it works:
<a href="http://www.tripwiremagazine.com/" rel="external">tripwiremagazine.com</a>
*/
Test if a jQuery collection contains any elements
If you need to test if a jQuery collection contains any elements you can simply try accessing the first element like this:
if($(selector)[0]){...}
// or you may use
if($(selector).length){...}
Let look at an example:
//ex. if you have this html on a page
<ul id="shopping_cart_items">
<li><input class="in_stock" name="item" type="radio" value="Item-X" />Item X</li>
<li><input class="unknown" name="item" type="radio" value="Item-Y" />Item Y</li>
<li><input class="in_stock" name="item" type="radio" value="Item-Z" />Item Z</li>
</ul>
<pre lang="javascript" escaped="true">...
//The condition in this if statement will evaluate to true because we have two
// input fields that match the selector and the <statement> will be executed
if($('#shopping_cart_items input.in_stock')[0]){<statement>}
Use Callback to synchronize Effects
If you want to ensure that events occur one after the other you should use callbacks. Functions allow us to register a callback once the operation is over like this: slideDown( speed, [callback] ) ie. $(’#sliding’).slideDown(’slow’, function(){… Try try the example below here.
<style>
div.button { background:#cfd; margin:3px; width:50px;
text-align:center; float:left; cursor:pointer;
border:2px outset black; font-weight:bolder; }
#sliding { display:none; }
</style>
<script>
$(document).ready(function(){
// Use jQuery to change look of div once clicked and the event to
//start off the slide effect
$("div.button").click(function () {
//div.button will now look like a pushed down button
$(this).css({ borderStyle:"inset", cursor:"wait" });
//The hidden #sliding will now slide down and use callback to start the
//slideup once it completes
$('#sliding').slideDown('slow', function(){
$('#sliding').slideUp('slow', function(){
//once the slide up is over the callback change css for button back
$('div.button').css({ borderStyle:"outset", cursor:"auto" });
});
});
});
});
</script>
Use Events to control DOM Elements and Custom Objects
One of the most useful parts of jQuery is it’s ability to attach events to objects within a web page. When these events are triggered you can then use a custom function to do pretty much whatever you want with the event.There is a wide range of Events that are supported by jQuery and you will be able to create your own as well. Binding events to page elements doesn’t get much easier and elegant here a few examples.
//Bind click event to a paragraph and write click coordinates to the page
$("p").bind("click", function(e){
var str = "( " + e.pageX + ", " + e.pageY + " )";
$("span").text("Click at coordinates: " + str);
});
//Binding multiple events is also simple and
$("p").bind("mouseenter mouseleave", function(e){
//toggleClass adds the specified class if it is not present, removes
//the specified class if it is present.
$(this).toggleClass("mouse-over");
});
Not only can you bind events to DOM elements as simple as just illustrated. With jQuery you can actually bind a custom event to ANY object. Here is an example.
}
function shoppingCart() {
// Do general shopping cart stuff here...
};
var myShoppingCart = new shoppingCart('personalShoppingCart');
jQuery(myShoppingCart).bind('addItem', function() {
// Custom event handling for adding items to the shopping cart...
});
// Trigger custom event:
jQuery(myShoppingCart).trigger('addItem');
);
Learn to use Custom Selectors
On top of standard CSS selectors jQuery allow you to define custom selectors that makes your code even more simple.
$.expr[':'].mycustomselector= function(element, index, meta, stack){
// element- is a DOM element
// index - the current loop index in stack
// meta - meta data about your selector
// stack - stack of all elements to loop
// Return true to include current element
// Return false to explude current element
};
// Custom Selector usage:
$('.someClasses:test').doSomething();
Lets take a look at an example. This custom selector will return elements in the scope specified with attribute “rel”:
$.expr[':'].withRel = function(element){
var $this = $(element);
//simply returning elements where rel is not empty
return ($this.attr('rel') != '');
};
$(document).ready(function(){
//Using the custom selector is simple and the collection returned support chaining
// as illustrated here to apply some css to the returned elements
$('a:withRel').css('background-color', 'green');
});
...
<ul>
<li>
<a href="#">without rel</a>
</li>
<li>
<a rel="somerel" href="#">with rel</a>
</li>
<li>
<a rel="" href="#">without rel</a>
</li>
<li>
<a rel="nofollow" href="#">a link with rel</a>
</li>
</ul>
Remove a word in a text
It is quite simple with jQuery to remove words in a element text? The following code can be easily modified to replace a word by another. In this case “wordtokill” is replaced by “wordtolive”.
var element= $(’#id’);
element.html(element.html().replace(/wordtokill/ig, “wordtolive”));
Make entire Elements click-able
A lot of menus are created using simple <li> lists and css. It would be nice for the website usability if navigation was provided for the entire <li> and not just for the link text. jQuery makes this possible in a pretty simple way by taking the href (url) from the embedded link.
<ul>
<li><a href="home">home</a></li>
<li><a href="home">about</a></li>
<li><a href="home">contact</a></li>
</ul>
...
//selector select all li within the ul and then we make them clickable.
$("ul li").click(function(){
//get the url from href attribute and launch the url
window.location=$(this).find("a").attr("href"); return false;
});
Preloading images
Generally it is a good idea to preload images if they are used in javescripts.
<pre>//Define function that preloads a defined list
//of images (arguments for the function).
jQuery.preloadImages = function(){
/Loop through the images
for(var i = 0; i<arguments.length; i++){
jQuery("<img>").attr("src", arguments[i]);
}
}
// You can use usage the script this way:
$.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");
Disable right-click contextual menu
As with other things we have been doing for years using javascript jQuery makes it simpler and more elegant. Of cause you can use this for much more. You may do something when the contextmenu event is fired.
<pre><pre>$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
})
Make code simpler using group queries
A useful way to make the code simpler and easier to read is by grouping the queries for elements that need the same treatment.
// Don't do it like this as it takes up unnecessary space and takes time to write
$('div.close').click(doSomething);
$('button.close').click(doSomething);
$('input.close').click(doSomething);
// Simply use group queries in the selector if you have to
//apply same operation to them all
$('div.close, button.close, input.close')
.click(doSomething);
Test your code well
jQuery comes with a unit test framework called QUnit. Writing tests is quite easy and allow you to confidently modify your code while ensuring that it still works as expected. Here is how it works:
<pre>//Separate tests into modules.
module("Module B");
test("some other test", function() {
//Specify how many assertions are expected to run within a test.
expect(2);
//A comparison assertion, equivalent to JUnit's assertEquals.
equals( true, false, "failing test" );
equals( true, true, "passing test" );
});
Minimize download time
Most browsers only download one script at the time and if you have several scripts being loaded on every page it can impact your download time. You can use Dean Edwards service “packer” to compress your scripts and make download faster. You need to maintain a development version and a runtime version as all you in-line comments will be lost. You will find it here.
Another solution that take this to the extreme is interesting to take a look at. Basically it is a server based PHP script that combine javasctipt files and compress them in a easy to maintain approach. Take a look at and see if you can use the idea and some elements of the concept “Make your pages load faster by combining and compressing javascript and css files“.
Logging to the Firebug console in jQuery
Firebug is one of my favourite Firefox extensions providing tons of tools in a very usable structure to aid you in HTML+CSS+JavaScript development. Obviously it is worth having just for it’s excellent inspection feature allowing you to jump into the html and css and learn in a visual way what elements of the page is rendered by what code. As a jQuery and general Javascript developer Firefox also has good support for logging in your JavaScript code. The easiest way to write to the Firebug console looks like this:
console.log("hello world")
You can pass as many arguments as you want and they will be joined together in a row, like
console.log(2,4,6,8,"foo",bar)
As a jQuery developer it even gets better using a tiny extension that Dominic Mitchell came up with to log any jQuery object to the console .
jQuery.fn.log = function (msg) {
console.log("%s: %o", msg, this);
return this;
};
With this extension you can simply call .log() on the object you are currently addressing fx.:
$('#some_div').find('li.source > input:checkbox')
.log("sources to uncheck")
.removeAttr("checked");
Use ID as Selector whenever possible
Selecting DOM elements using the class attribute is simpler than ever using jQuery. Even though it is simple it should be avoided whenever possible as as selecting using ID is much faster (In IE the class selector seams to loop through the entire DOM why generally it should be avoided). Selecting elements using IDs is fast because the browsers have the native getElementByID method that jQuery will use for IDs. Selecting classes still requires the DOM to be traversed behind the scene and if it is a large DOM and you make several lookups the performance impact can be significant. Let take a look at this simple html code:
<div id="main">
<form method="post" action="/">
<h2>Selectors in jQuery</h2>
...
...
<input class="button" id="main_button" type="submit" value="Submit" />
</form>
</div>
...
//Selecting the submit button using the class attribute
//like this is much slower than...
var main_button = $('#main .button');
//Selecting the submit button directly using the id like this
var main_button = $('#main_button');
Use Tags Before Classes
When you are selecting through tags jQuery will use the native browser JavaScript method, getElementsByTagName(). ID is still faster but this is still much faster than selecting with a class name.
<ul id="shopping_cart_items">
<li><input class="in_stock" name="item" type="radio" value="Item-X" /> Item X</li>
<li><input class="3-5_days" name="item" type="radio" value="Item-Y" /> Item Y</li>
<li><input class="unknown" name="item" type="radio" value="Item-Z" /> Item Z</li>
</ul>
It is important to prefix a class with a tag name (here this is “input”) and then it is important to descend from an ID to limit the scope of the selection:
var in_stock = $('#shopping_cart_items input.in_stock');
Cache jQuery Objects
Caching an object before working with it is essential for performance. You should neverdo like this:
<li>Description: <input type="text" name="description" value="" /></li>
...
$('#shopping_cart_items input.text').css('border', '3px dashed yellow');
$('#shopping_cart_items input.text').css('background-color', 'red');
$('#shopping_cart_items input.text').val("text updated");
In stead cache the object and work on it. The example below should really use chaining but it is just for illustration.
var input_text = $('#shopping_cart_items input.text');
input_text.css('border', '3px dashed yellow');
input_text.css('background-color', 'red');
input_text.val("text updated");
//same with chaining:
var input_text = $('#shopping_cart_items input.text');
input_text
.css('border', '3px dashed yellow')
.css('background-color', 'red')
.val("text updated");
Bind certain jQuery functions to $(window).load event
Most jQuery code examples and tutorials instruct us to bind our jQuery code to the $(document).ready event. In many cases this is OK but since $(document).ready occurs during page render while objects are still downloading it may cause problems for some types of scripts. Functionality such as binding visual effects and animations, drag and drop, pre-fetching hidden images etc. could benefit from being bound to the $(window).load as it will ensure that all dependant elements are ready for use.
$(window).load(function(){
// Put your jQuery functions that should only initialize after the page has loaded.
});
Use Chaining to limit selectors, make the code more simple and elegant
Because JavaScript supports chaining and because it works across line breaks you can structure your code like this. This example first removes a class on an element and then adds another to the same element.
$('#shopping_cart_items input.in_stock')
.removeClass('in_stock')
.addClass('3-5_days');
If needed it is really simple and useful as well to create a jQuery function that support chaining.
$.fn.makeNotInStock = function() {
return $(this).removeClass('in_stock').addClass('3-5_days');
}
$('#shopping_cart_items input.in_stock').makeNotInStock().log();
Loading latest jQuery version from jquery.org
You can actually load the latest jQuery version using this code:
<script src="http://code.jquery.com/jquery-latest.js"></script>
This is handy if you quickly want to try out an idea for a script with the latest version. As you may know you can also load jQuery from ajax.googleapis.com as shown in #1 - Load the framework from Google Code here.
Load the framework from Google Code
Google have been hosting several JavaScript libraries for a while now on Google Code and you may want to load it from them instead of from your server.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
Use Cheat Sheets
Most people can’t remember a lot of details and even though programmers tend to be better that the average the amount of information they need to have instant access too is devastating. Having a few cheat sheets printed out and placed next to the monitor is a good idea to speed up programming and to improve the code quality.
四月 23rd, 2010 in
Technical |
No Comments
Expressjs has a nice button menu. Yes it absolutely nice since it has opacity and box shadow on each button, automatically widen when mouseover and again opacity to transparent when mousedown. I’d like to explain how they works with pure CSS version and jQuery version.
The Technique
There are two techniques we want to do, opacity and widen the button. Opacity is an effortless technique since it was supported by CSS while widening the button is only CSS technique by increasing the button’s current padding with some pixels number. So, when the user mouseover the button we will add its padding to make it wide and decrease the button’s opacity when user click it.
Pure CSS
Now based on the technique above we’ll create these button using pure CSS. First we create the button list using unordered list and then we set its style. Set the list’s display with inline, fill its background color with black and opacity with 20% (CSS value : 0.2), add box-shadow and set its border-radius into 15px to make it rounded. For opacity on background color we will use rgba().
When user mouseover the button we’ll adding its padding and increase its opacity into 50% (CSS value : 0.5) and when user click it we decrease its opacity into 10% (CSS value : 0.1).
CSS Animation
Until above step we’ve a list of nice buttons but since they don’t have animation with them, the opacity transition and widening effects will not seen. So we’ll add the animation effect into each button, in this example each button represented by anchor element (<a>) it means we’ll put the animation on anchor style.
-webkit for Webkit-based browser and -moz for Mozilla-based browser. The trasition-duration represent how long the transition should last and transition-timing-function represent how the animation will proceed over time. On the CSS above we just create the animation in 0.20 seconds with ease-out function.
These step will add animation into any style changes and make them animate. For example the anchor has property width with value 20px and the anchor has different style when user hover it (ie : width: 40px), the width changes from 20px to 40px will be animated.
Browser Issue
Since -webkit-transition has supported by latest Webkit-based browser including Safari and Chrome, Our pure CSS menu with animation above will works perfectly. Unfortunately -moz-transition will be introduced on Firefox 3.7 (Gecko 1.9.3) so the animation will not works on latest Firefox.
jQuery Animate
For a while Browser issue was disrupt our pure CSS menu, but of course we won’t stop to make it works. Using jQuery we can replace the CSS animation with $.animate() function. Surely with $.animate() function we just need to specify the pixels number for increasing the button’s padding.
For button opacity we can’t use opacity property in $.animate() function because it will make our button and text transparent. Since we just need to make the button (background) transparent we need $.animate() property that support rgba, we can use Mehdi Kabab’s plugin which is modification (to support rgba) from John Resig’s background color plugin.
If the user mouseover the button, we set its default padding and animate it by increasing its padding and opacity and when mouseout we revert to the default CSS value. When user click (mousedown) the button we decrease the opacity into 10% and revert to 50% when mouseup the button.
Conclusion
CSS3 offers us many advantages but sometimes we can’t take that advantages due to browser support, thankfully for jQuery offers us the alternative. Thanks for reading and happy coding! You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed or webstuffshare FREE Email subscription. If you like this post, your sharing and feedback would be very appreciated