{Carrer web log}

Wireframing Icons

Wednesday, February 22, 2012 { 1 Comments }

For the past few mounts I was working on my new Icon Set of Vector Pictograms. It is a set of 180 + Vector Icons. The icons are mainly design to go with some wireframing program like my Photoshop Wireframing Kit but can be used for any purpose.


The Icons are designed in Photoshop and exported in almost all vector programs used for Wireframing. The icons can be resized in any size and colored with any color.

The Icons Formats:

• Transparent .PNG (16px, 32px, 64px, 128px, 256px, 512px)
• Photoshop Layers (Vector .PSD)
• Illustrator Layers ( Vector .Ai and .ESP)
• Illustrator Symbols (Vector .Ai)
• Fireworks Layers (Vector .PNG)
• PowerPoint 2003, 2007, 2010 (Vector Shapes)
• Keynote (Vector Shapes)
• Omnigraffle (Vector Shapes)
• Stencil for Omnigraffle (Vector Shapes)
• Balsamiq (Raster 32px x 32px transparent .png)

All the Icons can be find here …

CSS3 Fancy Box

Monday, February 13, 2012 { 7 Comments }

About two years ago I made CSS3 Action Framework and next step was to make the replica of the Fancy Box with pure CSS3, I haven't had the time to finish the project until one week ago when was "or now or never" for the project.

So what is the purpose of this project?

Modular CSS3 Fancy Box similar to original Fancy Box. By simply adding new classes to the class we should be able to control the appearance of the CSS3 Fancy Box. We should be able to control the transparency of the border, animation entry, rounded corners etc.

Example: If we have class="show fancybox rounded transparent-border" we will have rounded corner box with transparent border.

The event is triggered by :target selector showing the previously hidden HTML element (display:none) when we click the close button we put the box to its previous hidden state.

The best part is it is only 1,5Kb of CSS3. No images (even the close button is made with CSS3). Also there is no single line of javaScript.

The original Fancy Box weights about 100 kb + JQuery V.S 1.5 Kb of CSS3.
My aim wasn't to compete with the Original Fancy Box but to show what can be done with little CSS3.

It works in all modern browsers. It doesn't work in IE 9.

Demo1

Demo2

Download this project on GitHub

Naturally this method comes with lot of limits like doesn't support Ajax calls or can't dynamically determine position of the new Box. But can be use like a simple solution in some cases. Try to understand how the CSS code works, don't be afraid to play with CSS source code and personalize the CSS code for your needs.

Hand Drawn UI Kit

Wednesday, February 01, 2012 { 4 Comments }

I'm fan of Matt Gentile work with various UI Photoshop Kit specially I liked the Modern UI Kit and with Matt permission I decided to Rebound on Dribbble. I took all the elements from the Modern UI Kit and I made Hand Drawn UI Kit for Photoshop. Every element is hand drawn raster layer in Photoshop. I used Bamboo wacom tablets for designing the elements.

Here is the Kit:



You can download Hand Drawn UI Kit .PSD file here ..

I hope you will find this Kit useful.