Home » Tutorials » HTML & CSS » Creating Interactive Fictional UI With CSS3

Creating Interactive Fictional UI With CSS3

Creating Interactive Fictional UI With CSS3

  • Stumble it!
  • Share

In today’s article we will create an interactive fiction user interface (UI) coded with CSS transforms and transition properties. The idea is to have a button and reveal more information when mouse over on it. You can check out the demo before you proceed to the next section.

View Demo

Cool right? Let’s get started!

HTML Structure

We will have a simple HTML structure with several division where each one contains title and description.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating Interactive Fictional UI Using CSS3 | onlyWebPro</title>
</head>

<body>
<div class="menu_obj home">
  <div class="content">
    <h3>Home</h3>
    <p><a href="#">Read more</a></p>
  </div>
</div>
<div class="menu_obj profile">
  <div class="content">
    <h3>Profile</h3>
    <p><a href="#">Read more</a></p>
  </div>
</div>
<div class="menu_obj contact">
  <div class="content">
    <h3>Contact</h3>
    <p><a href="#">Read more</a></p>
  </div>
</div>
</body>
</html>

As you can see above, each menu object “menu_obj” division contains extra classes such as “home”, “profile” and “contact” that gives us freedom to define background image with CSS later. You can either create the images by yourself or use the following images:
Home Button
Home Button
Profile Button
Profile Button
Contact Button
Contact Button
Hover State
Hover State

Ok. That’s all for the HTML structure, now, let’s take a look at the CSS styles.

CSS Style

Let’s define the style for each buttons and its child.

<style>
body {
	background: #000;	
}

.menu_obj {
	border: 2px solid #104669;
	border-radius: 50%;
	box-shadow: inset 0 0 5px 3px rgba(11, 51, 74, 0.5),  0 0 2px rgba(7, 48, 74, 1);
	float: left;
	height: 125px;
	margin: 0 10px;
	position: relative;
	width: 125px;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.menu_obj.home {
	background: #060c12 url(icon-sprites.png) no-repeat center center;	
}

.menu_obj.profile {
	background: #060c12 url(icon-sprites2.png) no-repeat center center;	
}

.menu_obj.contact {
	background: #060c12 url(icon-sprites3.png) no-repeat center center;	
}

.content {
	background: #000 url(icon-sprites-hover.png) no-repeat center center;
	border-radius: 50%;
	height: inherit;
	opacity: 0;
	position: absolute;
	width: inherit;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}
.content h3 {
	color: #fff;
	cursor: default;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 18px;
	margin: 0 10px;
	opacity: 0;
	padding: 40px 0 0 0;
	text-align: center;
	text-shadow: 0 0 10px rgba(43, 149, 205, 1);
	-webkit-transform: scale(5);
	-moz-transform: scale(5);
	-o-transform: scale(5);
	-ms-transform: scale(5);
	transform: scale(5);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.content p {
	font-family: Arial, sans-serif;
	font-size: 12px;
	margin: 10px;
	opacity: 0;
	text-align: center;
	text-shadow: 0 0 10px rgba(43, 149, 205, 1);
	-webkit-transition: all 1.6s ease-in-out;
	-moz-transition: all 1.6s ease-in-out;
	-o-transition: all 1.6s ease-in-out;
	-ms-transition: all 1.6s ease-in-out;
	transition: all 1.6s ease-in-out;
}
.content p a {
	color: #999;
	text-decoration: none;
}
.content p a:hover {
	text-decoration: underline;
}
</style>

First of all, we have given the width, height for each “menu_obj”; apply inner and outer drop shadows; and define the transition type and its duration. Besides, we have given a value of 50% for “border-radius” to turn the “menu_obj” into circle. In order to make sure your code works well on every browsers, you should include vendor prefixes such as “-moz-”, “-webkit” into your code.

The content division of the “menu_obj” will be positioned absolutely; opacity and scale is going to be 0 for us to apply the transition later when user mouse over it.

The title element has scale up 5 times, and 0 opacity. We will scale it down later when user mouse over on the “menu_obj”. Same goes to the paragraph element, it has 0 opacity and a transition. Please take note on the paragraph element’s transition property, we have given 1.6 seconds to the element, to make sure the paragraph element appear after the title element.

Save your document now and preview it on your browser, you should get the something same like the following image.

Basic Styling For Fictional UI

Ok, now is the interesting part, which turn our boring button into a lively and attractive one!

.menu_obj:hover {
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.1),  0 0px 30px rgba(7, 48, 74, 1);
}

When user mouse over on the button / “menu_obj”, the button will animate its inner drop shadow’s color from blue to white with only 0.1 opacity. Meanwhile, animte its outer shadow from 2px to 30 px width.

.menu_obj:hover .content {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

The content division will fade in and scale up to 1.

.menu_obj:hover .content h3, .menu_obj:hover .content p {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

Lastly, the title element will fade in and scale down from 5 to 1; the paragraph element will fade in right after the appearance of title element.

That’s it! Save your work and check it out on your browser. You should have an animated button when mouse over on it!

View Demo

Conclusion

You have just learned to create an interactive UI with CSS3 properties:- transform and transition. With transform and transition properties, you can have many different animation and effects, just try it out and play with it!


  • Replacing jQuery Animation With CSS Hardware Accelerated
  • Create Facebook App Style Slide-Out Navigation
  • Build Intelligent Layout Using CSS Calc() Property

  • Gunjesh

    Good tutorial indeed. Very nicely explained.

Android, iOS Development Tutorials