Can I use html5, CSS, JS use something frontend coding?



You want to know if it works before you try, this is happening everyday during you working time. I know I know, and Alexis Deveria knows as well, oops.

Alexis Deveria has build this site for every frontend workers, to list you all the result that how major explorers are support to _____ !, just type codes that you are looking for and get results before you get into trouble all day long.

Site:Can I use...

RGB to, does any color source transfer for you!


You have learned visual identity system, and you care about the color code usage in any of your client's project. You got trouble with the Pantone color source for web site designing, web color source for paintings, the monitor troubles, you image that if someone made a color database for all the color source transfer.

RGB.to just does this job, transferring any of color source to another color source, it just amazing!!

Link:RGB.to



Fake image please, "Call" a fake image immediately!


But it's just a real image.

Sometimes we will need an image just for preview, but usually we will need to open photoshop for a right resolution. If you are someone like I said, the Fake image please brings you a new solution for it.

This guy is talent, the Fake image please is an online tool, what you will need to do is just "call" an address for the image, bg colour, text colour, text content...just like this official sample codes:

img src="http://fakeimg.pl/300/"
img src="http://fakeimg.pl/250x100/"
img src="http://fakeimg.pl/250x100/ff0000/"
img src="http://fakeimg.pl/350x200/ff0000/000"
img src="http://fakeimg.pl/350x200/?text=Hello"
img src="http://fakeimg.pl/350x200/?text=World&font=lobster"

Easy, isn't it?



UI Cloud, this is how an engineer solos


Designers offer designs and engineers code to build a project, this is what I believe how it works.  But if once we get complete design for free, can a designer code like an engineer? a question ugh?

Site: UI-cloud.com

Someone has founded UI-cloud.com that links the free UIS by the world designers, anyway this is just intemperate, isn't it?

Designing is not piecing up the cake, it's an organic organization.
-Said my friend chitsung.lin
(fortunately he is a top engineer)

CSS Arrow Please, the CSS box with a pointer builder


So, I was usually struggling with building a css box that with a pointer, but I found CSS Arrow Please now.

Site: CSS Arrow Please

The CSS Arrow Please only focus on css box that with a pointer(arrow?) it work with a friendly panel and everything looks simple to you. The default box is with a border which connect seamlessly with the pointer, it's cool hum?

BuiltWith.com, find out more technologies behind the site


BuiltWith.com answers the site techniques

Sometimes you just get no idea what technologies behind a site, BuiltWith is doing this for you. Just enter a site address, and it lists all the known technologies for you, example here for designerapps.blogspot.com.

Site: BuiltWith.com

And more, you may like to know more about each of the tech thing, click on the name, the BuilrWith has an analysis about how popular the tech is using in the world sites. Something may not that accurate however it counts.


Subtlepatterns, The world's best Free background image source


Stop using ugly bg images

You don't need to build perfect one for your works now. The Subtlepatterns.com is offering tons of free and high quality background images, and all the images are under CC3.0 license.

Site: Subtlepatterns.com

And Photoshop plugin edition

Subtlepatterns.com also offers a Photoshop plugin which connect to the cloud library for you, it costs $11.99.

The images from Subtlepatterns.com are the best, most of designers from Themeforest get high sales by using it.

Screenqueri.es the best responsive design online preview tool, EVER!



The must use service for responsive design

We did present the RWD bookmarklet the must have tool for responsive design. And I like to present Screenqueri.es as the best preview site I have ever used.

Over 60+ devices resolutions are ready for your test by simply select from the drop list, and of course you can rescale canvas for your own specifically needs. You will need to sign in for the try, and enter http url or even a localhost path, can you imagine it?

Site: Screenqueri.es

Not only iPhone, iPad, most of the major android devices are available now or even Kindle, tablet pcs. The Screenqueri.es is the must use free service for the responsive site design.

X-icon Editor, the online site icon create tool


In the early Windows Vista age, I used to draw my icon work by using IconWorkShop(by Axialis). It's a perfect icon solution if you need to build a windows7, OS X or mobile device icons which includes different resolution sizes in an .ico file. The internet grows up quickly, a simple personal site is not enough, you will need many different visual identity elements for your personal branding, and a personal icon is a must, isn't it?

The X-icon Editor does the site favor icon well, you can build it with tons of drawing tools or even upload an image for your drawing base.

Site: X-icon Editor

You will get a favicon.ico file from X-icon Editor which for your site icon like ours blog.

The icon preview

Patternify, the best pattern generator


Whatever a photoshop pattern, or pattern background for web site, the Patternify does the best job for you. It generates you both png and Base64 code, and it's free!

Csswarp, the font wrap helper


Csswarp helps you to form your fonts that fit with curve line or a circle. It works just like Adobe illustrator, and you get html+css in sult.

WhatFont, what the font is being used?


Do you usually check what the font is used in an awesome web design? If so, WhatFont is your best tool. Simply click it and move your cursor onto the font, and it appears!

CSS3 Generator


CSS3 Generator focus on the container generating, it helps you to create a pure css contianer whatever the dimention, colors, shadows.

Site: CSS3 Generator

Demo:



The Responsinator, responsive site design previewer

So you have designed a responsive site, and you test it by using iPhone, iPad, android devices..etc. It's just a nightmare that you keeps working like that in every small editing. The Responsinator makes it easier, just paste site address and click OK, you will see it how it is displayed in most of major mobile devices.(iPhone3, 4, 5, iPad, android, kindle in both horizontal and vertical portrait)

Site: The Responsinator




Gridpak, responsive site grid system tool


I used to count the width by using calculator all the time when starting a responsive web design. Now the Gridpak bring me a new startup. It does an awesome grid system for your site structure in a minutes, and you get png, html, css, js, scss, less files. It's a free profession service!

Site: Gridpak

Gradient Generator

Gradient Generator

Gradient Generator do service as it's name and is the best css gradient generator.

Site: Gradient Generator

Special feature: Gradient Generator supports capture colors from an image, simply upload an image you want to get color from, and it analyses colors as your default color base.

Demo:

Easing functions


So are you a frontend designer? admit it you should completely face the codes.

A Russian talent guy build a Easing open source project on Github, provides js, css, scss editions for you. Now you can preview all of it and get it immediately.

Site: http://easings.net/
Author: https://github.com/ai

ajaxload gif


The ajax loading gifs are something an open source(ouch!), people do use it like never thought about change it for the site ui. This site offers a tool for you to have an ajax gif that matchs your site color. There are many base gif animations, unfortunately you can't custom a new gif there this time.

Demo:

Site: http://ajaxload.info/

Cubic-bezier, the CSS motion curve editor


Do you usually code CSS? If so the Cubic-bezier will be one of your best firend.
Cubic-bezier helps you preview the CSS motion curves, and export directly in css language for you.

Online gif animation builder


The gif animation is something losing in the world, Facebook even hate it(in my opinion). We can still see creative gif sometimes. Like to build one yourself? if you are not familiar with photoshop, the mothereffinganimatedgif.com is for you.

First, see this creative illustrator's work:





Now you can do this by using mothereffinganimatedgif.com without pain!