はてなブックマーク

HTML5 Image uploader with Jcrop We have received several inquiries for the last time from our readers with a question – how to upload photos to website. I think that this is an interesting question, and, I decided to lift the veil of this question. But, I think that the basic file upload is a bit boring thing, so, I decided to add an important feature – Cropping. It should be more attractive. More

HTML5 Color Picker (canvas) In our new tutorial we are going to create an easy, but effective color picker using HTML5. I think that you have already seen different jQuery versions of colorpicker, our today’s goal – to create something similar, and even better. In order to make it more unique, there are 5 different colorwheels which you can use. If you are ready – let’s start. It is the very time

Last.fm javascript API practice Today I would like to give you something new, we have already talked about different social networks like facebook, google or twitter, but we haven’t tried other services, as example – musical services. I’ve prepared for you an example of work with Last.fm. As we know, this is huge musical website with rich api. In our tutorial we are going to create a script with n

3D Unique Website Designs Our website periodically produces interesting web roundups (of tutorials or designs or something else). Today I prepared new design collection of 3D look websites. If you would like to start something new or you think about something completely new, this is the best place to start. You will be able to find here excellent examples of 3D websites. 1. Cube 2. Pneuservis Prah

12 Unique Navigation Menu Designs For Your Inspiration During creating new website – one of the main things that you have to create – is the CSS menu (navigation). In order to have own unique menu, there’s a necessity for some developing. However this can be difficult and take much time to start from zero and to address this, you can use some ready ideas of navigation menus created by professional

10 fresh jQuery plugins (december 2011) Before coming New Years holidays – I have decided to prepare last one collection of interesting jQuery plugins released over the last month. Here are different plugins for sharing content, scrollers / sliders, webcam plugin, time grid etc. 1. MASHA (Mark & Share) MASHA (short for Mark & Share) is a JavaScript utility allowing you to mark interesting parts of

CSS3 Animated Photo Slider Today I have prepared new great CSS3 demonstration. This is 3D slideshow where I have used WebKit CSS 3D transforms. On the demo you will see a free-floating 3D object with photos. Hint – you have to use Chrome or Safari browser to see all these delights. Live Demo download result Ok, download the example files and lets start coding ! Step 1. HTML First, lets create the

Crop Please make selection for cropping and click 'Crop' button.

HTML5 image crop tool I have prepared new great HTML5 tool for you (with tutorial). I have made ‘Crop tool’ in html5 (canvas). Now we can crop images at client side too. Now we don`t need to send data (with crop coordinates) back to server as we did in our previous article: ‘Image Crop Plugin – using Jcrop’. Here are our demo and downloadable package: Live Demo [sociallocker] download in package [

10 interesting jQuery plugins (November 2011) Today I have collected with own hands new most interesting jQuery plugins that have released over the last month. Here are different plugins like face detector, sliders, plugins for forms, even full UI widgets pack etc. 1. Face detection A jQuery plugin which detects faces in pictures and returns theirs coords. This plugin uses an algorithm by Liu Liu.

Pure CSS3 Slider Today I’ll tell you about a remarkable thing that you can implement with CSS3 – it’s a slider. I think you may have noticed that some time ago was very popular variety of sliders, and many chose their decision to use jQuery easySlider example. But it appears the same tasks can be implemented using pure CSS3, today I will tell you exactly how this can be done. Here are samples and

HTML5 canvas – Image zoomer. New interesting tutorial – I will show you how you can create nice and easy Image zoomer using HTML5. Main idea – to draw a picture on the canvas, add event handlers to mousemove, mousedown and mouseup (to move the enlarged area near mouse cursor while holding the mouse). Here are our demo and downloadable package: Live Demo [sociallocker] download in package [/sociall

HTML5 canvas – Image color picker. New interesting tutorial – I will show you how you can create nice and easy Image color picker using HTML5. Main idea – to draw a picture on the canvas, add event handlers to mouse move, to mouse click (for picking colors). Here are our demo and downloadable package: Live Demo [sociallocker] download in package [/sociallocker] Ok, download the source files and le

10 interesting jQuery plugins (august 2011) Today I selected the most interesting jQuery plug-ins that have emerged over the last month. Here are different plugins like progressbar, image zoomer, tooltips, combogrid, smartspin etc. 1. Animated progressbar This plugin will allow you to create animated progressbars (plugin expanding default scrollbar plugin). Online demo you can find here. 2. Image

10 fresh jQuery plugins for UI This is collection of most interesting fresh jQuery plugins for user interface. This is various plugins including wizardnotifications, editable tables, masks and other interesting plugins. 1. Smart Wizard This is flixible jQuery plugin which you can use to make nice wizard interfaces. Online demo you can find here. 2. MsgUI Notification Plugin With this plugin you ca

Fresh 10 HTML5 Canvas (and WebGL) examples Today I prepared new collection of interesting HTML5 examples. And today I included several demos of WebGL applications too. WebGL is software library which allow to display interactive 3D graphic within web-browser. Trust me – this is very interesting. So I’m happy to show you the most outstanding works. 1. MD2 Models in WebGL using GLGE This first demo

CSS3 drop sliding list menu tutorial. This is our sixth CSS3 menu. Today we will make drop sliding list menu. We will using transition effects for sliding submenus. Of course, make attention that this animation will work only in most fresh browsers like FF, Chrome, Safary, ID9, Opera10. Older browsers will supported too, but without animation. This is our final result (how menu will looks): Here a

Creating CSS3 Dropdown Menu #3 This is our third CSS3 menu. This will colored tabs with slideout submenus. I don`t used any defined palette – tabs in different colors. Can warn, that all sliding effects will work only in FF, Chrome, Safary browsers, possible in Opera too. But not in IE (transitions still not available here). Anyway – welcome to test new menu. Here are final result (what we will cr

CSS3 Dropdown Menu #2 tutorial. This is our second drop down menu. Today it is in the green palette. The menu will include a submenus that will slide when we hovering the parent elements. That menu will good for green palette templates. And of course – no any JS – only pure CSS. Since this menu is made using CSS3 – it renders perfect on Firefox, Chrome and Safari browsers (possible last Opera will

10 Great HTML5 Canvas demos This is collection of most incredibly HTML5 canvas demos. Today, during browsing web I was amazed with so big amount of various html5 demonstration. And glad to share what I was able to collect. HTML5 become more, and more powerful, it even less processor-consuming than Flash. So, may not be far off such an event when the flash will fully shifted with html5? 1. FishBowl

10 Fresh Popular jQuery plugins This is fresh collection of new jQuery plugins. 10 great solutions: for text effects, for localization, for forms, for maps, etc. This is collection of recently added plugins which can be interesting. Download, customize and use its in your projects. 1. Lingua Localization This plugin allows you to have quick and easy switcher of website interface. Ajaxy loads an ar

Picture 1 title and description. Picture 2 description. Picture 3 description. Picture 4 description. Picture 5 description. Picture 6 description. Picture 7 description. Picture 8 description. Picture 9 description. Picture 10 description. Picture 11 description. Picture 12 description. Picture 13 description. Picture 14 description. Picture 15 description.

Working with HTML we sometimes face with necessity of saving the results as image. The image can be saved on server or we can force downloading the result directly into your browser

jQuery UI Slider tutorial. Today I will tell how you can use jQuery to animate and control your text. We will changing font size, font family and other properties. Where we can use this? As example to allow your users to customize view of text boxes in your website. So, playing with styles – users will be able to select preferred styles, and you will need just save these styles for him, or, you ca