CSS Tricks: Giving a Blue Jeans Stitched Appearance

 Giving a Blue Jeans Stitched Appearance

Playing with CSS and CSS3 has always been fun playing. I am still learning the various aspects of style sheets and my learning has been part of the problem solving. While reviewing fashion related web content, one of the web designer wants to give a Blue Jeans stitched appearance to a div panel. Here is a simple style that evolved quickly:

  .BlueJeans {
    border: 2px dashed #fff;
    padding: 25px;
    background: #4e6590;
    color: #fff;
    margin: 10px;
    box-shadow: 0 0 0 4px #4e6590, 2px 1px 6px 4px RGB(78, 101, 144);
    border-radius: 10px;

The important CSS elements play an important role in giving this effect:
backgound color: #4e6509 gives a blue background color and is also used in box-shadow. The stitching look is due to border property 'dashed' of white color and is of 2 pixels wide. box-shadow is another important element which extends the blue background and completes the appearance.

You have to dream before your dreams can come true.
A. P. J. Abdul Kalam