CSSOff final placement: 34th

OK, this is my first post after months and it’s not the latest news, but still important for me. After waiting a long time i got my scores and feedback from UnmatchedStyle CSSOff 2012.

To put it in a nutshell: Final Score: 68.67pts | Final Placement: 34th

Loving all the custom hover animations in here. Topbar, logo, title, obstacles and prizes all have very fun transitions. Form could use some validation, select input display could be customized more, and I wish the timer did something besides loop. Overall, pretty solid entry.

Yeah! What a surprise! You can watch my result here: http://dl.dropbox.com/u/4799476/CSSOFF-GH/index.html and, if you want, the winners here: CSSOff Winners 2012

CSS3 badges using UTF-8 character

The idea was to generate badges for different types of users on the fly. Just by defining a new color. The solution is using an UTF-8 character for the corner: ◤ U+25E4

You can see the example page here:
CSS3-badges

1. Step: Use UTF-8

<meta charset="utf-8">

2. Step: The badge style

.badge {
  font-family: Arial,san-serif;
  font-size: 10px;
  line-height: 1em;
  padding: 0px 15px 0px 3px;
  text-transform: uppercase;
  border: 1px solid #ccc;
  color: #666666;
  position: relative;
  background: #f1f1f1;
}
.badge:before {
  content: '\25E4';
  width: 12px;
  height: 12px;
  display: block;
  background: #fff;
  position: absolute;
  right: -1px;
  bottom: -1px;
  font-size: 15px;
  line-height: 10px;
  color: #bdbdbd;
}
.badge:hover {
  color: #2D3441;
  cursor: pointer;
}

3. Step: The badge markup

<span class="badge" title="Default Badge">Default Badge</span>

CSS3 Textbuttons

For this kind of buttons no images are needed. It’s just CSS3 and text. All icons are taken from the UTF-8 encoding table. This provides the facility to change the icon color and size just with CSS font settings.

You can see the example page here:
CSS3_textbuttons.html

1. Step: Use UTF-8

<meta charset="utf-8">

2. Step: The button style

.button {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  line-height: 1.5em;
  height: 1.5em;
  border-radius: .75em;
  border: 1px solid #666;
  padding: 0 .5em;
  margin: 0 10px 10px 0;
  background: #7abcff;
  background: -moz-linear-gradient(top, hsla(210,100%,74%,1) 0%, hsla(210,91%,67%,1) 44%, hsla(210,84%,59%,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(210,100%,74%,1)), color-stop(44%,hsla(210,91%,67%,1)), color-stop(100%,hsla(210,84%,59%,1)));
  background: -webkit-linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
  background: -o-linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
  background: -ms-linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
  background: linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );
  text-shadow: 1px 1px 1px #666;
  box-shadow: 1px 1px 2px #666;
}
.button:hover {
  color: #eee;
  text-shadow: none;
}
.button:active, .button.current {
  color: #eee;
  text-shadow: none;
  box-shadow: none;
  -moz-box-shadow: none;
  background: #4096ee;
  background: -moz-linear-gradient(top, hsla(210,84%,59%,1) 0%, hsla(210,91%,67%,1) 56%, hsla(210,100%,74%,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(210,84%,59%,1)), color-stop(56%,hsla(210,91%,67%,1)), color-stop(100%,hsla(210,100%,74%,1)));
  background: -webkit-linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
  background: -o-linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
  background: -ms-linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
  background: linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#7abcff',GradientType=0 );
}

For the gradient style the http://www.colorzilla.com/gradient-editor/ was used again.

3. Step: Add the icon

.button:before, .button:after {
  font-size: 1.125em;
}
.button:before {
  margin-right: 5px;
}
.button:after {
  margin-left: 5px;
}
.button.email:before {
   content: "\2709";
}

The :before or :after pseudo element is used to place the icon inside the button. The font-size makes it a little bit bigger and the margin seperates it from the other text. At last the content with the HEX code of the UTF-8 character is needed. Notice, that the HTML 4.0 character entities or the numerical HTML encoding of the Unicode character dosn’t work.

4. Step: The button markup

<a href="#" class="button email">Email</a>

Beautiful content box using CSS3

Beautiful content boxes with CSS3To create this kind of content box you just need a wrapper for the box and two pseudo elements: before and after. No background images are needed.

You can see the example page here:
content_box.html

 

1. Step: The HTML5 markup

<article>
  <div class="content_box_polish">
    <div class="content_box">
      <figure><img></figure>
      <h1>Headline text</h1>
      <p>Some Lorem ipsum text.</p>
    </div>
  </div>
</article>

This markup creates an small article. The content is just an image, headline and some text. For the box two DIV’s with different classes are needed: .content_box_polish as a wrapper to arrange items around the box and content_box to style the box.

 2. Step: The Box Style

At first the position of the .content_box_polish must be relative to have a fix point for the :before and :after elements. The next thing is to style these elements and set them to the right position and the right z-index.

.content_box_polish {
  position: relative;
}

The :before element was used for the dark shadow at the top of the box.

.content_box_polish:before {
  content: "";
  display: block;
  height: 10%;
  width: 80%;
  margin: 0 10%;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  box-shadow: 0 0 10px 2px hsla(0, 0%, 0%, 0.25);
  position: absolute;
  top: 0px;
  z-index: 10;
}

The :after element was used for the light glow.

.content_box_polish:after {
  content: "";
  display: block;
  height: 1px;
  width: 50%;
  margin: 0 25%;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  box-shadow: 0 4px 4px 2px hsla(0, 100%, 100%, 0.5);
  background: #DEDEDE;
  position: absolute;
  top: 0px;
  z-index: 1000;
}

At least just some styles for the real box are needed.

.content_box {
  background: #dddddd;
  background: -moz-linear-gradient(top, hsla(0,0%,87%,1) 0%, hsla(0,0%,100%,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,87%,1)), color-stop(100%,hsla(0,0%,100%,1)));
  background: -webkit-linear-gradient(top, hsla(0,0%,87%,1) 0%,hsla(0,0%,100%,1) 100%);
  background: -o-linear-gradient(top, hsla(0,0%,87%,1) 0%,hsla(0,0%,100%,1) 100%);
  background: -ms-linear-gradient(top, hsla(0,0%,87%,1) 0%,hsla(0,0%,100%,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#ffffff',GradientType=0 );
  background: linear-gradient(top, hsla(0,0%,87%,1) 0%,hsla(0,0%,100%,1) 100%);
  padding: 1em;
  position: relative;
  z-index: 100;
}

For the gradient style the http://www.colorzilla.com/gradient-editor/ was used. To bring these three elements to the right order the z-index is needed. So we have the dark shadow, :before, behind the .content_box and the lighter glow, :after, in front of the content box.

You can easy change the effect by trying out some different values for box-shadow, width, position or whatever you want.