Friday, January 31, 2014

Mobile menu jquery plugins


Creating menus for mobile users gives webdesigners a unique challenge, which can be dealt with in very different ways. One of the quickest ways is to use a jquery plugin, now if you are not loading jquery as part of your site already this might be overkill just to use it for a menu. But a lot of us use JQuery so this can be a good solution.

TinyNav.js

Easy to install, simple to use. It makes a select when the browser size i small and it does exactly what it says on the tin. No more and no less.
Find it here: http://tinynav.viljamis.com

Mobile Menu

This plugin creates a drawer-style navigation on your mobile site, such as the ones you see on iOS. Has a couple of different settings you can customize.
Find it here: https://github.com/brewern/mobile-menu

Responsive-Menu

Another easy to implement solution that gives you a select option on smaller screens. This one has some different options. Stuff like what the first option should be named and at what width the menu should change.
Find it here: https://github.com/mattkersley/Responsive-Menu

jPanelMenu

jPanelMenu creates a panel menu that pops out when you hit the menu button, similar to facebook and others. This is another great solution with lots of great features.
Find it here: http://jpanelmenu.com

JQuery-Mobile-Slide-Menu

A mobile slide menu, has a very smooth sliding effect. Note that this menu uses jquery mobile, which might be a bit too heavy if you are online using it for the menu.
Find it here: https://github.com/tegansnyder/JQuery-Mobile-Slide-Menu

Is JQuery the only solution?

NO! In some cases it’s not even a good solution. There are around 243 ways to create a mobile menu. You could be using something like bootstrap or another framework which gives you options, or make your own to fit your needs.


reference: spiced2

Wednesday, January 29, 2014

Most Useful @Font-Face Generators for Converting Fonts to Web Safe Fonts

How to make web safe fonts?

Getting each and every font in all web safe fonts format is almost impossible, as a font generally comes in only one format. And to counter that problem, we use the CSS3 @font-face rule. Before this rule came into effect, the web developers had to use the common fonts that generally come pre-installed in a user’s computer, so that he can easily read the text available on a website. But now the game is wide open, as any font can be used on a website by writing its @font-face rule in the CSS.
In addition to this, you also need to have the font (you want to use) in Web Safe Fonts format with you to write the @font-face rule in your CSS file. But if you don’t have your fonts in Web Safe Fonts format, then you can use any of the 19 most useful @font-face generators listed below.

Font Squirrel


Font Squirrel is one of the most famous website to find modern day fonts that are available for free to use in commercial projects. Here, you can get hundreds of fonts for use in Applications, Ebooks and PDFs, and Commercial Desktop Use, which means you can use those fonts in making commercial documents and graphics. In addition to this, it also offers a great tool that can turn any of your fonts into web safe fonts, which you can use on your website. Not only it converts a font into multiple web safe fonts, but it also generates the @font-face rule for the selected fonts for you for free.

Convert Fonts



Convert Fonts is one of those tools which works within a blinks of an eye. No matter if your desirable font is in TTF, OTF or Postscript format, this awesome tool will convert that into TTF, EOT, SVG, WOFF formats and will also produce a CSS file comprising of @font-face rule. What you all need to do is to upload your desirable font, and click the ‘get @font-face’ button. Within seconds it will convert your font, and provide you with its CSS file.

Code and More


Code and More is one of the most used font conversion tool. That’s because it is easy to use, and takes only a few seconds to convert fonts into web safe fonts. However, to use this tool, you need to subscriber or register yourself by accepting to pay either monthly or annually. For the Code and More subscription, you only need to spend $3 for monthly subscription, and $20 for annual subscription. Thinking why you should pay when you can get your fonts converted for free? Generally the free tools only convert the popular font formats, but this tool can convert and generate @font-face kit for plenty of font formats.

Font2Web


Font2Web is one of the most promising @font-face generator of today’s time. It is still in beta mode, but it has managed to make its own name in a short span of time. However, as it is in beta mode, it can only convert TTF and OTF fonts into web safe fonts or you can say in EOT, WOFF, TTF, OTF, and SVG formats. Apart from this, it also creates the @font-face for all your converted fonts, and also provide you with a demo HTML page demonstrating you the way to use web safe fonts on a website.

Everything Fonts


Did you ever use ConvertFonts.com to convert your fonts into web safe fonts? If yes, then you’ll definitely love this perfect @font-face generator. Yes, Everything Fonts is a @font-face generator, which is being used by thousands of people on a daily basis. With Everything Fonts, you not only get a font conversion tool, but you also get Font market place, an online font manager tool, and an expanded toolset.

Fontprep


Online tools are pretty much effective in daily use. However, every product has its own pros and cons. Similarly, online tools have also some cons related to them, and one of them is what if your internet stops working at a time when you are working on a client’s project? This applies to online @font-face conversion tools too. But don’t worry, as Fontprep is here to your rescue. It’s a powerful font conversion and @font-face kit generation tool made specifically for use on Mac OSX. The best part about this tool is that once you have imported any of your desired fonts in it for its conversion into web safe fonts, Fontprep will keep it safe forever. It also provides you with certain features that are very unlikely to get in any other tool, such as Font Preview and Manipulation, AutoHint, and Fontprep Subsetter. It’s a perfect and simple to use drag and drop font conversion tool.

Sfnt2Woff


Sfnt2Woff is a simple yet very much effective font conversion tool that comes straight from the house of Mozilla. It’s not an online tool but in fact, an offline tool that you have to download to use it. Basically, it’s a command line tool, which can convert any True Type and Open Type Font into a Web Open Font Format. There are two separate versions available for each Windows and Macintosh. To convert your TTF or OTF fonts into WOFF format with this tool, you just need to run Sfnt2Woff on a command prompt.

Web Embedding Fonts Tool


Web Embedding Fonts Tool is a creation of Microsoft that lets the web developers to convert their existing fonts into browser compatible fonts, which can be rendered by all leading web browsers. Though this tool has been developed by Microsoft to work on especially Windows, but according to many of its users, they have been able to make it work on Macintosh as well. In order to ensure that its users are well aware of how to work with it, it also has a tutorial guide which you can go through before starting the @font-face kit generation task with Web Embedding Fonts Tool. This @font-face generator can be downloaded for free.

Eotfast


To convert an TTF format font into EOT, you are very unlikely to get a better tool than EotFast. It can not only convert your TTF fonts into EOT, but can also generate the @font-face kit for converted fonts in seconds. There are plenty of features associated with this awesome tool. It compresses the EOT font files in a lossless compression up to 70% smaller than TTF ones. Moreover, it can also run on Windows and Macintosh via Virtual Machine software.

TTF to EOT Font Converter


Want to convert your True Type fonts into Embedded Open Type fonts? If yes, then you should really use TTF to EOT Font Converter, an online font conversion tool. However, the only drawback about this tool is that it can take only up to 2 MB TTF font file to convert it into EOT format. In addition to the font conversion, it also generates the @font-face for your converted font, which you can implement in your existing CSS file or link the CSS file it provides you with your HTML document to make the font work in supporting web browsers.

Online Font Converter


Online Font Converter is a great tool to convert a large no. of font formats into many other formats. For example, you can easily convert a True Type font into font formats such as .pdf .dfont .eot .otf .pfb .tfm .pfm .suit .svg .pfa .bin .pt3 .ps .t42 .cff .afm .ttc & .woff. The most fascinating aspect of this online font conversion tool is that with it you can also extract the font from a pdf file and convert them into any font format and generate its @font-face kit. In addition to this, its API is also available at mashape, which you can also use. All this can be done for free, and that makes it a brilliant tool to use.

Free Font Converter


It’s been a long time since Free Font Converter is available in the market. The majority of its users are web developers, who regularly work on client’s projects. It allows its users to convert a large variety of font formats and generate @font-face kit for the converted fonts. With this online font conversion tool, you can convert the following font formats; pfa, pfb, pt3, sfd, ttf, otf, otb, t42, cef, cff, gsf, ttc, svg, ik, mf, dfont, bin, suit and bdf.

Fonts2u


Fonts2u is again a famous font conversion tool, which is liked by more than 46,000 people on Facebook. These stats are enough to tell you about its popularity among masses. However, it doesn’t work like Online Font Converter or Free Font Converter that we stated above, as it supports the font conversion for leading or most used fonts such as True Type Fonts (.TTF), and PostScript Type 1 (.pfb). Once the fonts are converted, it will provide you with @font-face kit for the converted font.

Font Converter by Files Conversion


Files Conversion is a leading website service that provides its users with a variety of tools to convert documents, images, spreadsheets, presentations in a large no. of file formats. Similarly, it also provide a great tool named as Font Converter with which you can convert a font into 7 different font formats, which includes; OTF, TTF, BIN, PFB, SVG, DFONT, and AFM. So no matter, what format your font is in, you can get it convert that into any of the above mentioned 7 formats within no time to generate @font-face kit for the same.

Font Converter


Having problems handling any of your fonts? Or do you want to produce web safe fonts for a client project? No matter what’s your reason is, with the help of Font Converter, a leading font conversion tool, you can convert a majority of font formats including, but not limited to, TTF, OTB, BDF, FON, FNT, OTF, SVG, AFM, and DFONT into TTF, FON Generic Font, PFB, DFONT, and OTF. You can use this tool for free. However, if you feel impressed with the tool, you can also donate a little amount to the maker of this tool.

Font Face Generator


@Font-Face Generator is relatively a new font conversion and @font-face kit generation tool. However, within a short span, it has been able to make its own mark amongst web developers, who are always in need of font conversion tool. With this tool, you can get a TTF font file format converted into web safe fonts, which includes the evergreen, .eot, .svg, and .woff font file formats. It can handle a TFF font file of up to 10 MB in one go, which makes it a powerful tool to use. In addition to this, it will also provide you with @font-face kit for your converted fonts along with a sample html file demonstrating how the converted fonts will look in web browsers.

Web Font Generator


Just like the @Font-Face-Generator tool, Web Font Generator is also a new tool on the horizon. It has been designed and developed by AbstractFonts.com, a leading online free Fonts Store. As the name itself suggest, this tool helps its users to convert their True Type Fonts and Open Type Fonts into web safe fonts with ease. Along with that it also generates the @font-face kit, which is embedded in a CSS file to ensure the font used on a website works smoothly on all leading web browsers.

FontXchange by Fontgear



FontXchange is a paid Font Conversion tool that comes from the house of Fontgear, a well-known software development company. FontXchange come is two variants, one for Windows and the other for Macintosh. However, to test it before buying it, you can download its demo version. With FontXchange, you can convert a large no. of font file formats into the ones that are either common or considered as web safe fonts. For example; you can convert a PostScript font into .eot, .svg, and .woff.

Grunt-Webfont


The Grunt Webfont tool is something different from all we have listed above. You can even call it an extraordinary font file conversion tool. That’s because it converts the SVG/EPS files into icon webfonts. The generated fonts are browser compatible and also work on Internet Explorer version 8.0+. It also provides with an HTML preview to check if the fonts have been converted correctly or not. To make this tool work on your computer you need to install version 0.4 or higher. With this tool, you can also create your own vectors, gylphicons.
If you like this unique list of @font-face generators don’t forget to link it on your blog, website. Additionally, you can also share your feedback with us in the comment section provided below.

referance : queness

Responsive Web Design Tools to Test Your Website

1. Mobitest

Test your responsive web design 2 Top 10 Responsive Web Design Tools to Test Your Website
Image source
It’s crucial for your responsive website to run smoothly on all the mobile devices. Mobitest is an excellent tool that’s specially designed for helping you test the mobile performance of your responsive website. To use Mobitest, all you need to do is simply enter your website’s URL/web address and click on the “Run Performance Test” button. This tool will then fire up the website on a real mobile device and offer you a host of mobile performance statistics. This stats report will provide you a quick overview of how well your website performs on the mobile devices. The results will be displayed as per the following parameters:
  • The site’s average load time
  • The average web page size
  • Waterfall chart.

2. Adobe Edge Inspect

Test your responsive web design 3 Top 10 Responsive Web Design Tools to Test Your Website
Image source
Nowadays, testing a website on real devices has become quite essential. With Adobe’s Edge Inspect tool, you can easily auto-refresh all the connected devices to check the website’s overall performance. In addition to this, you can even choose to inspect your responsive website remotely on a remote device.

3. Respondr  

Test your responsive web design 4 Top 10 Responsive Web Design Tools to Test Your Website
Image source
This is a simple yet extremely helpful responsive web design testing tool. To use Respondr, all you need to do is simply enter the URL of the website/web page that you want to test and select the device for which you want to test the site/page. You may choose from iPhone4/5, iPad and Mac. Once you’re done with making the selections, click the “Go” button to receive an in-depth report on the site’s/pages’s performance on the chosen device. You can easily preview the page at the appropriate width.

4. jResize plugin

Test your responsive web design 5 Top 10 Responsive Web Design Tools to Test Your Website
Image source
jResize is an amazing responsive web development tool that assists the workflow of developers working on responsive website development projects. This responsive web design tool is especially designed for one-window responsive development. All you need to do is simply click through different screens to view whether they adjust accordingly or not. Hence, testing your responsive web design becomes easy while you work on the project.

5. Viewport Resizer

Test your responsive web design 6 Top 10 Responsive Web Design Tools to Test Your Website
Image source
Viewport Resizer is a responsive web design testing tool that works as a bookmarklet. As a browser-based tool, Viewport Resizer allows you to test a responsive site/page within 2 seconds. All you need to do is click on “Click or Bookmark” button, choose from a set of preferences and enter the URL of the site/page you want to test. You may choose from a set of screen sizes including two smartphones, regular tablet, a small-screen tablet, a widescreen tablet and HDTV.

6 .Screenqueri.es

Test your responsive web design 7 Top 10 Responsive Web Design Tools to Test Your Website
Image source
Screenqueri.es allows you to test your site/page across 60+ Device Viewports. All you need to do is simply enter the URL of the site/page you want to test, insert a few preferences and you’re ready to test your site/page for responsive nature. You may choose from a range of preset testing options that includes 14 popular smartphones and 12 popular tablets.

7. Screenfly

Test your responsive web design 8 Top 10 Responsive Web Design Tools to Test Your Website
Image source
Screenfly allows you to test your responsive site/page by simply entering the URL/web address of the respective page/site. You may choose from a range of devices including phones, tablets, desktop or TV. You may even enter a custom screen size, generate a URL to share the design with others and rotate the screen for testing in a better fashion.

8. resizeMyBrowser

Test your responsive web design 9 Top 10 Responsive Web Design Tools to Test Your Website
Image source
resizeMyBrowser allows you to test your site/page by choosing the dimension of your testing browser. You may select from over 15 preset browser dimensions or enter your own custom browser screen size.

9. Responsive Design Bookmarklet

Test your responsive web design 10 Top 10 Responsive Web Design Tools to Test Your Website
Image source
Responsive Design Bookmarklet is yet another handy responsive design testing tool. All you need to do is just drag the bookmarklet above your bookmarks bar and the same will be applied in your web browser. You may then choose to preview the current page for changes to be made to screen widths so as to fit the tablets and smartphones perfectly.

10. The Responsive Calculator

Test your responsive web design 11 Top 10 Responsive Web Design Tools to Test Your Website
Image source
The Responsive Calculator aids the web designers to convert PSD pixel to percent during the start of your responsive website. All you need to do is simply insert a few specifications and you’re done with turning your web page pixels into percentages.
Do you have any free responsive web design testing tool in mind, that hasn’t been covered above? If yes, do feel free to share it in the comments section below.


referance: pixel77

Tuesday, January 28, 2014

Font-Face Chrome Rendering: Fixed

font-face

@font-face is a CSS rule which allows you to download a particular font from your server to render on a webpage if the user hasn’t got that specific font installed. This means that web designers no longer have to adhere to a particular set of ‘web safe’ fonts that the user has pre-installed on their computer, or rely on users having JavaScript enabled. This works by turning the font file into a @font-face kit using an online generator like Font Squirrel.

The fix!

After experimenting myself, I stumbled across what appears to be a decent, very easy fix for this issue. It appears that Chrome utilities the .svg file in the @font-face kit, and doesn’t like being called last. Below is the standard call for @font-face using CSS:

@font-face{
    font-family: 'raleway';
    src: url('fonts/raleway-medium-webfont.eot');
    src: url('fonts/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-medium-webfont.woff') format('woff'),
         url('fonts/raleway-medium-webfont.ttf') format('truetype'),
         url('fonts/raleway-medium-webfont.svg#webfont') format('svg');
}


As can be seen in the example, the .svg file comes last in the list of called URLs. If we amend the code to target webkit browsers, then tell them to solely utilize the .SVG file.



@font-face{
    font-family: 'raleway';
    src: url('fonts/raleway-medium-webfont.eot');
    src: url('fonts/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-medium-webfont.woff') format('woff'),
         url('fonts/raleway-medium-webfont.ttf') format('truetype'),
         url('fonts/raleway-medium-webfont.svg#webfont') format('svg');
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
    font-family: 'raleway';
    src: url('fonts/raleway-medium-webfont.svg') format('svg');
   
    }
}

How To Properly Smooth Font Using CSS3

I've came across some people usually wondering how some websites have such crisp and clear font. There are two reasons for this:

1. They are most likely using the -webkit-font-smoothing hack. This type of hack is mostly used for mobile browsers, as well as the Apple Safari and Google Chrome Browsers.

2. To really smooth the font and not have anything too blurry websites usually use the text-shadow effect. This is also used so the font will look smooth on all browsers (Opera, Firefox, Safari, Chrome and others alike) except internet explorer.

When you apply the font smoothing hack to your stylesheet and you want it applied to your whole site, make sure we write the following code.

Lets start off by adding the font smoothing hack to your stylesheet:

html, html a {
    -webkit-font-smoothing: antialiased !important;
}


Here is the definition of anti-aliased: http://en.wikipedia.org/wiki/Spatial_anti-aliasing

Now for the text shadow effect to really smooth out the font:

html, html a {
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}


Here is the code all put together:

html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}


source: icondeposit


Friday, January 17, 2014

21 Ridiculously Impressive HTML5 Canvas Experiments

HTML5 is the thing to talk about these day. Today, we have a collection of some ridiculously impressive HTML5 canvas-based experiments that will make you say, “Wow!” Let’s take a peek at some of the latest, cutting edge examples out there.


1. 8 Bit Color Cycle


2. Particle Letter Animation


3. Cloth Experiment

This is one of the best canvas-based experiments.

4. Particle System

This is one of my favorites — absolutely amazing!

5. Strange Attractors

This example generates beautiful fractals, like the ones generated by Apophysis. Be sure to tick the composite :) .

6. Canvas Nebula


7. Bomomo


8. Liquid Particles


9. Sinous

This is a really fun game; is it not as easy as it looks!

10. Water in HTML5


11. Blob


12. Magnetic System


13. Trail


14. Particles


15. Shattering Box Physics Simulation

This incredible example depicts real world physics in action.

16. Flower Power

Try to guess the word. :P

17. 9Elements Particle Play

This is a beautiful example which demonstrates audio and canvas in action.

18. Beauty of Maths


19. Tree


20. Cloth Simulation


21. Arcade Fire