About design and nearby

Letterpress Effect Using CSS

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

Under “Letterpress Effect” I mean the relief printing of text. Safari and Firefox (3.1+) support this text-transform effect. You can do the same using Photoshop :) but with css it’s more elegant.

letterpress effect
The HTML:

  1.   < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.   <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.   <title>Letterpress Effect </title>  
  5.   <link href="style.css" type=text/css rel=stylesheet/>
  6.   </head>
  7.   <body>
  8.   <div class="letterpress"><h1>Sweet Web Design</h1></div>
  9.   </body>
  10.   </html>

Read the rest of this entry »

Website Design Styles – How to Create the Holistic Website

Posted: April 15th, 2010 | Author: | Filed under: Creative Process | Tags: , | No Comments »

My great passion in life is photography. So when I look at websites I see the finished holistic composition. This composition is invariable the combination of several distinct website design style features – images, layout, typography, illustration, etc.

I believe that for website work the same principles apply as with photography: balance, rhythm, proportion, dominance and unity. My favourite photographer is Michael Kenna, his works illustrate these principles very well. The question is if you are able to apply these principles, to use separate website design style features to create a holistic website or not. For sure – always remember the importance of usability, because the result of your work, the website, should be a practical tool which fulfils its function.

Knowledge of composition alone is not enough to create fresh and unique website design style. Every artist has his own inimitable ‘hand’, his style. The website style created will depend on the objectives of the website, it’s target market, the products or services supplied by it’s owner or the type of information it needs to convey.

Below are some examples of website design styles (just pay attention – designers love mix styles :)

Read the rest of this entry »

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>>

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

Let's discuss your project now