iLy.li

Porcine CSS3/HTML5 contest

I was thinking a long time before I invented how to give someone my additional ticket to onGameStart conference. Today I decided to make css/html contest and created css3-graphic task. I considered lots of simple vector images and chose… a pig. I expect that you will create in html/css very similar pig.

The Pig

Let me know you the pig. Below you see three screens (FF 6, Chrome 13, Opera 11) of my HTML/CSS version.

Rules

• There is only one prize in contest and will be just one winner.
• You should write you code in simple HTML and CSS in one html file (no Javascript, no canvas, no svg’s, and of course no images). Your code have to be HTML5 valid (check it by validator.nu) and should look good in my browsers: FF6, Chrome 13, Opera 11.
• I expect you will use this starting code:

  1 2 3 4 5

  < !DOCTYPE html> <title>Just a CSS pig</title> <link href="http://blog.ily.li/reset.css" rel=stylesheet /> <style>#pig{width:570px;height:600px;position:relative;margin:0 auto;border:1px solid #eee}[...]</style> <div id=pig>[...]</div>

  You can add your code only by replacing spaces marked “[...]“. [you can also remove space before '< ' and '!' in doctype, here just my blog editor add it every time I'm saving]

• Pig should fit in div#pig.
• You image should consist of all elements shown on screens. I allow only small differences (about, hmm 5-10%?) in measuring sizes, rounding, positioning (I mean It needn’t be perfect – as mine pig: don’t you think it is a little cross-eyed?).
• Including external files, using URLs in code (etc) is not allowed (the only one exception is my reset.css file, attached to starting code); all code used to design pig (css, html) should be written in your html file.
• What is the most important, and what is rated:
  1. Similarity to given pig  (if your pig will be very different, but I still want you to participate in contest I’ll give you +50 penalty chars. But if it’ll be very-very different, I probably have to disqualify your work. I hope I won’t do it.).
  2. Length of your file (code should be as short as it is possible; don’t forget about removing unnecessary spaces and enters, but just in your part, please don’t do it with starting code!).
  3. If there will be projects with a big similarity and with the same number of chars – I’ll take into account the project send time).
• Please send the files in TXT (utf8) format, to avoid any problems with my email account. Send it to email: contest[at]ily.li
• One person can send to me 5 versions of its pig. I will consider the latest one (or the fifth one if it’ll be more), which meets all requirements of the contest.
• Contest ends at 11.59 PM, 3th of September 2011 (Saturday).

Tips

To make contest simplier, here you are some sizes and params:

• borders:
  • 9px: head, ears (and lines in ears), body and feet
  • 6px: nose
  • 4px: tail
• colors:
  • piggy-pink: #FFAAAA
  • pink-shadow: #AF7575
  • borders, iris, nostrils: black
  • eyes (inside): white
• sizes:
  • head: 355 x 370 px
  • nose: 120 x 150 px
  • eyes: 90 x 100 px
  • iris, nostril: 30 x 30 px
  • body: 470 x 470 px
  • ear: 110 x 90 px
  • tail-width: 5 px
  • foot: 140 x 90 px
• tail consists of 4 parts: one and a half circle, and two lines; tail creating sketch
• ‘lines’ inside ears are also half ellipse

Enjoy and good luck! :)

 If you have any questions, doubts etc., feel free to write it in comments. Unfortunately, I will be on vacation, but I’ll try check comments often.