Superdit.com » aditia rahman

20 JQuery Table Datagrid Plugins

aditia rahman — Wed, 18 Jan 2012 02:01:50 +0000

Datagrid is one of most common used in web design, sometimes it will taking a lot of time to designing table, like header, he zebra row, pagination, etc. In jquery there are a lot of ready to use plugin that I compiled in this post, although grid features will be supported in JQuery UI, maybe is good to know some alternative, before JQuery UI grid came along.

15 Icon Web Site And Search Engine

aditia rahman — Mon, 16 Jan 2012 02:05:40 +0000

Designing your own icons can be a time consuming, moreover if you are not designer, this experience can be happening for you a single fighter freelancer, I today in my first post in this year, I collected some of web site and search engine offering Icons that can be used for your project, most of them are free to use, just becareful to see the license before use.

1. Icongal

2. Icon Finder

3. Mr. Icons

4. Iconizer

5. Icon WebToolHub

6. Iconlet

7. Icon Seeker

8. Icon Archive

9. Iconspedia

10. Very Icons

11. Iconbug

12. Icones.pro

14. Icon Search

14. Find Icons

15. FreeIconWeb

More Resources

- bestfreeicons

- freeiconsdownload

- deviantart

60 Freebies PSD Login Screen For Inspiration

aditia rahman — Mon, 19 Dec 2011 02:33:44 +0000

Login screen is one of the most common used in web application, today I have collected some freebies of login screen mockup in PSD, in various style for example dark, paper style, greyscale, minimalist, etc. These might be good for getting some inspiration to create your own unique login screen, or you can modified it.

Creative Commons Attribution 3.0 License by SencerBugrahan

Free for both personal and commercial projects by premiumpixels

by chris farina

Creative Commons Attribution 3.0 License by hombre-cz

by psdchest

by Wampirus

For personal and commercial use by BlakeCeeno

Creative Commons Attribution 3.0 License by OmariCelestine

by elemis

For personal and commercial use by Andreas Fluge Iden

Creative Commons Attribution 3.0 License by NxtLvlDsgnCo

by CartonDock

For personal and commercial use by deadlinesdesign

Creative Commons Attribution 3.0 License by egirldesign

Free for personal by Tsunamy-boy

Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License by prkdeviant

by prkdeviant

by ILLegalCreeW

Creative Commons Attribution-Noncommercial-Share Alike 3.0 License by DJGama101

For personal and commercial use by ThemeDesigner

by WPscientist

Creative Commons Attribution-Noncommercial 3.0 License by easydisplayname

For personal and commercial use by designkindle

by wordpressthemeshock

by Lukas Majzlan

by Webdesigneraid

by designwoop

Creative Commons Attribution-Noncommercial-Share Alike 3.0 License by Scott Rollo

free for both personal and commercial projects by premiumpixels

by wordpressthemeshock

free for use in both personal and commerical projects by tegingraphics

by Chris Wallace

by Andreas Becker

by Jan Losert

by Glenn Van Bogaert

free for use in both personal and commercial projects by psdfreemium

free for both personal and commercial projects by premiumpixels

Feel free to use the resource in your personal or commercial projects by netchillies

by psdgraphics

by graphicsfuel

by downloadpsd

by pixelsdaily

Free to use the resource in your personal or commercial projects by firefreebies

Free to use for personal or commercial projects by pixelbeam

by abdelhakim85

by design3edge

Be it commercially or personally by designdeck

by Rodrigo Parra

by abdelhakim85

by josh cagwin

by slayerd1

by graphicsfuel

Creative Commons Attribution-Noncommercial 3.0 License by sundox

by Dawn Casserly

20 WordPress Gallery Themes

aditia rahman — Mon, 12 Dec 2011 09:40:21 +0000

These day many design showcase site are using wordpress for example CSS galleries, photography portfolio, etc. In this post I share some of wordpress themes to creating a gallery site, so you can built your own gallery site in a few minutes.

I try to find which is free to use. I created this post cause I found some of them are in minimalist design, really love it, look elegant, and feel like a premium theme.

Photo Madness

visit | demo | download

CSS Gallery Theme 2.0

visit | demo | download

Journal Crunch

visit | demo | download

Portofolium

visit | demo | download

Autofocus Lite

visit | demo | download

Gallery Theme

visit | download | demo

Garden Theme

visit | demo | download

Shaken Grid Lite

visit | demo | download

Simple Gallery

visit | demo | download

Dione

visit | demo | download

Tower

visit | demo | download

Photoria

visit | demo | download

Showcaser

visit | demo | download

Feature

visit | demo | download

XUXA

visit | demo | download

MyCorp

visit | demo | download

Mixfolio

visit | demo | download (registration required)

Fullscreen

visit | demo | download (registration required)

Foliogrid

visit | demo | download

Mansion

visit | demo | download (registration required)

Imbalance

visit | demo | download

JQuery CSS Animation and Rotate

aditia rahman — Sun, 11 Dec 2011 09:22:38 +0000

In today post I try to do a little experiment with css animation, with jquery to generating css value on the fly. When this post created the this animation examples only works on firefox and chrome browser.

In this short example I try to create a stack of images, on the default position each of images have a different angle, and rotating to the same angle in the same duration of time. Here I show all of the code.




    CSS Rotate And Animation

I use jquery for generating each images angle, and adding CSS animation on the fly using jquery, you can see all the images have the same animation keyframe which is animation to 360deg in 3 seconds, with ease effect, so why not just put on static css style, I don’t really know what, but on webkit browser it is not working. Here the demo, this might be a lag on firefox.

Demo

20 CSS Button Examples and Tutorials Resource

aditia rahman — Wed, 07 Dec 2011 23:30:18 +0000

CSS button has becoming one of web design trend these day, with some cool features in CSS 3 like rounded corner, gradient background, box shadow, text shadow we can create a fancy web button without using any images.

Today I compiled some of awesome CSS button example and tutorial, I tried to show the most recent example and tutorial, at least created on this year. Here they are, might useful for you to learn about creating a fancy CSS button or you may found something that ready to use, and you can copy and paste to your next project.

Awesome CSS3 Button

Cross Browser CSS Gradient Button

BonBon CSS3 Button

Animated Button With CSS3

CSS3 Github Button

CSS3 Exp Button

Zardi

Animated Buttons CSS3 Transitions Transforms

Addthis CSS3 Button

Quicktip Pressable CSS3 Social Button

CSS3 Animated Buttons

Multicolor and Size CSS3 Button

CSS3 Dark Button Navigation

CSS3 UI Button With Icons

CSS3 Gradient and Box Shadow

CSS3 Buttons

CSS3 Buttons 6 Colors 5 Sizes

CSS3 Buttons

CSS3 Toggle Button

Slick CSS3 Buttons

CSS3 Mac OS X Lion Buttons

CSS3 Buttons

Other Resources

- CSS Buttons: Tutorial and Examples on Webdesignerdepot

- CSS3 Buttons 10+ Awesome Ready-To-Use Solutions on Webresourcesdepot

- CSS and CSS3 buttons, 110 best sets on Webdesignshock

- 30 Excellent CSS3 Buttons Tutorials & Resources on Webdesignhabits

Create Google Plus Icon Using CSS

aditia rahman — Tue, 06 Dec 2011 10:14:43 +0000

Google are very well known with the colorful logo, reb, blue, green, and yellow, today post, let’s play some quick CSS code to create some google plus icons.

Let’s create with a div element with static size, this code below is the css code for the first icon, and for the background you can generate it from colorzilla gradient editor, (really great tool, saving much time) I didn’t show here cause I think to long for css gradient code.

.icon {
    width: 80px;
    float: left;
    margin-right: 30px;
    -moz-box-shadow: 1px 1px 2px #999;
    -webkit-box-shadow: 1px 1px 2px #999;
    box-shadow: 1px 1px 2px #999;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

.colorblock {
    width: 20px;
    height: 12px;
    float: left;
}

.r { /* red gradient */ }
.b { /* blue gradient */ }
.g { /* green gradient */ }
.y { /* yellow gradient */ }

.red {
    -webkit-border-radius: 7px 0 0 0;
    -moz-border-radius: 7px 0 0 0;
    border-radius: 7px 0 0 0;
}

.yellow {
    -webkit-border-radius: 0 7px 0 0;
    -moz-border-radius: 0 7px 0 0;
    border-radius: 0 7px 0 0;
}

.text {
    text-shadow: 1px 1px 1px #a3a3a3;
    clear: both;
    width: 80px;
    font-size: 48px;
    padding: 0 0 18px 0;
    color: #fff;
    text-align: center;
    -webkit-border-radius: 0 0 7px 7px;
    -moz-border-radius: 0 0 7px 7px;
    border-radius: 0 0 7px 7px;
    /* radial gradient background */
}

.littleplus {
    font-size: 28px;
    font-weight: bold;
    position: relative;
    top: -4px;
}

The first icon is the “g+” icon with the colorful div block on the top, that floating to left using css, for more variation from this icon I created the one with background, and the other two is with the big plus logo, in dark and light background.

g +

Now for the second icon style, is the icon with the colorful background color, with the big plus in center, this one with other three variation too, with the rounded corner that make the icons look like a circle, you can see all on the demo section.

For complete code you can see on the demo page and view the page source, I mix the html and the css code, so it can easier to read.

Demo

JQuery Plugin For Rotating Image

aditia rahman — Sun, 04 Dec 2011 06:50:12 +0000

Creating a jquery plugin is easier than it sound, first time I heard about creating 3rd party plugin sounds scary, maybe need more deeper understanding about the platform, but not in jquery. Well I just feel something missing if I have been using jquery for a while not to creating a plugin.

Few month ago I have created a simple tutorial to rotating image using jquery, now it would be nice if I can used as a plugin, and now it a chance to learning simple jquery plugin.

demo | download

Now just straight to the plugin code, this is the code I put on file jquery.rotate.js

(function( $ ) {
    $.fn.myrotate = function() {
        var img = this.find("img");
        var imgpos = img.position();
        var x0, y0;

        $(window).load(function() {
            img.removeAttr("width");
            img.removeAttr("height");

            x0 = imgpos.left + (img.width() / 2);
            y0 = imgpos.top + (img.height() / 2);
        });

        var x, y, x1, y1, drag = 0;

        img.css({
            "cursor": "pointer",
            "position": "relative"
        });

        img.mousemove(function(e) {
            x1 = e.pageX;
            y1 = e.pageY;
            x = x1 - x0;
            y = y1 - y0;

            r = 360 - ((180/Math.PI) * Math.atan2(y,x));

            if (drag == 1) {
                img.css("transform","rotate(-"+r+"deg)");
                img.css("-moz-transform","rotate(-"+r+"deg)");
                img.css("-webkit-transform","rotate(-"+r+"deg)");
                img.css("-o-transform","rotate(-"+r+"deg)");
            }
        });

        img.mousedown(function() {
            if (drag == 0) {
                drag = 1;
                img.css("-webkit-box-shadow", "0 0 5px #999");
                img.css("-moz-box-shadow", "0 0 5px #999");
                img.css("box-shadow", "0 0 5px #999");
            } else {
                drag = 0;
                img.css("-webkit-box-shadow", "0 0 2px #999");
                img.css("-moz-box-shadow", "0 0 2px #999");
                img.css("box-shadow", "0 0 2px #999");
            }
        });

        img.mouseleave(function() {
            drag = 0;
        });
    };
})( jQuery );

The idea is similar from before, to get the image center point and get the cursor coordinate using javascript Math we can find the radian, and rotate the image using CSS. Here are a sample usage

There are some problem when you are getting image width and height directly from html tag in webkit browser, even when we are using jquery, there are a thread from stackoverflow offer many solution for this.

Customizing TinyMCE CSS Skin

aditia rahman — Fri, 02 Dec 2011 01:08:48 +0000

Few days ago I’ve playing with TinyMCE, a popular javascript rich text editor, used by many companies and some popular CMS, like joomla and wordpress. Today I want to share a little of my experience exploring and customizing tinymce skins. In this example I’m not creating it from scratch, but modifying the existing o2k7 skin.

The core tinymce skin is on file ui.css, this file that will be modified, and this file is very well commented, it easy to guess the purpose of it style, and other files dialog.css and content.css I don’t need to make any changes.

Customizing Icons

TinyMCE using css sprite to styling each button, in the default skin you can found it on tiny_mce\themes\advanced\img\icons.gif, here I create my own icon list, the icons order is follows the default icons, and I’m using famfamfam silk icons. You can see on the image below, I opne this on gimp with grip enabled, the top is default and the bottom is my customize icons.

I following the default order to make easier placing each icons, because if you have a different icon order you have to change it by yourself in the css style, see the image below where in the css file that have to be modifed if you use your own custom icons order.

Customizing Layout

Layout is where the main content lies, this section include toolbar and statusbar style, and this is a port of the style that I have modified.

.mycustomSkin table.mceLayout {
    border:0; border-left:1px solid #ABC6DD;
    border:1px solid #ABC6DD;
    -webkit-border-radius: .4em;
    -moz-border-radius: .4em;
    border-radius: .4em;
}
.mycustomSkin table.mceLayout tr.mceFirst td {
    padding: 3px 2px;
}
.mycustomSkin table.mceLayout tr.mceLast td {}
.mycustomSkin td.mceToolbar{
    background:#b2e1ff;
    -webkit-border-radius: .4em .4em 0 0;
    -moz-border-radius: .4em .4em 0 0;
    border-radius: .4em .4em 0 0;
}
.mycustomSkin .mceStatusbar {
    background:#b2e1ff; display:block;
    font-family:'MS Sans Serif',sans-serif,Verdana,Arial;
    font-size:9pt; line-height:16px;
    overflow:visible;
    color:#000;
    height:20px;
    -webkit-border-radius: 0 0 .4em .4em;
    -moz-border-radius: 0 0 .4em .4em;
    border-radius: 0 0 .4em .4em;
    padding-left: 5px;
}
.mycustomSkin .mceIcon {background:url(img/test.gif) no-repeat 20px 20px}

Customizing Button and Separator

Here are the button and separator style, I try to make it css only without using images, and all the color are generated from colorzilla.

/* Button */
.mycustomSkin .mceButton {display:block; width:22px; height:22px; margin: 0 1px;
    border: 1px solid #0099cc;
    border-bottom-width: 2px;
    position: relative;
    background: #b2e1ff; /* Old browsers */
    background: -moz-linear-gradient(top, #b2e1ff 0%, #66b6fc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2e1ff), color-stop(100%,#66b6fc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b2e1ff 0%,#66b6fc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b2e1ff 0%,#66b6fc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #b2e1ff 0%,#66b6fc 100%); /* IE10+ */
    background: linear-gradient(top, #b2e1ff 0%,#66b6fc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=0 ); /* IE6-9 */
    -webkit-border-radius: .1em;
    -moz-border-radius: .1em;
    border-radius: .1em;
}
.mycustomSkin a.mceButton span, .mycustomSkin a.mceButton img {margin-left:1px}
.mycustomSkin .mceOldBoxModel a.mceButton span, .mycustomSkin .mceOldBoxModel a.mceButton img {margin:0 0 0 1px}
.mycustomSkin a.mceButtonEnabled:hover {background-color:#B2BBD0;
    background: #deefff; /* Old browsers */
    background: -moz-linear-gradient(top, #deefff 0%, #98bede 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deefff), color-stop(100%,#98bede)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #deefff 0%,#98bede 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #deefff 0%,#98bede 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #deefff 0%,#98bede 100%); /* IE10+ */
    background: linear-gradient(top, #deefff 0%,#98bede 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff', endColorstr='#98bede',GradientType=0 ); /* IE6-9 */
}
.mycustomSkin a.mceButtonActive, .mycustomSkin a.mceButtonSelected {
    border-bottom-width: 1px;
    top: 1px;
    background: #ffd65e; /* Old browsers */
    background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* IE10+ */
    background: linear-gradient(top, #ffd65e 0%,#febf04 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
}
.mycustomSkin .mceButtonDisabled .mceIcon {opacity:0.3; -ms-filter:'alpha(opacity=30)'; filter:alpha(opacity=30)}
.mycustomSkin .mceButtonLabeled {width:auto}
.mycustomSkin .mceButtonLabeled span.mceIcon {float:left}
.mycustomSkin span.mceButtonLabel {display:block; font-size:10px; padding:4px 6px 0 22px; font-family:Tahoma,Verdana,Arial,Helvetica}
.mycustomSkin .mceButtonDisabled .mceButtonLabel {color:#888}

/* Separator */
.mycustomSkin .mceSeparator {display:block; width:5px; height:22px}

Well that’s all in this post I just try to explore and customizing a little bit of tinymce css skin, and this only a little part of the skin, some other skin haven’t been explored yet, like list, menu, dialog, etc, but you can download this example css skin, and try it on your host, the sample screenshot like the image on the top post, I called mycustom skin.

Download

35 Dry Ground Cracks Textures

aditia rahman — Mon, 28 Nov 2011 04:45:10 +0000

Today I have found some of great dry ground crack texture, maybe can be used for your next design project, as long some of these stock have creative common attribution 2.0 generic license, which mean you can use it for any commercial project, but be sure to check the license again, enjoy.

visit source

Superdit.com » aditia rahman

20 JQuery Table Datagrid Plugins

JQuery Accesible RIA Table

Flexigrid

jqGrid

inGrid

tGrid

Datatables

jTPS

jQuery Gridy

GridNic

Kendo UI Grid

jqxGrid

Pines Grid

JQuery Magic Grid

Editable Grid

Sigma Grid

Tablesorter

Zentable

jqGridView

OpenJS Grid

Compass Datagrid

15 Icon Web Site And Search Engine

1. Icongal

2. Icon Finder

3. Mr. Icons

4. Iconizer

5. Icon WebToolHub

6. Iconlet

7. Icon Seeker

8. Icon Archive

9. Iconspedia

10. Very Icons

11. Iconbug

12. Icones.pro

14. Icon Search

14. Find Icons

15. FreeIconWeb

More Resources

60 Freebies PSD Login Screen For Inspiration

20 WordPress Gallery Themes

Photo Madness

CSS Gallery Theme 2.0

Journal Crunch

Portofolium

Autofocus Lite

Gallery Theme

Garden Theme

Shaken Grid Lite

Simple Gallery

Dione

Tower

Photoria

Showcaser

Feature

XUXA

MyCorp

Mixfolio

Fullscreen

Foliogrid

Mansion

Imbalance

JQuery CSS Animation and Rotate

Demo

20 CSS Button Examples and Tutorials Resource

Awesome CSS3 Button

Cross Browser CSS Gradient Button

BonBon CSS3 Button

Animated Button With CSS3

CSS3 Github Button

CSS3 Exp Button

Zardi

Animated Buttons CSS3 Transitions Transforms

Addthis CSS3 Button

Quicktip Pressable CSS3 Social Button

CSS3 Animated Buttons

Multicolor and Size CSS3 Button

CSS3 Dark Button Navigation

CSS3 UI Button With Icons

CSS3 Gradient and Box Shadow