webslave.ws

I suppose my sharing code thumbnails at times which I use in my daily studies and in my projects will be very useful to guide some people in this work and to create short ways.

In the design of Web 2.0, requirement is almost round corners. To perform round corners is a torture most of the time. Those regular in their codes complain that if they use Javascript, page will slow down in terms of both render period and file size, they think if they use graphic, page will slow down again. They have to solve through pictures most of the time.

If very wide round corners are not used in the design, you can do as I do. I use a code of SpiffyCorners which I set and compressed myself. In short, SpiffyCorners enables you to design round corners with a few HTML elements and some CSS codes without using any Javascript or graphic.

As I said, I enjoy setting everything, so I minimized the codes which SpiffyCorners created and made appropriate for myself:
Everything started with customer uprising! World’s 8th wonder, internet has become life itself and regards the most important activity of human life as prior: competition. At this point, while technical gurus are designing infrastructure and logic of the work, brand experts have found a name for this, web 2.0.

As you can see in the example, our round corners function very smoothly! What’s more, it has been cleaned of its problems such as narrowness of fields lacking in SpiffCorners. Let’s come to the codes:

CSS codes:

.round, .round * {display:block;}
.round1, .round2, .round3, .round4, .round5 {border-left:1px solid #fff;border-right:1px solid #fff;}
.round *, .round1, .round2, .roundfg {background:#fff;}
.round *{height:1px; overflow:hidden;font-size:.01em;}
.round1, .round2, .round3{ margin:0 1px 0 1px;padding:0 1px 0 1px;}
.round1{margin:0 3px 0 3px;}
.roundfg {padding:0 5px 0 5px;}

HTML codes:

<div>
<b class="round"><b class="round1"><b></b></b><b class="round2"><b></b></b><b class="round3"></b><b class="round4"></b><b class="round5"></b></b>
<div class="roundfg">
 
<span style="text-decoration: underline;">Your Table of Contents HERE
</span>
</div>
<b class="round"><b class="round5"></b><b class="round4"></b><b class="round3"></b><b class="round2"><b></b></b><b class="round1"><b></b></b></b>
</div>

You can write your colour codes into the spaces which are written in red in CSS codes and use them in your projects without any worry.