About design and nearby

Cufón.js and Hover Effect

Posted: March 8th, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , , , | 2 Comments »

One of the problems for Cufon developers is the strange behaviour of elements powered by Cufon.js which have defined :hover state in the CSS stylesheet. I stumbled upon this and tried so many different things to make it work the correct way… My

  1. .cufon a:hover {color:#e7aa05;}

had no results, so after reading the official docs I set hover option for the certain element at the very beginning of my file – sure, after loading my custom Cufon script. The key phrase for the solution is ‘hover calls must go first’, because the hover option cannot be added to an element that has been replaced before:

  1. <script type="text/javascript"> // should be called in the first place
  2.     Cufon.replace('a.cufon', {
  3.         color: '#222',
  4.         hover: {
  5.             color: '#e7aa05'
  6.         }
  7.     });
  8. </script>
  9. <script type="text/javascript"> // should be called after
  10.     Cufon.replace(".cufon", {
  11.         textShadow: '1px 1px 1px white'
  12.     });    
  13. </script>

Live example: check the example >>

Related post: Using Non-standard Fonts with Cufón.js
Related post: Using Cufón.js with jCarousel

How to Make Sweet Buttons with CSS only

Posted: February 29th, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , | No Comments »

Buttons are a very important element of any website, through buttons visitors trigger an action and interact with content.

As for my mind, CSS buttons are much more efficient than image-based buttons. They are rather easier to handle. It’s pretty simple to create dynamic buttons with cross browser compatibility, let me show the way I do it.

Since I need my button to be flexible, I make its width expand with the size of the button’s text and I use an <a> tag for that:

  1. <a class="button" href="#">CSS Button</a>

Read the rest of this entry »

Your Mobile Website: be Up-to-Date!

Posted: February 22nd, 2012 | Author: | Filed under: Creative Process, Mobile Design and Development | Tags: , , , , | No Comments »

Using mobile devices to access the web has become so integrated into our everyday life, that there is no possibility to ignore such segment of the market anymore. Unluckily, the mobile arena is needed some specific knowledge and introduces a complexity that can be difficult for developers to accommodate. Mobile development is more than cross-browser, it should be cross-platform.

Sweet Web Design goes Mobile

One day surfing the web I found the attractive (as for my mind) solution – Mobile Website Content Management Platform by Jaenovation, Inc. As a designer I work with such content management system (CMS) as WordPress, Joomla, with osCommerce and phpBB Forum, so I was interested to try a new web application for mobile development. Without hesitation I started to produce my own mobile web site.

The offered tool is easy to use, indeed – it took me less than an hour to complete the work. Have to say, that Jaemobi allows to create any look you want with Jaemobi’s advanced widgets and plug-ins. A user can build custom designed mobile websites, mobile online stores, mobile campaigns and landing pages effortlessly. Jaemobi also offers many cutting edge mobile solutions like mobile ecommerce which provides fully integrated paypal mobile payment gateway – for managing inventory, selling tickets, collecting donations, etc. Besides with all new plans, clients can also create their own landing pages for different campaigns and publish them with their unique QR Code.

It’s cloud-based, with fresh and sweet look and feel.. I loved it at first sight )

Related post: Mobile-friendly jQuery Lightbox Solution

Creating a Clickable World Map with jQuery

Posted: January 21st, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , , | No Comments »

Usually I use Google Maps for websites and quite happy with their service. But one day I needed to implement the clickable world map with the possibility to highlight countries.

The widget itself consists of two parts:
– a set of polygon data representing the countries of the world – to create a layer above that responds to all mouse movements;
– a layer with a background image below.
So all coordinates are related with the background image and every area has its hyperlink.
Read the rest of this entry »

Are You a Team Player?

Posted: January 7th, 2012 | Author: | Filed under: Effective Management, Tips and Tricks | Tags: , , , , , | No Comments »

It’s impossible to overestimate such trait as ‘being a team player‘. Because if you are a part of a team, you do need to communicate with others while working at common projects. And the result of such cooperation is wrapped up in your congruence.
being a team player

I’m fond of playing badminton. And according to my private experience, have to say that at a pair game a team of two weaker players is able to gain victory over strong strikes if their movements are not coordinated quite well. If you are playing doubles, you must smash them before they smash you. If you understand every movement of your partner, if your pair works well together – then you control the whole court throughout and drive the play in the right direction.
Read the rest of this entry »

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now