Create Awesome Crosshair!

by Dimitar Trendafilov November. 05, 14 01 Comment

Hey guys, in this short tutorial we will show you how to create crosshair for you game ui, using HTML and CSS. The crosshair position will be always in the center of your game view.

Adding a simple crosshair to the page

In most of the cases, we need to put the crosshair in the center of the screen without any other elements around it. In order to do that, you should first choose a picture of the crosshair. After that, we will show you the HTML markup of the page. We chose the following picture for the demo:

crosshair_small

Credits

In this case, we need to put only one img tag with class crosshair in our body tag.

In order to center the crosshair you have to set the top and left position to 50%. The property transform should be set to translateY(-50%) and translateX(-50%). The CSS property transform is usually used for rotating and scaling elements, but through the translateY and translateX function we can vertically and horizontal align elements.

Adding a crosshair with dynamic content

For the purposes of the example, let us accept that we would like to put some content, attached right after the crosshair. In the particular example we will attach ammo type and we will put the text for the ammo counter and progress bar.

Again after body tag we have to put the following HTML snippet.

In this case we have to set the position and transform properties on our parent crosshair-wrapper element. Note that crosshair-wrapper must have a height property, which must be the same height as of our crosshair image. In such a way you will fix the vertical centering of crosshair icon relative to its height but, not to the height of the crosshair-wrapper. The final result will be:

crosshair_with_ammo

 

Check out the live demo here

Download the source code here

Social Shares

1 Comments

Leave Reply

Leave a Comment