G$earch

Showcase of Cool Websites With Big Video Headers

Posted by Harshad

Showcase of Cool Websites With Big Video Headers


Showcase of Cool Websites With Big Video Headers

Posted: 17 Jan 2014 07:01 AM PST

When it comes to web design, having videos or animations in the background is certainly one of the best ways to attract the attention of visitors. If you wanna see some examples of that, check out the showcase we previously feafured about websites with full-blown video backgrounds.

Videos don’t have to make up large backgrounds for them to be effective though. Even on a smaller scale, in website headers for example, videos can often prove to be just as effective for presenting information to visitors and attracting them to explore your website further. Besides, embedding a video into a website header using jQuery and HTML is no longer as difficult as it used to be.

With that in mind, we would like to share with you today a compilation of 20 stunning websites with big video headers. Be sure to click on the links provided to see all the beautiful videos in action.

Exponent

BKWLD

L’attrape rêve

Risk Everything

Hover Studio

G-Star Raw

Poolhouse Digital

Vanilla Video

Art, Copy & Code

Made by Hangar

Adidas Group

Packdog

Mahédine Yahia

Sketchin

Toyota

Harvest

It is a girl

SomProduct

Tool

Fresh Cotton


    






Skeuomorphic PSD to Flat Design With Skeuomorphism.it

Posted: 17 Jan 2014 05:01 AM PST

So skeuomorphism is out and flat design is in, which is old news but hey, trends can be real fickle and designers are at the mercy of trying to keep up. If you have skeuomorphic designs that you want to turn flat, here is a tool that is going to be a big help.

Skeuomorphism.it is a free Photoshop extension, by Roy Barber which turns skeuomorphism design to flat design in just a single click. If you find anything skeuomorphic (icon, background or website templates) that you want to turn flat, this is the plugin to get.

Installation

Note that to be able to use this extension, you must at least have Photoshop CS6 installed on your machine. Now let’s head to the Skeuomorphism.it homepage and download the extension first.

Double click the Skeuomorphism.it.zxp file and Adobe Extension Manager will be opened. Accept the license agreement. Before the installation process begin you must first verify the publisher of the extension. Install it and restart your Photoshop if necessary. You’re now ready to use the extension.

Just Takes A Click

We’re going to use this Facebook Icon by Christophe Tauziet for the demo. This is the original icon.

On your Photoshop you should see a new panel in the right. If it doesn’t appear simply head to Window > Extensions > Skeuomorphism.

Click the Work The Magic button and all the shadows, inner shadows, gradients or light will be removed or reduced to make the design flat. Check it out.

Limitations

When you use this extension, not all skeuomorphism design will be transformed flat as you expect it. Sometimes the original color or shape of the design may change. In this Subscribe form from Tempees you will notice that the subscribe button is in blue.

When I tried to turn it flat with the plugin, the subscribe button turned grey. If this doesn’t work for you, Ctrl+Z to revert to the initial state.

Final Thought

I just have to say that the name of this plugin is ironic but it is a real useful time-saver and it makes the transformation almost instantaneous. You don’t have to repeat or do the design process from scratch. All it takes is a click and your designs are flat. How cool is that?


    






15 Email Logo Designs For Your Inspiration

Posted: 17 Jan 2014 02:01 AM PST

Mail has become such an integral part of our lives that we can hardly remember how life had been without it. These days, the market is saturated with so many mail services (some untraceable and anonymous) that we are treated with really cool email logo designs.

Although the shape of an envelope is prominently used as a motif, as the examples below will show you, there is still a lot of room for creativity. Check out this collection of 15 creative email logos to see how far the imagination can stretch.

You might also like these other logo design collections:

MailFox

Flutairmail

Koala Post

Mailephant

Open Mailing

Smartmail

Electro Mail

Fish Mail

Mobile Mail

Mailboat

Mail Corner

Mail Frog

Kogmail

Jentlemail

vammail

Editor’s note: This is a contributed post by Kalpesh Singh, who is very passionate about graphic design and technical writing. He’s always happy to share his passion for social media and graphic design. Get in touch with him on Twitter or Facebook.


    






Adding and Removing HTML Classes Upon Request With jQuery

Posted: 16 Jan 2014 11:01 PM PST

Adding new HTML class is a no-brainer; just open the HTML document, locate what you want to add, insert and name the class. But when it comes to building an interactive website that allows your visitors to engage with it, you might need to modify, insert, and remove the HTML classes upon request.

You can do this with jQuery. This example function below will add and remove my-new-class to the <div>.

 // ## add class $('div').addClass('my-new-class'); // ## remove class $('div').removeClass('my-new-class'); 

We can also use standard JavaScript code to add/remove HTML classes like so:

 // add class document.getElementById('elem').className = 'my-new-class'; // remove class document.getElementById('elem').className = document.getElementByTag('div').className.replace( /(?:^|\s)my-new-class(?!\S)/g , '' ) 

The code as you can see above is less straightforward than when we are doing it with a JavaScript Framework jQuery. But if you don’t want to rely on a framework, you can always use a new JavaScript API called classList.

Using classList API

Similar to jQuery, classList provides a set of methods that allow us to modify HTML classes.

In a case where there is a div with multiple classes, we can retrieve the classes that are assigned in the div using classList.

 var classes = document.getElementByID('elem').classList; console.log(classes); 

When we open the browser Console, we can see the list of the classes.

To add and remove class, we can use .add() and .remove().

 var elem = document.getElementByID('elem'); // add class elem.classList.add('my-new-class'); // remove class elem.classList.remove('my-new-class'); 

Adding multiple classes can also be done by separating each class with a comma:

 elem.classList.add('my-new-class', 'my-other-class'); 

To check whether certain elements contain the specified class, we can use .contains(). It will return true if the class specified is present, and return false if it does not.

 elem.classList.contains('class-name'); 

We can also toggle the class using .toggle(). The following code snippet shows how we bind the .toggle()method with a mouse click event.

 var button = document.getElementById('button'); function toggle() { elem.classList.toggle('bg'); } button.addEventListener('click', toggle, false); 

Check out the demo in action from the following links.

Final Thought

classList is a new native JavaScript API that is also introduced along with HTML5. It is neat and simple, and works in the following browsers: Firefox 3.6, Opera 11.5, and Chrome 8, and Safari 5.1. It is however absent in Internet Explorer 9 and below, so you may have to use the Polyfills when implementing classList API in Internet Explorer.

Further Resource


    






0 comments:

Post a Comment