Skip to content

Instantly share code, notes, and snippets.

@TerryMooreII

TerryMooreII/gist:5585240

Last active December 17, 2015 09:09
Show Gist options
  • Save TerryMooreII/5585240 to your computer and use it in GitHub Desktop.
Save TerryMooreII/5585240 to your computer and use it in GitHub Desktop.
Download ZIP
Baseball filed in CSS3 - work in progress
Raw
gistfile1.txt
<!-- http://cssdeck.com/labs/baseball-field -->
<html>
<head>
<title>CSS3 Baseball field</title>
<style type="text/css">
#field{
position:absolute;
top:-110px;
left:145px;
height:700px;
width:700px;
border-radius:1% 100% 1% 1%;
border:1px solid green;
background-color:green;
-webkit-transform: rotate(-45deg);
}
#in-field{
position:absolute;
top:170px;
left:265px;
height:450px;
width:450px;
border-radius:1% 50% 1% 1%;
border:1px solid: #836539; /*#9b7653; */
background-color:#836539; /*#9b7653;*/
-webkit-transform: rotate(-45deg);
}
#base-lines{
position:absolute;
top: -120px;
left: 155px;
height:670px;
width:670px;
border-left:2px solid white;
border-bottom:2px solid white;
-webkit-transform: rotate(-45deg);
}
#in-field-grass{
position:absolute;
top: 330px;
left: 359px;
height:260px;
width:260px;
border:2px solid green;
background-color:green;
-webkit-transform: rotate(-45deg);
}
.base{
position:absolute;
height:13px;
width:13px;
-webkit-transform: rotate(-45deg);
border:1px solid white;
background-color:white;
}
#first-base{
top:450px;
left:706px;
}
#second-base{
top:231px;
left:484px;
}
#thrid-base{
top:450px;
left:262px;
}
#home-plate{
position:absolute;
height:9px;
width:10px;
top:680px;
left:485px;
border:1px solid white;
background-color:white;
}
#home-plate:before, #home-plate:after{
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#home-plate:before{
border-color: rgba(194, 225, 245, 0);
border-top-color:white;
border-width: 6.5px;
left: 50%;
margin-left: -6.5px;
}
#pitchers-mound{
position:absolute;
top:420px;
left:450px;
height:80px;
width:80px;
border-radius:100% 100% 100% 100%;
-webkit-transform: rotate(-45deg);
border:1px solid #836539;
background-color:#836539;
}
#pitchers-plate{
position:absolute;
top:458px;
left:482px;
height:5px;
width:16px;
border:1px solid white;
background-color:white;
}
#vertical{
position:absolute;
top:14px;
left:491px;
height:1115px;
width:1px;
border-left:1px solid black;
}
.half-circle{
position:absolute;
height:40px;
width: 40px;
-webkit-transform: rotate(-45deg);
border:1px solid #836539;
background-color:#836539;
}
#third-circle{
top:440px;
left:300px;
border-radius:1% 1% 100% 1%;
}
#first-circle{
top:440px;
left:642px;
border-radius:100% 1% 1% 1%;
}
#second-circle{
top:275px;
left:470px;
border-radius:1% 1% 1% 100%;
}
.batters-box{
position:absolute;
height:25px;
width: 15px;
border:2px solid white;
background-color:#836539;
outline: 2px solid #836539;
}
#batters-box-right{
top:677px;
left:465px;
}
#batters-box-left{
top:677px;
left:498px;
}
#batting-circle{
position:absolute;
top:634px;
left:440px;
height:100px;
width:100px;
border-radius:100% 100% 100% 100%;
-webkit-transform: rotate(-45deg);
border:1px solid #836539;
background-color:#836539;
}
#first-base-thing{
top:430px;
left:667px;
position:absolute;
height:170px;
width:13px;
-webkit-transform: rotate(45deg);
border-right:2px solid white;
border-bottom:2px solid white;
}
.mowed-grass{
background-color: #ac0;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(0deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
-webkit-background-size: 250px 250px;
-moz-background-size: 50px 50px;
background-size: 200px 200px;
/* via http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/ */
background-color:#ac0
}
#about{
position:absolute;
bottom:10px;
right:10px;
}
</style>
</head>
<body>
<div id="stadium">
<div id="field" class="mowed-grass"></div>
<div id="in-field"></div>
<div id="in-field-grass" class="mowed-grass"></div>
<div id="batting-circle"></div>
<div id="first-base" class="base"></div>
<div id="second-base" class="base"></div>
<div id="thrid-base" class="base"></div>
<div id="home-plate"></div>
<div id="base-lines"></div>
<div id="pitchers-mound"></div>
<div id="pitchers-plate"></div>
<div id="first-circle" class="half-circle"></div>
<div id="second-circle" class="half-circle"></div>
<div id="third-circle" class="half-circle"></div>
<div id="batters-box-right" class="batters-box"></div>
<div id="batters-box-left" class="batters-box"></div>
<div id="first-base-thing"></div>
</div>
<div id="about">
<a href="http://www.twitter.com/terrymooreii">@TerryMooreII</a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment