About design and nearby

The Image Rollover Effect (Using CSS) – Just Another Way

Posted: March 30th, 2010 | Author: | Filed under: Tips and Tricks | Tags: , | No Comments »

The image rollover effect is an effect when one image replaces another as your mouse moves over, I’ve wrote about it before. This example is just a special case. There are no any images, you can find the image when hover your mouse on the link (button).

Here is the HTML used to create this rollover. It’s much shorter and easier to remember than a JavaScript rollover:

  1. <div  id="menu">
  2.    <ul>
  3.      <li><a class="home" href="#">Home<div>&пbsp;</div></a></li>
  4.    </ul>
  5. </div>

And the Stylesheet:

  1. #menu ul li div {
  2. display: none; /* there is no image at the beginning, it's hiding for browsers */
  3. position:absolute;  
  4. }
  5. #menu ul li .home div {    
  6. width: 28px;    
  7. height: 28px;    
  8. background: url(images/home.gif) no-repeat; /* my image */
  9. margin-left:5px; /* moving right */
  10. margin-top:-35px; /* moving top */
  11. }
  12. #menu ul li a:hover div{ display: block;} /* means that the element is displayed as a block – to show the link as an image (you have to define height and width) */

This will create one rollover image per a link (button).

Live example: check the example >>

The Three Components of Website’s Success

Posted: March 21st, 2010 | Author: | Filed under: Creative Process | Tags: , , | 1 Comment »

I find that there are three main components to a successful website: content, design and technology. They compliment each other and in whole help to open website’s full potential.

the three components
If you have well-written content and a user can easily navigate the website, studies have shown that the user will spend more time looking through your website. The content should be useful and interesting, designed for the target audience, and with the application of advanced technologies, your visitors positive experience will be guaranteed.

The total Web Design package should work toward the presentation of content. One of the rules of creating a successful web presentation is to always try maintain a good balance of content, design and technology, while keeping a close focus on the customer experience.

Your website is the “Calling Card” of your business on the web, and could give a new customer either a good or bad first impression of your business.

It all rests with you to help achieve it’s success.

Just come out strong, and put your best foot forward!

The Rollover Effect with CSS

Posted: March 15th, 2010 | Author: | Filed under: Tips and Tricks | Tags: , | No Comments »

The image rollover effect is a widespread effect (when one image replaces another as your mouse moves over), you usually see it on many web pages. I prefer to use rollover effect (with CSS) for navigation buttons.

You need only 2 images (“image1.jpg” and “image2.jpg”) and some skills ;) to do the same this way.

Stylesheet:
I create a class “rollover”:

  1. a.rollover {
  2.  background: url('images/image1.jpg');
  3.  display: block;
  4.  width: 36px;
  5.  height: 128px;
  6.  }

And “:hover”. See, the image2 replaces the image1- when you move your mouse over:

  1. a.rollover:hover {
  2.  background: url('images/image2.jpg');
  3.  }

And my HTML-code:

  1. <div>
  2.          <a class="rollover" href="page.html"></a>
  3. </div>

Usually I use rollover effect with preload images.

Live example: click here>>

Preload Images with CSS

Posted: March 14th, 2010 | Author: | Filed under: Tips and Tricks | Tags: , | No Comments »

When I have been working at one web site, I’ve got a trouble: some images (buttons) were loading too slow. I find that I have to speed up page display and deside to fix this using CSS – yes, you don’t need to paste JavaScript to preload your images.

First I create a class with display set ‘none’ at the ‘head’ section (or sure! you can place this class at stylesheet.css):

  1. .hiddenPic {display:none;}

And the ‘body’ section:
My buttons (menu):

  1. <div><a href="about.html"><img src="images/image1.jpg" /></a></div>
  2. <div><a href="gallery.html"><img src="images/image2.jpg" /></a></div>
  3. <div><a href="publication.html"><img src="images/image3.jpg" /></a></div>
  4. <div><a href="events.html"><img src="images/image4.jpg" /></a></div>
  5. <div><a href="contact.html"><img src="images/image5.jpg" /></a></div>

I add image tags for my pictures to the bottom of the home page (to the bottom of the page – before </body> – to display as soon as possible, prior to the browser starts to open the next page; then you can reference to the images anywhere and the images will load from browser cache memory):

  1. <img src="images/image1.jpg" height="128" width="36" class="hiddenPic">
  2. <img src="images/image2.jpg" height="128" width="36" class="hiddenPic">
  3. <img src="images/image3.jpg" height="128" width="36" class="hiddenPic">
  4. <img src="images/image4.jpg" height="128" width="36" class="hiddenPic">
  5. <img src="images/image5.jpg" height="128" width="36" class="hiddenPic">

(Note: the height and width attributes can help a little with speed, so I use them).
And it’s working!

The Creative Process for iPascher logo

Posted: March 13th, 2010 | Author: | Filed under: Creative Process | Tags: , | No Comments »

Introduction
Your logo needs to have an effect to your brand infallible – it will play a exceeding role in your brand recognition.

Research
My client’s business is e-commerce – selling books with low prices (“i Pas cher”) through the internet. So I’ve got a thought: if their prices low, may be so low, that purchase is like a gift. It’s cheap like “buy something for a song”.

drawings
a book

Drawings
The next my step was a drawing. I drew books, gift boxes, bows for gift boxes… I drew and drank tons of coffee (coffee is for my creativity).

a gift box
a styled book

Choosing the Typography
I’ve got it! Fine, but the question is which font I am to use. The customer asked me about IPhone style, so I use Helvetica-Condensed-Thin (I cut it a little, so what?). And a glassy effect.

a styled gift box
a Web2 box

Probably my process is too simple, but I hope I tell you something useful – how it works :)

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

Let's discuss your project now