It’s sound familiar when hearing CKEditor, isn’t it? I thought this CKEditor is another WYSIWYG editor like FCKEditor but i’m wrong, this is the new version from FCKEditor. In 2009 the team decided renaming the editor become CKEditor and they claim :

“CKEditor inherits the quality and strong features people were used to find in FCKeditor, in a much more modern product, added by dozens of new benefits, like accessibility and ultimate performance.”

You can see the demo in here and update your FCKEditor to CKEditor in here

From the website :

The Printliminator is a bookmarklet with some simple tools you can use to makes websites print better. One click to activate, and then click to remove elements from the page, remove graphics, and apply better print styling.

This tool allow you to get better printing with just select and remove any elements you don’t want to print, easy isn’t it?

Tired in creating CSS Sprites with many images? Let CSS Sprites do for you. This tool is really useful for us in creating CSS Sprite, just prepare any images we want to use in sprite, upload them and then in ease way we get our combined image (image sprite), CSS code and the HTML code!

And moreover we can add rollover effect on our image sprite, and CSS compression to the generated CSS. For the rollover effect, it provides :

1. Color
   • Desaturate
   • Invert
   • Sepia
2. Flip
   • Horizontaly
   • Verticaly
3. Miscellaneous
   • Emboss

Nice one!

When I found this tool I remember when I first started a project without using web framework, I used to create folder structure (images, stylesheet, javascript, etc.), html and css base template, add css reset, including javascript framework and plugins, so on. Then i tought, “Why didn’t i find this tool from the very beginning?“.

Project Deploy provides “instant template” for web developers in starting a new project. Its indulges us with “choose and next” in creating template.

We can choose what type of our html doctype, are we using css reset or not, using jQuery framework with minified and gzipped or not, etc. After choosing our needs they generates our choice and then give us the downloaded file. Nice tool

If you want to present an image in “after and before” mode with only one image layer here it is jQuery Before/After Plugin. Being inspired from New York Times post, the plugin’s author allow you to present images after and before in pretty slick way. It gives you draggable separator in the image to show your image before edited (for example) and after edited with only sliding the separator.

Just prepare two images (image after and image before) in the same size, put each image inside div and put them inside div with unique id, put the id on the plugin’s function and you got it

CSStypeset is an online CSS WYSWYG editor, it’s very simple and useful tool for web developer moreover for those who aren’t familiar on CSS.

This tool allow us to modify and test our web content (text) on the fly, you can modify line height, word spacing, letter spacing, font family, font size, font-weight, color, etc. on the left box, And then after modiying you can get your generated CSS on the rightbox

Text-Shadow recently being a buzz when CSS3 launched even this feature was proposed in CSS2. Now the issue is how about the browser compatibility? Rather than adding cross-browser stylesheet for each element better we use JavaScript Framework plugins.

I have collecting two plugins from two different framework, its Mootools and jQuery plugins for text-shadows. You can use them on your project, add element class to the plugins function and let them make the shadows for your elements.

You can download the Mootools plugin in here and jQuery plugin in here

From the website :

Easy is more than a CSS framework designed for building layouts. It includes built-in (jQuery powered) interactive functions that are so easy to use that you really don’t have to know first thing about JavaScript. It also includes a library of preformatted and precoded CSS/HTML content blocks that you can simply paste into your master template. With a way of file organization it allow you to easily create your own content blocks.