Jump to content

boxscore design

1990hornet

By 1990hornet
in Concepts

Recommended Posts

1990hornet

1990hornet

Posted
Posted

This is more web design than image design but I wanted input from sports fans. I created this for use on my Rays blog when I recap/review games. So tell me what you think. The version you see here is an image but when it's actually used it's css and html code. As I designed it, it has the ability to express all 30 teams colors on the team label. And I was going for like a manual score board like Fenway has. So tell me what you think :)

scoreboards.png

For reference and those tech savvy, here's the coding.

Link to comment
Share on other sites
wyopokes2

wyopokes2

Posted
Posted

This is more web design than image design but I wanted input from sports fans. I created this for use on my Rays blog when I recap/review games. So tell me what you think. The version you see here is an image but when it's actually used it's css and html code. As I designed it, it has the ability to express all 30 teams colors on the team label. And I was going for like a manual score board like Fenway has. So tell me what you think :)

scoreboards.png

For reference and those tech savvy, here's the coding.

Really neat! Are you going to put these on a website? I really am interested in seeing the code behind it. When I click the link it says the page isn't available. For being done in CSS and HTML I think it's really cool. I wanna do something similar to use with my High School football site.

 

 

Link to comment
Share on other sites
bucknut40

bucknut40

Posted
Posted

This is more web design than image design but I wanted input from sports fans. I created this for use on my Rays blog when I recap/review games. So tell me what you think. The version you see here is an image but when it's actually used it's css and html code. As I designed it, it has the ability to express all 30 teams colors on the team label. And I was going for like a manual score board like Fenway has. So tell me what you think :)

scoreboards.png

For reference and those tech savvy, here's the coding.

Really neat! Are you going to put these on a website? I really am interested in seeing the code behind it. When I click the link it says the page isn't available. For being done in CSS and HTML I think it's really cool. I wanna do something similar to use with my High School football site.

Ive always wanted to do something like that to for my high school football website to, very cool idea

Bucknut40.pngOhioStatebanner.png

#RaiderUp

Twitter-@R_Redinger4 My Blog-Southwest Ohio Football

NCFAF-Wheeling Coal Miners,NCFAF-FCS Lake Erie Shoremen, NCFAB-Wheeling Coal Miners

Link to comment
Share on other sites
loogodude90

loogodude90

Posted
Posted

I really like it. For "box" scores, simpler is usually better, in terms of everything - font, colors, effects, shapes, etc.

The TV networks could learn a thing or two from you. I'm so tired of seeing score bugs that are too big, too small, overly shiny, have illegible fonts (too thin, too fat, too weirdly shaped), etc. The whole point is to be able to see the score, not be impressed by "skillz."

WIZARDS ORIOLES CAPITALS RAVENS UNITED

Link to comment
Share on other sites
1990hornet

1990hornet

Posted
  • Author
Posted

oh what the hell, here's the coding, it is a mile long so be prepared to scroll a ways:

<html>
<head>
<style type="text/css">
table.boxscore {
        text-align: center;
	border: 2px #fff solid;
	background-color: #00602b;
        text-align: center;
        font-family: arial, sans-serif;
        font-weight: bold;
        color: #fff;
        padding: 7px;
        padding-top: 1px;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
}

table.boxscore tr.innings {
  font-size: 9pt;
        padding: 1px;
}

table.boxscore th {
        padding: 3px;
}
table.boxscore td {
        padding: 3px;
}

table.boxscore td.spacing {
        padding: 0px;
}

table.boxscore td.separator {
        padding: 5px
}

table.boxscore td.inset {
        border: #222 1px inset;
	background-color: #00602b;
        padding: 0px;
        font-size: 14pt;
        width: 25px;
  -moz-box-shadow: inset 2px 2px 5px #222;
  -webkit-box-shadow: inset 2px 2px 5px #222; 
  box-shadow: inset 2px 2px 5px #222;
}

table.boxscore td.tb {
	border-width: 2px;
	border-style: solid;
	border-color: #9eceee;
	background-color: #00285d;
        color: #fff;
        font-weight: bold;
        padding: 5px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
}

table.boxscore td.sea {
	border-width: 2px;
	border-style: solid;
	border-color: #005c5c;
	background-color: #0c2c56;
        color: silver;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.nyy {
	border-width: 2px;
	border-style: solid;
	border-color: #fff;
	background-color: #1c2841;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.bos {
	border-width: 2px;
	border-style: solid;
	border-color: #C60c30;
	background-color: #002244;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.tor {
	border-width: 2px;
	border-style: solid;
	border-color: #005ac0;
	background-color: #000;
        color: #ccc;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.bal {
	border-width: 2px;
	border-style: solid;
	border-color: #FB4F14;
	background-color: #000;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.laa, table.boxscore td.ana {
	border-width: 2px;
	border-style: solid;
	border-color: #fff;
	background-color: #B71234;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.oak {
	border-width: 2px;
	border-style: solid;
	border-color: #ffd800;
	background-color: #003831;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.tex {
	border-width: 2px;
	border-style: solid;
	border-color: #BD1021;
	background-color: #003279;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.chw, table.boxscore td.cws {
	border-width: 2px;
	border-style: solid;
	border-color: #fff;
	background-color: #000;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.cle {
	border-width: 2px;
	border-style: solid;
	border-color: #C80810;
	background-color: #003366;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.det {
	border-width: 2px;
	border-style: solid;
	border-color: #de4406;
	background-color: #001742;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.kc {
	border-width: 2px;
	border-style: solid;
	border-color: #74B4FA;
	background-color: #15317E;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.min {
	border-width: 2px;
	border-style: solid;
	border-color: #c6011f;
	background-color: #072754;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.atl {
	border-width: 2px;
	border-style: solid;
	border-color: #B71234;
	background-color: #002F5F;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.nym {
	border-width: 2px;
	border-style: solid;
	border-color: #FB4F14;
	background-color: #002C77;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.phi {
	border-width: 2px;
	border-style: solid;
	border-color: #003087;
	background-color: #BA0C2F;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.was {
	border-width: 2px;
	border-style: solid;
	border-color: #11225b;
	background-color: #ba122b;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.chc {
	border-width: 2px;
	border-style: solid;
	border-color: #CC0033;
	background-color: #003366;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.fla, table.boxscore td.fl {
	border-width: 2px;
	border-style: solid;
	border-color: #009AA6;
	background-color: #000;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.cin {
	border-width: 2px;
	border-style: solid;
	border-color: #fff;
	background-color: #c6011f;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.hou {
	border-width: 2px;
	border-style: solid;
	border-color: #000;
	background-color: #983222;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.mil {
	border-width: 2px;
	border-style: solid;
	border-color: #92754C;
	background-color: #182B49;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.pit {
	border-width: 2px;
	border-style: solid;
	border-color: #ffbf00;
	background-color: #000;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.stl {
	border-width: 2px;
	border-style: solid;
	border-color: #0a2252;
	background-color: #c41e3a;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.ari {
	border-width: 2px;
	border-style: solid;
	border-color: #000;
	background-color: #A71930;
        color: #DBCEAC;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.col {
	border-width: 2px;
	border-style: solid;
	border-color: #000;
	background-color: #333366;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.la, table.boxscore td.lad {
	border-width: 2px;
	border-style: solid;
	border-color: #fff;
	background-color: #083c6b;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.sd {
	border-width: 2px;
	border-style: solid;
	border-color: #B4A76C;
	background-color: #002147;
        color: #fff;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.sf {
	border-width: 2px;
	border-style: solid;
	border-color: #F2552C;
	background-color: #000;
        color: #FFFDD0;
        font-weight: bold;
  -moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

table.boxscore td.live {
  font-size: 10pt;
  color: #ffdd00;
  text-decoration: blink;
  font-style: italic;
  font-weight: bold;
}

table.boxscore td.current {
        border: #222 1px inset;
	background-color: #00602b;
        color: #ffdd00;
        padding: 0px;
        font-size: 14pt;
        width: 25px;
  -moz-box-shadow: inset 2px 2px 5px #222;
  -webkit-box-shadow: inset 2px 2px 5px #222; 
  box-shadow: inset 2px 2px 5px #222;
}
</style>
</head>
<body>
<center><table class="boxscore"><tbody><tr class="innings"><td></td><td class="separator">
</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>
</td><td>R</td><td>H</td><td>E</td></tr><tr></tr><tr><td class="sea">SEA</td><td>
</td><td class="inset">0</td><td class="inset">0</td><td class="inset">0
</td><td class="inset">0
</td><td class="inset">0
</td><td class="inset">0
</td><td class="inset">0
</td><td class="inset">0
</td><td class="inset">0
</td><td class="separator">
</td><td class="inset">0</td><td class="inset">7
</td><td class="inset">0</td></tr><tr><td style="border: 0px; background: transparent;">
</td></tr><tr><td class="tb">TB</td><td>
</td><td class="inset">2</td><td class="inset">0
</td><td class="inset">3
</td><td class="inset">0
</td><td class="inset">0
</td><td class="inset">0
</td><td class="inset">0
</td><td class="inset">3
</td><td class="inset">x
</td><td>
</td><td class="inset">8
</td><td class="inset">13
</td><td class="inset">0</td></tr></tbody></table></center>
</body>
</html>

Link to comment
Share on other sites
pollux

pollux

Posted
Posted 


border-width: 2px;
border-style: solid;
border-color: #B4A76C;

You could shorten this to: 

border: 2px solid #B4A76C;

Padding attribute can also be shortened on one line, where you would put the following:

padding: {top padding value} {right} {bottom} {left};
For example--> padding: 1px 7px 7px 7px;

Your shadow and radius values are also repeated in all CSS tags. It would be more convenient to write that once:


table.boxscore td.sf, table.boxscore td.nyy, [ add all boxscores ] {
-moz-box-shadow: 4px 4px 5px #222;
  -webkit-box-shadow: 4px 4px 5px #222; 
  box-shadow: 4px 4px 5px #222;
-moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; 
  -khtml-border-radius: 10px 10px 10px 10px;
        padding: 5px;
}

Cleaner and shorter code. There's probably other ways you can shorten that CSS code. Instead of repeating everything for the 30 teams, you can probably group everything under one "umbrella" tag, and then use team tags for the different colors.

With that said, the boxscore looks good! I like it's simplicity and versatility.

Four times IHL Nielson Cup Champions - Montréal Shamrocks (2008-2009 // 2009-2010 // 2012-2013 // 2014-2015)

Five times TNFF Confederation Cup Champions - Yellowknife Eagles (2009 CC VI // 2010 CC VII // 2015 CC XII // 2017 CC XIV // 2018 CC XV)

Link to comment
Share on other sites
goforbroke

goforbroke

Posted
Posted

This is more web design than image design but I wanted input from sports fans. I created this for use on my Rays blog when I recap/review games. So tell me what you think. The version you see here is an image but when it's actually used it's css and html code. As I designed it, it has the ability to express all 30 teams colors on the team label. And I was going for like a manual score board like Fenway has. So tell me what you think :)

scoreboards.png

For reference and those tech savvy, here's the coding.

Can you edit the team boxes with an inner shadow so it looks like its more part of the manual scoreboard, like the runs are, rather thank hovering above it. With the drop shadow i think its ruining the old school effect you were going for. now it looks like an old school scoreboard with two colored bozes floating on top of it.

Other than that awesome job.. love it!

goforbroke_zpsb07ade0a.jpg
Link to comment
Share on other sites
omnivore

omnivore

Posted
Posted

That's very cool CSS work. Thanks for sharing the code, too.

NCFA-FCS/CBB: Minnesota A&M | RANZBA (OOTP): Auckland Warriors | USA: Front Range United | IFA: Toverit Helsinki | FOBL: Kentucky Juggernaut

Minnesota A&M 2012 National Champions 2013 National Finalist, 2014 National Semi-finals 2012, 2013, 2014 Big 4 Conference Champions

 

Link to comment
Share on other sites
1990hornet

1990hornet

Posted
  • Author
Posted

This is more web design than image design but I wanted input from sports fans. I created this for use on my Rays blog when I recap/review games. So tell me what you think. The version you see here is an image but when it's actually used it's css and html code. As I designed it, it has the ability to express all 30 teams colors on the team label. And I was going for like a manual score board like Fenway has. So tell me what you think :)

scoreboards.png

For reference and those tech savvy, here's the coding.

Can you edit the team boxes with an inner shadow so it looks like its more part of the manual scoreboard, like the runs are, rather thank hovering above it. With the drop shadow i think its ruining the old school effect you were going for. now it looks like an old school scoreboard with two colored boxes floating on top of it.

Other than that awesome job.. love it!

I just tried it, made it inset like the runs and it ruins he border with the teams secondary color. Not to mention the shadow wasn't that visible. So I reverted. However you can look at the teams block as if it's hanging on hook.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.

  I accept