Home > Web Designer Wall > CONTROLLING A SPACESHIP WITH CSS

CONTROLLING A SPACESHIP WITH CSS

In the previous article we showed you how to create pure CSS modal pop-ups utilising a trick with the CSS selector :target. 

In this article we will look at a pure CSS technique for controlling CSS style changes with input elements. By utilising input elements we can trigger multiple style changes using only HTML and CSS; we will use these techniques to control the direction and movement of a spaceship through a parallax animated starfield.

Click for a demo of the project we will be recreating

SETTING UP THE BASIC LAYOUT

We are going to recreate the example shown in the demo above, and will start by creating a basic HTML markup linked to a stylesheet; that will contain the CSS styles that are going to be applied throughout the article:

  <!DOCTYPE html>  <html>  <head>      <meta charset="utf-8">      <meta http-equiv="x-au-compatible" content="ie=edge">      <title>CSS Controlled Starship</title>      <meta name="description" content="CSS Controlled Starship">      <meta name="author" content="Author Name Here">      <meta name="viewport" content="width=device-width, intitial scale=1">      <link rel="stylesheet" type="text/css" href="styles/styles.css">  </head>  <body>  </body>  </html>    

Next, we will recreate the gradient background:

  body {      height: 100%;      background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);      overflow: hidden;  }    

Create a div element with id wrap that will act as a container for the project:

  <body>      <div id="wrap">      </div>  </body>    

Apply the following styles:

  #wrap {      position: absolute;      top: 50%;      left: 50%;      height: 400px;      width: 400px;      border: 1px solid #FFFF00;      -moz-transform: translate(-50%,-50%);      -webkit-transform: translate(-50%,-50%);      -ms-transform: translate(-50%,-50%);      transform: translate(-50%,-50%);      overflow: hidden;  }    

The positioning of this element may seem a bit unusual; however, the combination of absolute positioning and translating centres the element vertically and horizontally inside its parent. 

Read Full Article

admin
The WebRecital is a dedicated User Interface/User Experience professionals who come together to provide design and research workshops, portfolio reviews, and educational outreach to the greater Seattle area.
http://webrecital.com/

Leave a Reply

Your email address will not be published. Required fields are marked *