Although most of the rumors and discussions are right now focusing on acts such as SOPA/PIPA, which expand the ability of law enforcement all over the world to fight online trafficking in counterfeit goods and copyrighted intellectual property, the web should for now be concerned with something else happening in the close, very close future.

The 26^th of May is the final day for websites in Europe to comply with the new EU Cookie Law. This is a new piece of legislation focused on user privacy on the internet and requires webmasters to first ask and obtain consent from visitors if they wish to store or retrieve information about their online behavior. The consent needs to be obtained regardless of the device the data is stored on, including smartphones and tablets.

The directive started as an online privacy protection programme one year ago and was adopted by all EU countries on the 26^th of May 2011. The law gave all EU countries a grace period of one year in which they had time to modify legislation and comply with the addition. The main point behind the law was to make customers aware of how the information about them is collected and stored by web pages they visit and while this is a good idea, many concerned voices say the law doesn’t really do good for internet surfers.

What’s a cookie?

Cookies are the way for web pages all over the world to store information about visiting users. Other newer technologies like Flash and HTML5 Local Storage do the same and while they are covered by the EU Law as well, it was called “EU Cookie Law” because most of the information is stored through cookie usage.

Cookies are not only helpful for the webmasters. Actually, they are more helpful and beneficial to visitors. They are used to track people’s visits and surfing behaviors on the internet in order to deliver better targeted advertising.

They are also useful for some other kinds of actions. They are the ones helping websites keep the users logged in even after they leave the page. And it helps us by helping them. Visitors don’t want to log in all the time they visit a page. It would be annoying to log in every time you use Facebook, wouldn’t it? Also, remembering different settings users wish to use all the time is done through cookie usage as well.

Cookies help webmasters too, offering them information about the users behaviors on their web pages. Tracking tools such as Google Analytics, which measure site performance, will in most cases use cookies too.

However, the EU Cookie Law mostly focuses on the cookies that track user’s visited pages to deliver targeted advertising.

To create a general impression for you, we took a look at how many unique cookies some popular websites have.

• facebook.com: more than 382.000
• apps.facebook.com: more than 47.000
• dailymail.co.uk: more than 17.000
• google.co.uk: more than 12.000
• youtube.com: more than 10.500
• mail.google.com: more than 8.000
• google.com: more than 5.500
• imdb.com: more than 4.300

EU Cookie Law for users: Yes or No?

A survey has been conducted few days ago by the IMRG and eDigitalResearch. The survey was conducted in the UK and came with the following conclusions:

• 75% of UK consumers never heard of the e-Privacy Directive before taking the survey.
• After being informed about the law, 89% of the questioned people believed it is a positive step towards online privacy.
• 79% of the questioned believe something needs to be done in order to inform people about what cookies mean for their online experience and safety.
• 33% of them believe cookies may be used to virus computers.
• Only 23% of the questioned do not object against cookies which improve the user experience, which means 77% are actually against all kinds of cookies.

What to do?

The Information Commissioner’s Office (ICO) wrote a full guide for webmasters who wish to become compliant with the law. The document is long and has to be read from the beginning to the end, but I can make a short summary of it here, just so you get the basic ideas behind what you need to do.

The first step you need to take is to audit your website for cookies. You need to find out what kind of cookies your site sends to users. Find out what they are used for and which ones you need to get consent for, because there are some which according to the new law are legal to be used without consent.

To ask for user consent you need to use some tools, but first you need to analyze your website. The ICO recommends a powerful online tool to help you do this. It is called The Optanon Auditor and works as a plug-in for Google Chrome.

The Optanon Auditor tool can be use as a limited software on your domain – but it should be good enough to offer you a preview of what you need to change right away. Don’t forget you only have a few more days to comply with the rules. According to official reports, companies not complying with the rules can get a fine for up to half a million British Pounds in the UK.

Some other steps you might want to take include creating a link where you explain your users everything about privacy issues and the cookies you use. Some of them might not know what you talk about while some other might not be interested at all. But it would mean a lot for the ones who want to know what they get into when accepting cookies from your page. If you show you have nothing to hide, users will not be afraid to come back to your website.

Explain users what cookies are for and that you do not use them for malefic purposes. Start with the advantages they can get: staying logged in, having their settings remembered and so on. Put focus on them because they are the most important.

Helpful jQuery Plugins for EU Cookie Law

There are several jQuery plugins you could use on your website to help you get acceptance from your users.

The first one is called CookieCuttr and it is available as a WordPress plugin as well. What the plugin does is simple. It allows you to hide different parts of the website, such as the ones generating cookies, and display modal boxes which ask for permission to use cookies. They also show a “reset button” which helps users delete all the cookies for that respective website.

Cookie Control enables you to comply with UK and EU law on cookies, in a couple of quick and easy steps. Cookie Control does just that, presenting users with clear information on whether cookies are present, linking to your privacy policy (where you should have specific information about what cookies are in use), and advising users on how to adjust browser settings and what cookies mean for them.

The second plugin is called cPrompt and does the same as the first one, more or less: it displays a notification to visitors asking for them to enable cookies. They can do it by ticking a box and clicking the action button below the text.

Another useful plugin is called EU Cookie Law Script and is developed by the pro web developers from CodeCanyon. The plugin costs $5 and shows a smooth slide down banner with a fade in bubble where text can be customized and introduced in order for the visitors to get familiar with the issue. If the user agrees, the banner slides away.

The jQuery Cookie Compliancy from CodeCanyon is another helpful tool priced at $5. It provides webmasters a way to allow users to opt-in or out of using cookies. Once the usage of cookies is accepted, the restricted JavaScripts are automatically added and any future page loads will include them. Otherwise the JavaScripts will be disabled for the respective user.

Silktide is the last useful plugin I found. Its advantage is that it comes as an open-source tool. The free plugin is easy to install by only including few lines of code. Users visiting the website will see a message dropping from the top of the screen which will ask them for cookie usage consent.

Not agreeing?

If you think the law is not something you can live with, then this website is made for you. NoCookieLaw was made for people who want to protest against the legislation. The site explains users why the Cookie Law is bad for user experience and allows them to sign a petition to stop the enforcement of the law on websites.

Conclusion

With SOPA/PIPA acts taking the spotlights in press all over the world, there is no question about why not many people heard of the EU Cookie Law. Although good intentioned, the law does not do so much good in the end and can confuse users and put European companies in disadvantage, according to NoCookieLaw.

Now I am not the one to judge. Yes, online privacy is an important issue that needed to be addressed. But is the European Cookie Law the perfect answer to a question that has been asked too many times? I will let you decide on that. What do you think?

Do you like basketball? If you do and you are a web designer, you may take a liking to the design community Dribbble. If you hate sports, no worries! You still may like the network, especially if you are a web designer looking to showcase some of your work and share snippets of it with others.

Dribbble (yes, it has 3 B’s) is made up of a community of designers and creative types who share small screenshots of their daily work. The site’s verbiage is based on the sport basketball, but you don’t have to be a basketball enthusiast to enjoy the site.

Dribbble is like the Twitter for design work. Instead of asking users “What are you doing?” it begs answers to the question, “What are you working on?”.

What is Dribbble?

Creative professionals such as illustrators, web designers, graphic designers and icon artists use Dribbble to promote their work and meet colleagues. Dribbble is a social network created to allow web designers and other creative professionals share their work in small doses, much like a person does on Twitter.

You will find basketball and sports lingo used throughout the network. Once you become a member you are a “player” and you submit “shots” of your work with other players. Shots are “work-in-progress” images or small previews of a designer’s work. Submit “rebounds” in reply to other shots and get feedback from the Dribbble community.

The creators designed the Dribbble interface as an exclusive, simple, usable platform where members can easily display their work in a “show and tell” format. Dribbble’s creators were serious about keeping a tight focus on high-quality design work, which is why becoming a member is not as easy as giving over a name and email address.

Sign Up

To keep the focus on quality design, Dribbble only allows membership via a private invitation. If you want to post “shots” of your work, you must be drafted by another member. By allowing members to take responsibility for who they invite, the network keeps the quality high. Users are passionate and dedicated to their craft and this invitation process tips its hat to that sentiment.

Dribble periodically gives existing members invitations to invite new designers to the network. A lot of the invitation process occurs on Twitter. Members will announce they have invitations and give them away to worthy recipients. Just type in the hashtag #Dribbble to find tweeters who are giving away invites. Here are a few I found after performing a Twitter search.

The network creators are still working on streamlining the process because they realize there are many designers who may have trouble getting into the network even though their work is stellar.

How to Get an Invitation on Dribbble

Unless you are lucky enough to know a friend or colleague who is on Dribbble, you will have to do some legwork to get an invite. Focus on creating a website or online portfolio that showcases your work in the best light. You want to show people you are active in the industry and that you will add to the Dribbble community.

Dribbble allows you to sign up as a “prospect” and create a profile even if you are not an official “player”. This is a good practice because it shows that you are serious about joining the community and being drafted. Once you create your profile, add your photo, skills, bio, location, and most importantly a URL that links to your work. Make yourself attractive so you can land an invite. Follow people and “like” their work to get noticed.

Note: Signing up as a prospect allows you to fill out a profile only. You cannot upload “shots” of your work until you become a full member (player) which requires an invite.

Signing up as a prospect gets you on the Prospects list which is visible to existing members. Members can “draft” you directly from your Dribbble profile by clicking the “draft” button. Once a member clicks on your draft button, you will receive an email invitation which you can accept or decline.

Members can find prospects by visiting the Prospects List page. This is where your profile will be visible when you sign up:

Notice how many designers are not using the profile to its full potential. By uploading a creative avatar and populating your bio with interesting information and an online portfolio, you will rise above the pack.

Your prospect profile can also be found on the “Find Designers” page. With this PRO search feature (see PRO section below), members or hiring organizations can locate you by skills or location. That is one reason why it is so important to populate your prospect profile. Here is the “Find Designers” page:

Member Tips

Shots

Once you become a “player” you can upload “shots” of your work and interact with other designers. Dribbble allows you 24 shots a month with a limit of 5 per day. Unused shots do not accumulate month to month. For example if you use 10 shots your first month, the remaining 14 do not get added your second month’s allotment. Each shot (JPG, GIF, or PNG ) can be a maximum of 400 x 300 px. Dribbble also has cropping functionalities if the image is too large.

Tip: To gain more exposure, find players to follow and engage with them. “Like” their shots, share them, or submit a “rebound” (see below). You can also tweet their shots, link to them, or comment to gain more followers and engage with other designers. Don’t forget to tag your shots so other members can find you from their searches.

Dribbble display new shots on the Debuts page:

The most popular shots are displayed on the “Popular” page. Study the shots that have become popular to see what gains notoriety in the network. Getting featured on this page will get you more exposure. Here are some of the most popular current shots:

Rebounds

A rebound is similar to a comment on a Facebook post. It is a reply to another shot and it offers a way for members to link two shots together.

Tip: Use rebounds to generate interest and connect with others. One member created a graphical representation of one word that defined him and invited others to do the same. Use “rebounds” also to start a project and connect additional images as the project is in process. Rebound shots are visible on the Playoffs page.

Projects and Buckets

Create projects to group shots around a theme. For example, if you are working on a particular web design, group the shots together in one project. Projects are viewable by all, but members who want to use them must have a PRO account (see below).

Buckets are simply groups of shots. All members have the ability to create buckets.

PRO Account

Upgrading to a PRO account is a wise choice for those webs designers who want to receive maximum exposure for their work. At only $20 / year (breaks down to $1.67 a month), it’s a no-brainer. Here are the benefits of a PRO account:

• Create projects to collect shots around a particular theme
• Find designers based on skills or location in a specialized search
• Non-pro members receive a maximum of 5 messages per month to communicate with others. A PRO account lifts this limit.
• Organize members into private or public lists and add attachments to your images
• A Pro badge will appear next to your avatar on your profile, and in your activity on the network.
• Appear ready to be contacted for hire or special work opportunities. PRO members can display a “hire me” button on their profiles. Members can contact you via the button with potential gigs and work opportunities.

Invite Others

When you start gaining ground on the network, you will have the ability to invite new prospects. This is a great opportunity to get more exposure, especially on Twitter. Your “invitees” will be grateful to you and could potentially post a thank you to their fans/followers.

Jobs Feed

The jobs feed alone is worth the price of admission. The network posts single job entries on the upper-right hand corner of every page. But if you want to see the full list or even subscribe to the RSS feed, visit the Dribbble Jobs page.

Dribbbleboard – a more convenient way of browsing at Dribbble

Conclusion

The Dribbble interface is easy to use and allows web designers the ability to network and showcase their work. It is a user-friendly, simple interface that is purely focused on the quality of great design. If you give enough time to it, you will get value out of it.

Are you on Dribbble? Please let us know in the comments below. If you are looking for an invite, share a link to your prospect profile!

Here is an example of some of the top designers on Dribbble. Check out DesignModo on there too!

DesignModo (Adrian)

Vladimir Kudinov

Mike | Creative Mints

Sebastien Gabriel

Dan Cederholm

Meagan Fisher

Morgan Allan Knutson

Kamil Khadeyev

Rogie

SoftFacade

Josh Hemsley

Trent Walton

Kerem Suer

Artua

Rally Interactive (via Ben Cline)

Bill S Kenney

Visual Idiot

Eddie Lobanovskiy

Sean McCabe

Scott Hill

Jeff Finley

Kevin Anderson

Assembly Co.

Brent Couchman

Dann Petty

Jeremy Sallée

Konstantin Datz

Matt Kaufenberg

After the successful launch of Pandora UI premium pack by DesignModo, we have decided to share a part of it with our beloved readers. You can now download the free version of Pandora UI containing a handful of elements that will definitely be helpful.

The Pandora UI Free Kit, contains 2 samples and some elements that can be used in developing iPhone and iPad applications (Retina Display). You will find the needed elements for the creation of these applications by using the included Control Elements and samples.

This is a great collection of base and custom elements that will be helpful for iOS designers and developers to bring their work to reality and design something beautiful for their apps. Pandora UI Free is oriented towards iPhone (+iPhone 4s) and iPad (+the new iPad). All the elements were designed in Photoshop with the help of shapes and are in PSD format. This makes it possible to make them bigger or smaller without losing quality at the same time.

There is a big number of great apps, that unfortunately don’t have a good design and the developers can’t deal with this at times. Apple is steadily improving and asks for good quality products and well-designed apps. This is when Pandora UI comes into the picture and helps you deliver a great design for your apps.

Controls

Samples

The Story and Problems

If you’re a web developer working with CSS (especially CSS3) in modern browsers, it’s more than likely that you’ve come across these things called vendor prefixes. Initially used for features unique to certain browsers, vendor prefixes are essentially a way of making a certain CSS property exclusive for one browser or rendering engine.

At face value, vendor prefixes seem like a nice idea. They allow for certain browsers to implement unique or experimental functionality, such as properties found in un-finished or un-standardized CSS specifications, and so should (at least in theory) be accelerating web and browser development. The guys who make the browsers (such as those over at Google and Mozilla) must be really excited about having their browsers on the cutting edge with experimental CSS3 implementations and whacky ideas here and there, however when trying to utilize vendor prefixed properties in practice, cracks begin to form.

The first thing that most developers notice when trying to implement modern CSS3 techniques into their websites to be utilized by newer browsers, is the mess that vendor prefixes create in their code. As different versions of different browsers understand different things, many different properties must be used to accomplish the same thing in multiple browsers. Take a simple CSS3 gradient for example – the CSS required to make a gradient that will work in most modern browsers usually looks something like this:

background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image: -moz-linear-gradient(top, #444444, #999999);
background-image: -ms-linear-gradient(top, #444444, #999999);
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(to bottom, #444444, #999999);

That’s five vendor prefixed properties, and then one actual ‘real’ CSS3 property for the browsers which are out of the ‘experimental phase’. It’s worth noting that in the code snippet above, two of the vendor prefixed properties are for webkit! This occurred because of a change in the experimental functionality that Chrome and Safari supported, and thus if all versions which could display the gradient are to be supported, both the old and new versions should be used. This kind of backwards compatibility could lead to big complications.

Not only is the code visually messy (It’s things like this that make me cry myself to sleep at night), but if the colours in the gradient need to be changed, twelve values need to be changed! It’s important to remember that if vendor prefixes weren’t used and browsers just went in and implemented experimental functionality, even more havoc would be created (let’s say that Chrome took the parameters in the opposite order to Firefox in its implementation), but is it really necessary to have to include all of these lines just for a gradient?

As if this doesn’t seem like a big enough problem in itself, things don’t get any better when developers get lazy. Some developers use some vendor prefixes and not others, creating inconsistencies between browsers that should really be displaying things in the same way. Even worse, some developers don’t create fallbacks for advanced properties! A solid background colour should be set as a fallback if gradients are not supported in the browser. Without any fallback, massive problems can be created with different websites in different browsers that support different things. A rounded corner turning square in older versions of Internet Explorer isn’t a big deal, but the main content division not having a background colour is! (Note: I’ve actually seen this in a production website!)

To make things worse, in recent drama it was thought that some web developers favorite the -webkit- (Chrome and Safari) vendor prefix. This didn’t leave the guys behind Firefox, Internet Explorer, and Opera too happy as it meant that some websites didn’t work as intended in their browsers. This led to them toying with the idea of implementing -webkit- prefixes in their browsers! Imagine the chaos and confusion that would be caused!

The situation with vendor prefixes is a huge mess, and whether it’s down to developer laziness (not including most prefixes or providing fallbacks) or the prefixes themselves, there is certainly a problem here.

The Solutions

It’s all well and good talking and moaning about the pros and cons of vendor prefixes, but as with any debate, it ends up coming down to how we solve the problem or issue at hand.

Many solutions have been proposed, although none of them are perfect. Some people suggest that vendor prefix behavior should be completely removed from browsers and that we should wait it out until specifications become standardized, however I personally think this would hamper the growth of the web. This leaves the majority of solutions, which are essentially about fixing developer laziness.

Lea Verou has written an interesting piece of JavaScript called -prefix-free which prefixes un-prefixed properties in the CSS (It’s worth noting that Lea has also suggested a number of interesting solutions to the vendor prefix problem as a whole). The idea of JavaScript doing the prefix work for you is an interesting one, however it creates a dependency on JavaScript that makes it a sub-par solution for most work outside of tech and code demos. SASS and other CSS pre-processors can also solve the developer “laziness” problem by adding the prefixes in the compiling process, and this doesn’t introduce any extra dependencies either. The only real problem with using pre-processors as a solution is that by definitions, pre-processors require the code to be compiled – this makes the solution reasonably unappealing to those of us who don’t make use of CSS pre-processors.

A variety of tools and text-editor plugins have also been created to try and make it easier to prefix properties. These aren’t going to solve any vendor prefix crisis any time soon, but they are, at least for now, a developers best friend to writing prefixed properties. css3please.com is a brilliant resource and a great place to grab CSS3 properties and then change their values for your own personal usage, and there are also services like Prefixr and Lea Verou’s ‘CSS Gradients Please’ which can directly prefix code that you pass to it. A plugin for Sublime Text 2 called Sublime Prefixr has also been created so that code you write can easily be passed through the Prefixr API – giving easy access to a prefixed (and hence more rounded and generally more supported) version of your code. Very useful stuff.

Ultimately, it’s an interesting and complex issue. I personally think that vendor prefixes are here to stay in one form or another, and they do wonders for the growth of the web as a whole. It is certain however that something needs to be done to deal with the implementation issues. I think that for a short-term solution, websites like Prefixr make for a very nice way to prefix your code, however in the long term, the system needs some sort of change. A simple Google search should yield good results on what other people think of the vendor prefix situation, and if you have any opinions of your own, leave them in the comments section below – I’d love to hear what you have to say about the issue!

Hope you guys are enjoying our posts on UI Kits functionality. It’s such a new topic that it’s even hard to find other opinions out there, all we find is UI Kits collections, but no reflections or creative uses. So, hope to see more discussion on this, the door (a.k.a. comments / trackbacks section) is open!

This is the last part of our UI Kits “series” (at least for now ) we’ll talk a little more on how developers can me use of them, focusing on increase the value of the final work for clients.

In our comments section I’ve heard once “why should I pay $20 for something that I can get for free?”. I mean, why should I get premium UI Kits, while free ones are clearly “good enough”?

Well, dear Padawan, here we’ll see a lot of reasons. And those uses that we’ll see here is almost restricted to premium UI Kits. The free ones are good to try things, but they are often limited or just not so good, so every time we write “UI Kits” you should read “The really good UI Kits”.

I’m not trying to convince you to do anything, I’m just telling my own experience as a 7-year-experienced-developer. If I’d been asked one, and only one advice to give to anybody on this field, I’d say: there are things out there that you just should use. I mean, what makes my job easier and my incomes higher are things like:

1. WordPress
2. Premium job boards
3. jQuery mobile
4. UI Kits

So, today we’ll be talking about how you can use UI Kits as a Developer, so you can impress your clients with higher quality and faster service.

Are you ready? So, let’s rock!

The developer / designer syndrome

Since many of the tasks in our area are so close it’s pretty easy to suffer the developer designer syndrome. We tend to be more a jack of all trades, doing one thing really well and the others just ok.

Also, especially for the guys who go programming first and then learn a little on design it’s easy to go for “Ignore the design, please” pages, where you have functionality and little or no design, or even worse, you have a really bad design.

The truth is that it’s pretty easy to do “good” things. You just need to know color combinations, a little on typography, set spacing and aligning right. Grid systems and even WordPress themes will help you on this. You can be good at this stuff in no more than 30 days.

But, though you’ll have a good overall aspect you will need to be a way better designer to get a professional look for every single element in your page. And it’s hard to really look professional.

The magic is that instead of hiring a guy to do a few components for you, you can just buy UI kits and get enough elements for a plenty of projects. So you can do the basic design stuff you already know and use the UI Kits as your secret sauce. You don’t need to reject projects because your designer can’t do things right now, just accept as many stuff as you can and try to invest more in the details.

Notice that I’m not saying that UI Kits replace good designers. It’s just that they can allow not-so-good designers to get a much better result, in spending less time. Same thing for premium themes or sliced PSD’s out there, but the UI Kits are focused in the small stuff so you can do your own the big things (like good headers, AI, select the best grid system).

Proof-of-Principle Prototyping: super fast & useful feedback

Proof-of-Principle prototypes are prototypes that don’t need to contain the final look and feel of things, they are there just to try and proof concepts. So you can try a big button that you can click, a smaller button at the top of the page, and just a text-only CTA.

It’s a simple principle to achieve the best option for elements. Instead of just sticking with your first idea for every single item, you keep on trying, assuming that the previous thing didn’t work. So you try and try and try again.

This technique is especially good for critical elements. Slideshows, forms, CTAs, menus. You just keep on trying until you find a thing that will just grab user’s attention.

For me those are the best ones. Clients are glad to give you feedback when they can actually click on things, even if you just set a few image maps over that final png you just sent him. I’ve done once a Proof-of-Principle Prototype for mobile. You can’t imagine how amazed the users were to try things on their own mobiles. That was one of the best things I’ve done, such great input and actually understanding what works and what doesn’t.

But by “Proof-of-Principle Prototype” the first thing that may spring to your mind is a wireframe. Well, it isn’t (or doesn’t need to be!). With UI Kits and your basic design you can easily set up a better looking page and get a more “real-world” experience.

Remember what I just said about “Ignore the design, please” pages? They could actually work if you are showing your work to a developer, that kind of guy who could do same thing you are doing, so he can imagine how things should work. But it just won’t work for other normal people.

Now what happens if you show this kind of thing to your clients? It’s the same as taking you to an oil well and telling you to just imagine how those pumpjacks works, by looking at a technical drawing.

Pretty hard, huh?

It’s far easier if you just show them something closer to the final look, and make things clickable. For each component you’ll probably get a few options in your UI Kit. So why not just setting them up and showing to users? See how each one performs and chose the best for each project.

You’ll see how you’ll get a much better feedback if the client doesn’t need to worry about missing colors, or that Latin text (seriously, only nerds can see how the actual text will be when you remove the lipsum stuff).

Despite of UI Kits help on this, here a few checkpoints for good prototyping:

1. It should be fast – Since you want to try at least 2 things, you don’t want to lose time
2. Client should understand how things will work before you have the actual code – Ok, A/B testing works pretty well, but any change in the final work will have at least double the cost of same change in the beginning.
3. Clients should be able to give you good feedback without having to guess which element is real and which isn’t – If you have a bunch of lipsum’s there client may assume that the element you’re testing is also a placeholder
4. Image maps are good – They are really bad for your final code, but just to test things they’ll work great
5. Get a few friends to try this – You don’t need to get tons of users, just get a few friends of yours (if they are the target user, the better) and tell them to do a few simple tasks

So, what do you think?

Do you have any use for UI kits that we missed? We’d love to hear from you!

Today I will try to analyze the most important of new features of Adobe Illustrator CS6, and will review the other less significant, in my opinion, improvements. After reading this review, you can get a first glimpse of the advantages of this release, and make your own conclusions; I was just trying to make an unbiased approach towards the subject of study.

Gradients on strokes

Now it is the first time since the creation of Adobe Illustrator it became possible to apply gradients to the strokes.

Besides the traditional linear and radial gradient for the stroke there appeared two types of gradient fill. These are the Gradient along stroke and Gradient across stroke.

With the help of the Gradient along stroke, we can create a conical gradient, for example. Previously, there were some smart tricks that helped to create this type of fill (here is described one of them), but now it became much easier. You just need to create a circle with a stroke, whose width is equal to the diameter of the circle, and to apply the Gradient along stroke to it.

Such a conical gradient is very easy to control by changing the position and color of its sliders.

Gradient across stroke helps us to color curved objects similar to chrome-plated tubes.

We can apply to the path different profiles from the Stroke panel and change the width of the stroke with the help of the Width Tool. Gradient along stroke will obediently adjust to new shapes.

You can also apply the Dashed line to the path.

This is the most remarkable feature for me that has enormous creative potential and allows you to create artworks much faster.

When I first saw the presentation of this feature on Adobe TV I immediately came up with a question: what object does the stroke with a gradient fill convert to after applying the Expand Appearance command? Now we can check it out. Select the stroke with a gradient fill and go to Object > Expand Appearance.

As you can see, we got a Gradient Mesh. It’s just so wonderful! In case you need a more complex filling, than we can create with the help of the Gradient along stroke and Gradient across stroke, we can recolor the nodes of the gradient mesh or add new ones.

What would I like to have and what I cannot find in Adobe Illustrator CS6 when filling strokes with gradient fill?

1. We cannot control the position of the gradient with the help of the Gradient Tool (G), and for this reason, Gradient annotator is also inactive.
2. If we apply the Art Brush to path, we cannot apply the gradient fill, even if we choose the appropriate option in the dialog window of the Art Brush Options.

Is there an alternative option for creating this kind of fills in earlier versions of Adobe Illustrator? Yes. There is a Free Gradient Mesh plugin which allows you to do that. You can read more about it here.

Pattern creation

The creation of the seamless pattern in Adobe Illustrator was driving crazy many designers to which I belong as well. There is at least one trick that allows you to make this process automated. You can read about this here. However, the creation of the seamless pattern still remained a challenge, the resolution of which needs accuracy and diligence. Fortunately, now this process is automated so that now it can be done by any beginner. Let’s see how this is done on a simple example. I created a group of elements, which consists of several circles, as it is shown in the picture below.

To create a seamless pattern, select the group and go to Object > Pattern > Make. As a result of these actions, we get into a special mode in which we can manage the seamless pattern with the Pattern Options panel and get a visual control over the process of its creation.

There are 5 Tile types that you can choose from a list in this panel.

You can change the size of tile or set the value of spacing between them.

You also have a choice of type of overlapping of the elements of the adjacent tiles.

Elements in the bottom of the panel are used for different kinds of visualization and do not affect the final product.
We are able to edit the existing and create new elements, all the changes are immediately displayed on the entire pattern.

To save a new seamless pattern click on “Done” on the top bar.

As a result of these actions, we leave the mode of seamless pattern creation, and the designed pattern appears in the Swatches panel.

Now we can apply it to any object as a fill.

If you need to edit the created pattern, just double click on its image in the Swatches panel which will get you to the mode of creation of the seamless pattern.

Does a new feature allow to create all the possible kinds of seamless patterns? No. There are at least 17 kinds of similar patterns. Is it possible to create seamless patterns in earlier versions of the program? Yes, There is Free Mad Pattern Tool which allows you to create a greater variety of patterns. But if we talk about the convenience, then, of course, it is more convenient to create patterns in Adobe Illustrator CS6.

Image Trace

Developers promise us that the quality of trace is more improved, and the process is more intuitive. Now check this out. For our experiment take two raster images, a photograph and sketch. Let’s start with the photograph. I’ll be using the photograph Night Just Starting (credit to deviantART user ~ xeneras).

Paste the photo into the artwork (File > Place …) in Adobe Illustrator CS5 and Adobe Illustrator CS6, and then do tracing using the designed for these purposes preset Photo High Fidelity, and then compare the results.

As you can see, new tracing engine shows better results.

Try to improve the quality of images in Adobe Illustrator CS5 by manually controlling the parameters of the tracing.

Using different parameters, I could not achieve the quality, which gives us the Adobe Illustrator CS6.

Let’s apply tracing to the sketch. I’ll be using the sketch (credit to Vika Vasilyeva).

Preset Inked Drawing is designed for tracing this kind of images.

But from experience I know that it is better to use the preset Black & White Logo.

Tracing of the sketch in Adobe Illustrator CS5 gave, in my opinion, an excellent result.

Apply the same preset for tracing in Adobe Illustrator CS6.

As you can see, most of the tiny details disappeared.

Try to improve the quality of images in Adobe Illustrator CS6 by manually controlling the parameters of tracing.

I managed to achieve almost the same result.

Did the process become intuitive? I’m not sure. Specifying in percentage is clearer for you than in the numerical values? There is one plus that I can see for sure. When you hover over the element controlling the parameter, in the Image Trace panel we can see a tooltip that indicates what the actions with this parameter lead to.

64-bit support for Mac OS and Windows

One of the main differences between Adobe Illustrator CS6 and previous versions is the ability to support 64-bit operating systems. 32-bit operating system version is limited to support of a maximum of 4 GB of memory, and even then it will not give the entire power to your applications. If you’re working with a large amount of documents, or with complex graphics, the memory is consumed rapidly and the operating system starts moving some of the information on your hard disk. This leads to a slowing down the work or issuing an error about the lack of memory, but the worst that it can crash the application and data loss.

64-bit version can support any amount of memory available today. Transition to 64-bit operating system and more RAM will not only give an additional “living space”, but will allow working more efficiently.

Adobe Illustrator CS6 supports 32 and 64-bit operating system for Windows, but for Mac OS now it only supports 64-bit operating system.

Now let’s talk about the new features that are not as essential as mentioned above, but still enjoyable.

Efficient, customizable interface

Now you can set the brightness of the interface. To do this, open the Preferences window (Cmd / Ctrl + K) and choose the User Interface in tab in the left side of the window. Now, by moving the slider, you can change the brightness of your interface.

You can also change the Canvas color. It can match the brightness of your interface, or be white.

Changes in the panel system

Now you can switch between the numeric fields using the Tab key and change the values using the arrow keys. This change affected only Mac OS users. Windows users had these features in earlier releases of the program.

Character panel now has additional options that allow you to manage your text parameters more efficiently from a single panel.

Now we are able to rename the layers, brushes, symbols, and so on directly in the correspondent panels without opening additional windows.

Make / Release Mask button appeared in the Transparency panel.

You can tear off dock of previously hidden tools such as the Shape and Pen tools. Dock tools horizontally or vertically for a more efficient workspace.

Advanced Color panel view allows us to choose colors more effectively. In addition we get an ability to specify 16-bit color value.

Speedy Gaussian Blur

You can apply Gaussian Blur and effects such as Drop Shadows and Glows and see the results immediately on the artboard.

Start-up profiles

When creating a new document and choosing Devices profile you are able to choose the type of mobile device for which you will create an artwork.

Conclusion

In this short article I have listed are not all the new features of Adobe Illustrator CS6, but only those that I consider to be important. You can find the full list of updates by clicking on the following link.

Adobe released the new version of its Creative Suite toolkit, including Adobe Photoshop CS6, Illustrator CS6, Dreamweaver CS6 and others. Besides the updates, Adobe released and improved a set of products such as Creative Cloud or packages of products such as CS6 Production Premium, CS6 Design Standard and CS6 Design & Web Premium.

In today’s article we take a deep look at each one of them and try to come with a conclusion about Adobe’s first product update in two long years.

Photoshop CS6

One new feature I was most excited about in the last version of Photoshop was the content aware fill, which was basically able to fill in any selected area according to what was in background – an algorithm that many of us will probably never understand. It was quite easy to remove trees, lens flares and pretty much everything unwanted from your images. And it was really easy to use as well.

In Photoshop CS6 Adobe improved the tool and brought it into the patch tool, giving us the content aware patch. This allows users to patch with improved control. The tool magically blends pixels and offers users a stunning result. You can see a preview of how the tool works in the video below, released by Adobe themselves.

One of the simplest and easiest to implement new features of Photoshop was the auto-save, which is now available and running by default in the application. It will probably save you some frustration now and then.

The liquify tool is also improved, with Adobe adding a larger maximum brush size for working on huge-resolution images. Another improvement is that the tool works and previews in real time.

Something else very easy to notice from the beginning is the new user interface, which was overhauled by Adobe for better performance. The default background color is now dark (it is, however, adjustable), and with added and improved functionality. The icons and menus are cleaner and the setup process is changed as well. In order to install the program, a user has to log in with an Adobe ID. This might however be an issue for users without an internet connection, but the idea behind the new setup process is that people will enjoy better support if problems arise.

Photoshop CS6 comes with three new blur tools included. These turn image processing into an easier and quicker process. The tools are called field blur, iris blur and tilt-shift and are grouped together under the Filter > Blur menu. The iris blur is probably the most innovative, allowing users to edit shapes containing built-in masks and isolate parts of the image which should remain in focus. The amount of blur can be controlled, as well as the brightness and color of bokeh highlights. Field blur is a fast way to blur an entire image or perform several depth-of-field adjustments. Tilt-shift allows users to copy the behavior of lenses allowing for manipulation of the plane in focus.

In the new version of Photoshop support for video files has been expanded. Now you can add and mute audio tracks, create fades, transition and perform standard video edits. The file format support is handled by Adobe Media Encoder, which also powers Adobe Premiere.

There is also a new Oil Paint filter that can quickly be applied to photographic images. It opens in a separate window and can be adjusted in real-time.

If color and brightness correction were a problem for you before, CS6 will come in handy one more time. A new and default option, called “Enhance Brightness and Contrast” has been added in Levels and Curves. Photoshop will analyze the photo and make image-dependent adjustments.

Something else really important that changed with the addition of CS6 are the system requirements, especially for Macintosh users. The new version of Photoshop doesn’t run on 32-bit Macs, so the users must run a 64-bit Intel processor and OS 10.6+. On Windows, the minimum requirement is Windows XP SP3.

If something didn’t change, then the price is it. As before, Photoshop is very costly as a standalone product. You will have to pay $699 for the basic version and $999 for the extended.

Illustrator CS6

The other flagship tool of Adobe suffered some modifications as well with the addition of the new package.

You can see below Brenda Sutherland, Illustrator Product Manager at Adobe, presenting two of the most important ones. As there is nobody out there who knows the features better than her, we decided to let her speak instead of us.

The user interface was changed in Illustrator as well, just like in Photoshop, coming by default in a charcoal grey. The brightness can be set back to the old one in a few clicks if wanted.

Some other tweaks of the improved product are the ability to edit layer names, swatch names, brushes, artboards and others directly in their respective panel. You had to double-click the item you wanted to rename in previous versions and although you can still do it this way, it is much easier to just double-click the name, instead of the icon.

The Character panel suffered some minor tweaks as well, enabling users to cycle through fonts using the arrow key. This feature was available on Windows before this new release, but works now on Macintosh systems as well.

Regarding system requirements, the great “Mercury Performance System” and Illustrator CS6 were completely rewritten as a native 64-bit app on both operating systems. While Adobe Illustrator will seriously fly on a Mac Pro, it will also work well on a MacBook Air with 4GB RAM.

The bare minimum spec is Mac OS X 10.6.8 or 10.7 Lion, 2GB RAM, 2GB HDD space and 1024 x 768 resolution. On Windows the minimum spec is Windows XP Service Pack 3, 1GB RAM for 32-bit systems and 2GB RAM for 64-bit systems. Keep in mind that these are only the bare minimum requirements.

Illustrator CS6 can be upgraded from a previous CS version for $249.

InDesign CS6

If you design for print and not only for web, InDesign is probably in your tool range. Well, there are good news for you too, Adobe released a CS6 product for InDesign as well. The tool costs $699 as a standalone application, $125 for upgrade from CS5.5 and $249 upgrade from CS3, CS4 and CS5.

The new release pushes the program as far as it can and makes it the best InDesign version ever. Additions like Alternate Layouts, Liquid Layout and Content Collector will only likely improve the user’s experience and the amount of automation in this product.

The new interface looks great, allowing menus and toolbars to snap in and out of place quite easily. If you are too lazy to customize the interface yourself, preset buttons are always there to help switching between a customized set of tools to another. InDesign CS6 achieved a great balance between providing more than enough features without cluttering the space.

Alternate Layout is a great tool for print designers, as many of the things they do are never alone and are usually joined by other products. A poster you created few months ago might need a banner or a leaflet today. This new tool removes some of the tedium or replicating and reconfiguring content if you need to design something in different dimensions. If you want your four-page magazine to be viewed on an iPad, select the option from the Alternate Layout menu and all the content will be reused in the new dimensions.

Liquid Layouts lets users set up rules for moving content from one layout to another one. Although the new tool doesn’t make the work easier by a lot, it definitely makes adapting the same content from a template to another smoother.

Don’t automatically assume Liquid Layouts and Alternate Layouts create perfectly final products, but at least they automate the processes and give you much more time to spend on the necessary details.

In Adobe InDesign CS6 there is the possibility of linking content, which means that if you suddenly don’t want red but blue to be spread across the magazine, you can change it with one click. This makes automation in InDesign CS6 even more efficient.

The Content Collector is something new and it gives the feeling of a pasteboard – which it actually is. The feature pops onto the bottom of your screen when you select it and enables you to place and collect assets in order to reuse them later. Adding elements to the Collector is easy and is done by drag-and-drop. Even elements from another documents can be used from the Collector.

Membership applications or enrollment paperwork, things that were built by programmers before, can easily be created with InDesign CS6 now, thanks to the support for interactive PDF fields.

Dreamweaver CS6

Many things are new in Dreamweaver CS6, which is an essential tool to be upgraded if you build web pages or apps. One of the greatest improvements is the support for HTML5 and CSS3 but it still seems built for professionals willing to climbs its steep learning curve.

Some of the new additions are the “fluid grid layouts”, which let you specify how elements will be arranged on a page when it is displayed on smaller, portable devices.

With Dreamweaver CS6 it is easier than ever to create applications for portable devices, thanks to Phone Gap Build. Adobe also improved the integration with Query Mobile, a JavaScript-based platform enabling users to build tablet and phone apps.

Although I don’t really use it, the capabilities of the “Live” preview are improved, with better fidelity and flexibility added to it. The multiscreen preview panel is also better, according to the developer.

If something has been missing from the Adobe collection for a long time then this was support for web fonts. Well, not anymore. Dreamweaver offers now support for web fonts through a simple dialog box that lets you install typefaces on your web server. You can still do it by hand-coding it, but Dreamweaver makes it easier in the new version and adds something to the process automation. The FTP tool is also improved and the validation tool gives you full compliance with current W3C Web Standards.

The new Dreamweaver CS6, is definitely the first and only Web-building tool that works smoothly and is capable of running on multiple platforms all over the world. It still has some rough edges, but Adobe is on the right path.

The tool costs $399 as a standalone product and $199 to be upgraded from previous versions.

Adobe Creative Cloud

The cloud is one of the flagship of today’s technologies, used by many other huge companies such as Apple. Adobe uses it as well and calls it the Creative Cloud, which pretty much allows you to access your files from anywhere in the world, form any browser, from any operating device.

You can see a preview video of it below.

The application has a monthly subscription of $49.99 and allows you to download every Adobe application wherever you want to.

Creative Cloud breaks the barrier of getting your content out to people. You can publish websites using Adobe’s hosting services and you are able to deliver stunning digital publications to tablets.

Creative Cloud basically allows you to carry your Adobe Creative Suite CS6 and your Adobe files with you all over the place.

Toolkits

Adobe introduces different toolkits and collections for people who don’t need every one of their products. There is no reason in having Premiere Pro if you create magazines, right? Therefore Adobe features the following toolkits at different prices:

Design & Web Premium CS6 includes Photoshop, Illustrator, InDesign, Dreamweaver, Flash, Fireworks, Acrobat X Pro, Bridge and Media Encoder, all at a discounted price of $1899. Buying each of the products as standalones would cost you few dollars less than $4200.

CS6 Design Standard Includes Photoshop, Illustrator, InDesign and Acrobat X Pro and costs $1299, around $1150 less than if you would have to buy each product by itself.

CS6 Production Premium includes Premiere Pro, After Effects, Photoshop, Adobe Audition, SpeedGrade, Prelude, Illustrator, Encore, Flash, Media Encoder and Bridge. The full price for all the products is $5443, while the whole toolkit can be purchased for only $1899.

Adobe CS6 Master Collection includes all Adobe Products at a price of $2599. Buying each one of them alone would cost you almost $9000, so this is a huge discount Adobe offers.

If you already own one of these toolkits, you can upgrade all the products to the CS6 version for between $375 and $949, depending on the collection. Note that two of the four toolkits can be upgraded at their current price only until January 2013, when the offer expires.

Conclusion

After a two-year period in which Adobe didn’t release anything new to the Master Collection, 2012 finally brings us CS6.

There are much more updates to the Adobe Suite with the addition of CS6. Every one of their products has been upgraded, including After Effects, Premiere Pro or Flash, but I’ve decided to only review the ones that are currently widely used.

With this new release Adobe brings some new and improved features that are definitely worth paying for. And with all the toolkits made available by the developer, I am wondering why would one only buy a product instead of spending only double and buying half or even of the whole suite?

In this tutorial we will code an Video Player from Impressionist UI by Vladimir Kudinov. We will code it with CSS3 for the styling and the “MediaElement.js” for the functionality. MediaElement.js is a HTML5 audio and video player that also works for older browsers using Flash and Silverlight to mimic the HTML5 MediaElement API.

Step 1 – Downloading MediaElement.js

First we need to download the “MediaElement.js” script and extract it. Then from the “build” folder we need three files:

• flashmediaelement.swf
• mediaelement-and-player.min.js
• silverlightmediaelement.xap

Then copy all these three files to the same directory, I will copy for my “js” folder.

Step 2 – HTML Markup

Now, we need to link to the jQuery Library, we can host it locally or use the one hosted by Google. Then we need to link to “mediaelement-and-player.min.js” script file and the CSS file. All this three files need to be inside of the

<head>
	<title>Video Player</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="js/mediaelement-and-player.min.js"></script>
	<link rel="stylesheet" href="css/style.css" media="screen">
</head>

To create the video player we only need to add the new HTML5 video tag. Then we will add some attributes to the video tag: the width and height of the video and the poster. The poster is the image that you can add to be shown on top of the video until the user press the play button.

<video width="640" height="267" poster="media/cars.png">
	<source src="media/cars.mp4" type="video/mp4">
</video>

Now we just need to add the following code to load the video controls and to set some settings. The settings that we will add are:

• alwaysShowControls – true to always show the video controls and false to hide on mouse out.
• videoVolume – to make the volume slider be horizontal.
• features: ['playpause','progress','volume','fullscreen'] – here we’ll set what controls we want to add on the video.

For more settings take a look at “MediaElement.js” Documentation.

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
	$('video').mediaelementplayer({
		alwaysShowControls: true,
		videoVolume: 'horizontal',
		features: ['playpause','progress','volume','fullscreen']
	});
});
// ]]></script>

Step 3 – Video Basic Styles

Let’s start by adding some reset styles to the elements that we will use.

.mejs-inner,
.mejs-inner div,
.mejs-inner a,
.mejs-inner span,
.mejs-inner button,
.mejs-inner img {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

Then we’ll add the general styles to the video container. All the CSS properties that we are using in this step are needed to create the video container layout. This will not create any styles to the video; it will only position all the video elements in the right place.

.mejs-container {
	position: relative;
	background: #000000;
}

.mejs-inner {
	position: relative;
	width: inherit;
	height: inherit;
}

.me-plugin { position: absolute; }

.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video,
.mejs-embed,
.mejs-embed body,
.mejs-mediaelement {
	width: 100%;
	height: 100%;
}

.mejs-embed,
.mejs-embed body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.mejs-container-fullscreen {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 1000;
}

.mejs-background,
.mejs-mediaelement,
.mejs-poster,
.mejs-overlay {
	position: absolute;
	top: 0;
	left: 0;
}

.mejs-poster img { display: block; }

Step 4 – Controls Container

We will start to add a big play button to the center of the video container.

.mejs-overlay-play { cursor: pointer; }

.mejs-inner .mejs-overlay-button {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	margin: -25px 0 0 -25px;
	background: url(../img/play.png) no-repeat;
}

Then we will style and position the video controls container. We’ll position it at the bottom, give it a 34px height and add a background color. We’ll use RGBA to make the background transparent, but RGBA is not supported in older browsers so we’ll also give a fallback using RGB. Then we will add some buttons general styles and add the sprites images. If you don’t know what CSS sprites are or how to work with theme take a look at this article.

.mejs-container .mejs-controls {
	position: absolute;
	width: 100%;
	height: 34px;
	left: 0;
	bottom: 0;
	background: rgb(0,0,0);
	background: rgba(0,0,0, .7);
}

.mejs-controls .mejs-button button {
	display: block;
	cursor: pointer;
	width: 16px;
	height: 16px;
	background: transparent url(../img/controls.png);
}

Step 5 – Video Control Buttons

In this step we will position the buttons in the right place. So basically what we will do here is: position each button on the controls container, set the width and height of each button and position the background image in order to display the right button.

.mejs-controls div.mejs-playpause-button {
	position: absolute;
	top: 12px;
	left: 15px;
}

.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
	width: 12px;
	height: 12px;
	background-position: 0 0;
}

.mejs-controls .mejs-pause button { background-position: 0 -12px; }

.mejs-controls div.mejs-volume-button {
	position: absolute;
	top: 12px;
	left: 45px;
}

.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
	width: 14px;
	height: 12px;
	background-position: -12px 0;
}

.mejs-controls .mejs-unmute button { background-position: -12px -12px; }

.mejs-controls div.mejs-fullscreen-button {
	position: absolute;
	top: 7px;
	right: 7px;
}

.mejs-controls .mejs-fullscreen-button button,
.mejs-controls .mejs-unfullscreen button {
	width: 27px;
	height: 22px;
	background-position: -26px 0;
}

.mejs-controls .mejs-unfullscreen button { background-position: -26px -22px; }

Step 6 – Volume Slider

To style the volume slider we’ll position it, then add the width and height values, and rounded corners.

.mejs-controls div.mejs-horizontal-volume-slider {
	position: absolute;
	cursor: pointer;
	top: 15px;
	left: 65px;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	width: 60px;
	background: #d6d6d6;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	position: absolute;
	width: 0;
	top: 0;
	left: 0;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	height: 4px;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

Step 7 – Progress Bar

The progress bar stylings are basic. We need to position it on the top of the controls container, add some background colors for each state (all and loaded time). For the current time we will set the width to 0 and it will be automatically updated when the movie is playing.

.mejs-controls div.mejs-time-rail {
	position: absolute;
	width: 100%;
	left: 0;
	top: -10px;
}

.mejs-controls .mejs-time-rail span {
	position: absolute;
	display: block;
	cursor: pointer;
	width: 100%;
	height: 10px;
	top: 0;
	left: 0;
}

.mejs-controls .mejs-time-rail .mejs-time-total {
	background: rgb(152,152,152);
	background: rgba(152,152,152, .5);
}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
	background: rgb(0,0,0);
	background: rgba(0,0,0, .3);
}

.mejs-controls .mejs-time-rail .mejs-time-current { width: 0; }

Step 8 – Progress Bar Handle & Current Time Tooltip

In this step we will add the progress bar handle and the tool tip that will show the current time on hover. So we will adjust the position, add the background images, set the widths and heights, and some typography styles.

.mejs-controls .mejs-time-rail .mejs-time-handle {
	position: absolute;
	cursor: pointer;
	width: 16px;
	height: 18px;
	top: -3px;
	background: url(../img/handle.png);
}

.mejs-controls .mejs-time-rail .mejs-time-float {
	position: absolute;
	display: none;
	width: 33px;
	height: 23px;
	top: -26px;
	margin-left: -17px;
	background: url(../img/tooltip.png);
}

.mejs-controls .mejs-time-rail .mejs-time-float-current {
	position: absolute;
	display: block;
	left: 0;
	top: 4px;

	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #666666;
	text-align: center;
}

.mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; }

Step 9 – The Green Gradient

To finish our tutorial we only need to add a green CSS3 gradient that will be used on the progress bar and volume slider.

.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	background: #82d344;
	background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%);
	background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%);
	background: -o-linear-gradient(top, #82d344 0%, #51af34 100%);
	background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%);
	background: linear-gradient(top, #82d344 0%, #51af34 100%);
}

Conclusion

We’ve successfully coded this Video Player. If you have any question let me know in the comments. Also don’t forget to leave some feedback and share it with your friends. Follow us if you want to be the first to know about the latest tutorials and articles.

Yay! It’s time for a new free giveaway and we are happy to present a wonderfully creative collection of Futurico – Free User Interface Components (PSD). We think that these are so far the greatest user interface components we have shared with you guys and we hope you will agree with us on this.

Better see it for yourself and wait for updates because this giveaway will be totally special. We will update it every month with new cool elements so that our beloved readers will have tons of possibilities to use them.

As we have always stated, this wouldn’t be possible without the help of our designer friends and this time we would like to thank Vladimir Kudinov (Behance Portfolio) for his great help.

This truly creative designer is from a small town near the Ural Mountains – Ozersk and he’s had an interest for computers since his early years of childhood. Although his first passion was coding, he has developed a strong interest towards design and he decided to move to Moscow in order to follow his dream. He now creates what he calls “golden” works and we trust him completely because we totally love his designs. Don’t you guys?

Release Date: 21.11.2011
Last Update: 07.05.2012
Version: 1.1

== Changelog ==

= 1.1 =
Fix a few bugs.
New elements added. – Preview

Futurico – Free User Interface Elements Pack

In the field of web designing newer tools are invented and introduced in the market very often. HTML is a language that is used to structure and present contents for the websites. This technology have seen many changes and goes through many improvements since its first introduction in 1990.

Now the latest version of HTML that is known as HTML5 is used to create amazing designs for websites. Both HTML5 and CSS3 are now become one of the most trusted and widely used trend of designing websites to the web designers and developers.

There are reasons why website designers and developers like to use these languages while preparing codes for a website. These languages are really very user friendly. You don’t need to be a highly qualified computer engineer to design websites with them. A basic knowledge of HTML coding can make the process an easier one for the novices as well.

Moreover, there are lots of websites templates that are created with the help of HTML5 and CSS3 to make them perfect for any kind of websites. These templates can be downloaded for absolutely free from the internet and use for creating a stunning website or else you can purchase the premium version of HTML5 and CSS3 website templates and develop an exclusive site.

HTML5 and CSS3 Websites Examples

Adobe – The Expressive Web

OrangeSprocket

Har Du Det I Deg

HTC

Beercamp 2012

Suit Up or Die Magazine

Casey Britt

Lois Jeans

Glamour.biz

Bobadilium

Societe Generale

Whiteboard

Ghost Horses

FiftyThree

lend your leg

Marcus Thomas

KRYSTALRAE

Capitol Couture

Air Jordan 2012

Bikes aus Düsseldorf

Nature Valley Trail View

Pulpfingers

Discover Bagigia

Superlovers

Soleil Noir 2012

Guns N Roses