Although I didn't like CSS animations at first, the more I work with it, the more I do like the way it's implemented. A couple of days ago, I visited a website called Pubwich. The overall design of the website looks pretty good, but the part with the social media buttons attracted me even more. When you hover a icon, a small tooltip is displayed with the name of the social media. All other icons have a low opacity.
I wanted to take this concept and bring it to the next level using CSS3 transitions. The goal was to slowly fade-in and fade-out the opacity changing, and animate the position of the tooltip a little bit. With that in mind, I was able to create a beautiful social media icons display using CSS3.
The example works with all
-webkit based browsers (Safari and Chrome), but also in Firefox 4. I've included a jQuery version as well, to be used as a form of "backward compatibility". You can also see how the same effect can be achieved using CSS and jQuery.
Although the code and effect is very minimal, it'll give your website a very professional look. Let's dive into the code to see how you can implement something like this on your own website. Take not this effect can be applied to more buttons as well, not only social media icons.
Tags: css3 animation jquery social icons tutorial
Like I said in my previous article, all information about HTML5 is way too big to put into one blog article. We first looked at what HTML5 microdata can do for us, and today we'll dive into another feature W3C added to their HTML specification. It's called custom data attributes (by developers mostly referenced as
data-* attributes), and I'll explain what it is and what problems it fixes for us.
Tags: html5 data custom attribute tutorial
HTML5 is booming. One of the main reasons more and more articles about this subject are popping up on the web, is because more and more webbrowsers are supporting it. Even the most feared browser by webdevelopers "Internet Explorer" is making huge progress to make IE9 HTML5 ready. The demo's Microsoft created tell us enough already.
But what exactly is HTML5? This subject is way too big to place into one blog article, but I'm trying to handle several aspects of the subject in several posts. For today, we'll take a look at one of the new features of HTML5 called microdata. I'll explain what it is, and why you should start using it.
I assume you don't want to read any further, if you can't start using this HTML5 microdata right now. Lucky for you, microdata is one of the features that you can start using today already! Browsers that don't (fully) support HTML5 will completely ignore the microdata. For those who completely love SEO: Search engines will absolutely love microdata.
Tags: html5 microdata microformat tutorial vocabulary
About the author: This icon freebie was created by Juan Pablo from IconShock, exclusively for Marcofolio.net. You can also follow him on Twitter.
Time for yet another high quality freebie for you to use! This time, our friends at IconShock help us out and provide us with a great icon pack. The icons included in this set can be used for any CMS. It contains the following images: Control panel, gallery, image, page, post, publish, theme editor, tools, user login and user. Great to polish your website just that little bit!
This icon pack includes 10 highly detailed icons, both for personal and commercial applications. All icons are in PNG format, with a size of 256x256 px.
I hope you enjoy them and use them well.
Tags: cms iconshock freebies icon icon pack
Last week, I came back from a short vacation to Italy. I had a great time, visited Rome too (including all the tourist attractions you need to see over there), but also visited the ruins of Ostia Antica. It's pretty impressive to see what the Roman people were capable to build, such a long time ago (it's not as impressive as the the Colosseum, but still).
While my girl and I were walking - in the burning sun - through Ostia Antica, she came up with the great idea to take pictures of the impressive ruins to be used as textures for designers. She's the one that took these 14 pictures of ancient stones, ready to be used in your next design work.
I hope you enjoy them and use them well. The textures are totally free for all kinds of use. All pictures are 1500px in width.
Don't forget to check out some other great high quality textures that are released on this website before. I want to thank my girlfriend for the idea and taking these useful texture pictures.
Tags: ancient stones high res freebies textures photoshop
|<< Start < Prev 1 2 3 4 5 6 7 8 9 10 Next > End >>|
|Results 31 - 45 of 360|