BdR Posted February 1, 2014 Share Posted February 1, 2014 I'm trying to make my first HTML5 game and it's going pretty well. The javascript coding is not a problem, but I'm new to the whole css stuff. I've looked at several examples and here is what I've got so far (bonus points if you know which game I'm making ) http://jsfiddle.net/5Saxg/ I'm pretty close to my goal layout, except for points A and B, see image below: A: What is the best way to make the hintpegs on the right so they are shown on two rows instead of on one line? I mean, so they are shown like in the goal layout. I've tried using a <br/> in the html but then it jumps down too much. Also when there are 3 or 5 hintpegs, what's the best way to make it "jump in" a little? So it's more like a honeycomb pattern instead of a grid. B: I want to add a indicator for when the player selects a color, which cycles through all the colors. It's like a small rectangle above the pegs at the bottom. What is the best way to accomplish this? Quote Link to comment Share on other sites More sharing options...
OadT Posted February 3, 2014 Share Posted February 3, 2014 Ugly solution for B:.selectpeg:before{ background: white; content: ""; width: 16px; height: 6px; position: absolute; transform: translate(75%, -133%); -webkit-transform: translate(75%, -133%);}Runs in (the latest Versions of) Firefox, Chrome, Opera and Explorer. Just change the class for your needs Quote Link to comment Share on other sites More sharing options...
Quetzacotl Posted February 5, 2014 Share Posted February 5, 2014 For A you need javascript, you can't do it only with CSS. PS. Mastermind. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.