curvyCorners

CSS, Javascript, Stylesheet No Comments »


2007-06-06_0100131.jpg

What is curvyCorners?
curvyCorners is a free JavaScript program that will create on-the-fly rounded corners for any HTML DIV element, that look as good as any graphically created corners.

Why use curvyCorners?
Because it’s easy! You can add rounded corners to your DIVs in seconds. No image editing required.

Read more »

Niceforms 1.0

CSS, Stylesheet, Web Design No Comments »

2007-04-24_202453.jpg

What is it?

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can develop your own look. You can read more about Niceforms in my initial article or take a look at an example to see it in action.

Features

Niceforms works just like your regular web form while adding a few usability improvements as well. One of these improvements would be the possibility of selecting a radio or check box by clicking its adjacent label, which is not possible on Safari browsers, for some weird reason. Niceforms also highlights the labels of the selected boxes to make the selections even clearer.

The form fields and the buttons created via Niceforms are fully scalable. You can specify their width (and height for textareas) through regular HTML properties such as size, cols and rows. For the select field, you can specify its width by simply adding a CSS class. Buttons will automatically expand to accommodate the amount of text present.

Keyboard-only navigation works although it hasnโ€™t been tested thoroughly on Macs yet. Opera has a slight problem with this and keyboard navigation wonโ€™t work on the select fields.

Compatibility

The script is fully compatible with most major browsers, including Firefox, IE6+, Safari and Opera. Since Safari insists on styling input fields and buttons the Mac-way no matter what, Niceforms isnโ€™t applied on these elements for this browser, leaving the default styling in place.

Themes

You can basically customize the look of your forms any way you want by creating your own themes. Since Niceforms replaces the form elements with images, itโ€™s just a matter of slicing these images up correctly and creating the CSS that holds them all together. More themes are on the way and youโ€™re more than welcome to contribute as well. A short guide on how to properly create themes is in progress and should be available soon.

http://www.badboy.ro/articles/2007-01-30/niceforms/

Prototype Window Class

Ajax, CSS, Effect, Stylesheet No Comments »

2007-04-22_192328.jpg

This javascript class allows you to add window in a HTML page.

This class is based on Prototype. The code is inspired by the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it’s not mandatory.

It has been tested on Safari, Camino, Firefox and IE6, Opera looks fine.
Features

* Valid HTML/XHTML generated code
* Resizable windows
* Minimize/Maximize
* Modal dialogs
* Visual effects
* Skinnable
* And more…

http://prototype-window.xilinus.com/

LightWindow v1.1

Ajax, CSS, Javascript, Stylesheet, Web 2.0, Web Design No Comments »

2007-04-22_171957.jpg

Why another light-’whatever’?

After researching every single modal window, lightbox, slimbox, etc out there nothing fit the bill. Granted some of them were very nice but only fit a specific purpose, others were a nightmare on the code end, and others were just hacks of another. None of them truly supported all of the features we needed and those that were close could not be easily adapted without a bottle of Prozac near by.

Other caveats were the complete lack of ability to style and position the system, and the insane over-kill of some of the systems trying to reproduce either another desktop (As if most computer users aren’t confused enough) or the reproduction of a popup window (Show me someone who likes popup windows…). Lastly, most people didn’t actually test for their media types and how they behaved in other browsers and operating systems (Yes the movies and Flash work in Firefox for the Mac).

Because of Media problems and MAJOR flickering in Firefox on the Mac, you will not only need to specify a color for opacity but create a PNG to repeat that is the same opacity for this one situation, included is a 70% as you see on this page.

What are all of the features?

* Supports 5 different types of Media: Pages, Inline Content, Media(Movies, SWF, etc), Images(Galleries, Single), External Websites(via iframe)
* Automatically detects media and source.
* Fully customizable via CSS.
* Set starting heights and widths for each media and define media types.
* Window will fit content fetched! Excludes i-frame content
* The window is perfectly centered on the screen.
* There are optional Title Bars and Data boxes.
* Multiple Galleries are allowed with a Menu on the Galleries
* All windows will shrink to fit the screen including Image Sizes (Though in some cases its not recommended, i.e. fixed sized windows)
* Width, Height, Overflow, and Multiple Image Slides can optionally be set.
* Submit Forms via the window.
* ANY Character is supported with the exception of ‘[' & ']‘ (These are used to delineate categories for galleries)
* author, caption, title, and params (Added for this library) attributes are supported
* Click anywhere on the overlay to close the window or the ESC key. Optionally you can create your own close links or enable the title bar and use that close link.
* Define your own actions!
* NEW Instantiate a window on the fly instead of on page load.
* NEW Toggle Gallery Tab visibility.
* NEW Flash is resized to fit window (even if lWWidth and lWHeight are passed).
* NEW hideFlash is now a configuration option to choose whether or not to hide the flash in your page, in case you are smart enough to set the wmode and want that cool overlay effect on your flash.
* NEW formMethod is now available to set your form method to either ‘post’ or ‘get’.
* NEW iframes are removed from the DOM on lightWindow deactivation.

http://stickmanlabs.com/lightwindow/

Spiffy Corners - Purely CSS Rounded Corners

CSS, HTML, Stylesheet 1 Comment »

2007-04-18_072514.jpg

What?
Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript.

Why?
I needed a way to create anti-aliased round corners without the extra server calls that are incurred when using external JavaScript files or images. When your websites are serving millions of files a day you start to pay attention to how many files a particular page needs in order to load.

There are solutions for rounded corners using pure CSS. There are solutions that create anti-aliased corners. There are solutions that don’t require JavaScript. But to my knowledge, there has yet to be a pure CSS solution for rounded corners that does not require images or JavaScript. After looking, I decided to just create one myself. I’m not much of a programmer, but it was actually a lot of fun figuring out the math involved and learning arrays. In the end I ended up with 3 functions in under 20 lines of code total, so I’m quite happy with myself.
2007-04-18_072942.jpg

http://www.spiffycorners.com/



Last Content



Special Thanks To:Romow Web Directory & WordPress Themes Email & Advertising : cgimaster@gmail.com
Entries RSSLog in


Warning: is_executable() [function.is-executable]: open_basedir restriction in effect. File(/usr/local/bin/curl) is not within the allowed path(s): (/home/cgitop/:/tmp:/usr/local/lib/php/) in /home/cgitop/domains/cgitop.com/public_html/wp-includes/class-snoopy.php on line 216