About design and nearby

Customize Checkboxes with CSS3

Posted: July 5th, 2013 | Author: | Filed under: Tips and Tricks | Tags: , , | No Comments »

Sometimes working on the project I feel a lack of customization of form elements, the more if everything is to fit the overall style of website or app. This case the very solution is to use my own images for checkboxes.

I found the way to realize that with the ‘:checked’ pseudo selector – for targeting an element based on its checked or unchecked status.

The HTML:

  1. <input type="checkbox" />
  2. <label>Check box 1</label>

To tie together input tag and label tag, I need to add ‘for’ for label and relevant ‘id’ for input:

  1. <input id="Checkbox1" class="css-checkbox" type="checkbox" />
  2. <label class="css-label" for="Checkbox1">Check box 1</label>

When you click the label it will check the checkbox. The result is:


Read the rest of this entry »

Share Button

Windows 8 Metro Inspired Tiles with Javascript and CSS3

Posted: February 27th, 2013 | Author: | Filed under: Creative Process, Tips and Tricks | Tags: , , , , | 1 Comment »

After Windows 8 release there is nobody all over the world who is indifferent to the platform interface and functionality. Some people like it, some ones count advantages and disadvantages. And I decide to play a little with the tiles-based interface and produce a sweet design.

You can place any content you need into tiles, actually, tiles represent your app or sub modules.
With css3 and a touch of javascript I produced (I hope) simple, sufficient and responsive solution ))

Windows 8 Metro Inspired Tiles

Styling look & feel:
To stylish tiles I use ‘background-image’ property to create a nice gradient effect, draw borders and box shadow:
Read the rest of this entry »

Share Button

Smooth Scrolling with jQuery

Posted: December 24th, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , | 4 Comments »

If you ever have to read a long document, scrolling all the way through it to find what you need can be annoying. This case a smooth scroller seems to be a solution, it helps with navigation and you enhance usability on the website with sleek navigation controls.

As for my mind, such sweet )) scrolling is fine for pages which list all links at the top and the relevant content – below (FAQ pages, Terms pages) or ‘back to top’ links.

This technique is based on the jQuery library.

There are 2 parts of scrolling script: the first script is for scrolling to the very top of the page and the second one – to scroll to the certain place of the page.

1. Scroll the page to the top

At the body section I defined elements with class ‘anchorLink':

  1. <a href="#" class="anchorLink">Top &uarr;</a>

When the link with the class ‘anchorLink’ is clicked, the smooth scroll effect is created using the scrollTop function (I set the speed as ‘slow’):

  1. $(".anchorLink").click(function () {
  2.          $("html, body").animate({ scrollTop: 0 }, "slow");
  3.          return false; // prevents the default action of the event being triggered
  4. });

Read the rest of this entry »

Share Button

Detecting Browser Window Size/ Resize with jQuery

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

Once I have been playing around with the responsive design for a WordPress-powered website. I should detect window/ browser size with jQuery and hide the certain element if the width is less then 900px (yes, I do know how to use CSS Media Queries to adapt pages style to various display widths and use em units and percentages and min-width and max-width in my CSS to get a proper flexible layout or how to check the user agent, it was just a special case).

So I decided to get the current computed width via jQuery:

  1. $(window).width(); // returns width of browser viewport
  2. $(document).width(); // returns width of HTML document

Read the rest of this entry »

Share Button

Creating a Business Logo

Posted: October 24th, 2012 | Author: | Filed under: Creative Process | Tags: , , , | No Comments »

Even if your business is not a cutting edge tech start up, the overall identity should be unified, clean and impressive. Your logo is a visual representation of everything your company stands for, it establishes a brand identity.

To create a high quality logo a designer gathers the information about client’s business (what they do, who their target audience is, what their aims are and how they want to be presented). A well-done logo should express customers and generate a warm feeling for the company, it ties all business’s aesthetics together.

New Zealand classified company logo ideaLong story short, let me use an example from my sweet web designer’s life.

I created a logo for a classifieds company in New Zealand named Adboard. I am to provide a concept, web design (including user interface design) and a logo.

Develop a concept
A design concept is the idea behind a design. Such developing is absolutely an individual process – there are a lot of ways to generate an idea and represent it.
Read the rest of this entry »

Share Button

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

Let's discuss your project now