Showcase of Cool Websites With Big Video Headers |
- Showcase of Cool Websites With Big Video Headers
- Skeuomorphic PSD to Flat Design With Skeuomorphism.it
- 15 Email Logo Designs For Your Inspiration
- Adding and Removing HTML Classes Upon Request With jQuery
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. Recommended Reading: 60 Beautiful Examples Of Websites With Full-Blown Video Backgrounds |
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. InstallationNote 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 ClickWe’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. LimitationsWhen 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 ThoughtI 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. Recommended Reading: 80 Creative Logo Designs For Your Inspiration You might also like these other logo design collections:
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 // ## 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 Recommended Reading: Obtaining User Location With HTML5 Geolocation API Using classList APISimilar to jQuery, In a case where there is a 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 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 elem.classList.contains('class-name'); We can also toggle the class using 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
Further Resource
|
You are subscribed to email updates from hongkiat.com To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
0 comments:
Post a Comment