Bringing the UI of Sword Art Online into HTML

The lovely cover image is made by Dandehlion

Update: I also remade the No Game No Life text effect with CSS here

Ever since I started watching the popular anime Sword Art Online, I loved the UI’s visual design. Its usability is another question, but I think we can agree it’s pleasing to the eye. Let’s build it with HTML, CSS and Javascript!

Analyzing Sword Art Online’s visual language

To bring people who don’t know what Sword Art Online is up to speed, it’s a Japanese hand-drawn animation (anime), in which tons of people are stuck in a virtual game world, who then have to fight to survive. It’s based around the fact that lives reflect the real world, so one must survive in-game to survive in the real world.
The game features a touch based interface, through which the players can summon items from their inventory, manage groups and trade items.

A close-up

After finishing the show, I felt like I could apply my then current knowledge of web technologies to recreate the popup you see on the left image, with its original animations, in a way that both look as much like the original as possible and could actually be used in real world applications. So please join me as we build this slick modal together. I assume you know how Bootstrap works, but you should still be able to follow even if you don’t.

Please keep in mind that for now, we’ll only create the popup, but based on this, you could try yourself and make some other part of the interface. If you do so, please let me know, I’d love to see it!
Let’s go!


The main character interacting with the interface

So to get started, we have to conceptualize what we want to achieve. In order to do this, we’re going to analyze how the modal looks in the show. Click here to open up the above image on a new tab, so you can follow.

On first glance, you can see that the popup can be divided into three main parts. The (unfortunately misspelled) title, the body and the response buttons. Also, we can notice that it’s somewhat transparent, as well as that it has a thin, white border.
The first part contains the title, which lets the player know what the rest of the modal is going to be about. it uses a specific font, which has been custom designed for the game engine. This font has been recreated by several people, so we should just be able to include them in our project.

Next, there’s the content part, which has an inset type box-shadow, uses another font and has a grey background. it’s also animated, so that when the modal opens, this middle part slides open from behind the two neighbouring parts.

Then finally, the bottom part houses either one or two buttons, to let the userr interact with the prompt by answering with yes or no (or okay in case of just one button).

Building the frame HTML

Let’s start with creating our initial HTML, which is going to set up the page’s title, character set, language, body and stylesheet.

<!doctype html>
<html lang="en-UK">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>SAO-UI</title>
    <link rel="stylesheet" href="sao.css" charset="utf-8">
</head>
 
<body></body>
</html>

To create a baseline and to be able to see what we’re working on, we need to set a background in sao.css.
I chose this low-res, blurry one from the show’s wiki:

The chosen wallpaper

body {
    background-image: url('http://vignette3.wikia.nocookie.net/swordartonline/images/d/dd/First_Floor_forest.png/revision/latest?cb=20140309042049');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
}

Next, we will create the modal with Bootstrap. Add bootstrap into the project by inserting this just before the closing </body> tag:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

We can now use Bootstrap’s classes and functions, that will make our lives easier. Bootstrap has a ready made modal system in place, that will let us tweak it to look like the ones in Sword Art Online. Now comes the fun part:

Insert the Bootstrap modal HTML into the site at the end, like this:

<div class="modal fade sao" data-keyboard="false" data-backdrop="static" id="SAOModal" aria-hidden="true">
    <div class="modal-dialog closed" role="document">
        <div class="modal-content">
            <div class="modal-header text-xs-center">
                <h4 class="modal-title" id="SAOModalTitle"></h4>
            </div>
            <div class="modal-body text-xs-center c-vcenter c-hcenter p-x-3">
                <span id="SAOModalBody"></span>
            </div>
            <div class="modal-footer container-fluid p-y-2">
                <div class="row">
                    <div class="col-xs-6 c-hcenter text-xs-center btnholder" id="SAOModalAccept">
                        <div class="SAOOuterCircle o">
                    </div>
                </div>
                <div class="col-xs-6 c-hcenter text-xs-center btnholder" id="SAOModalDeny">
                    <div class="SAOOuterCircle x"></div>
                </div>
            </div>
        </div>
    </div>
</div>

To break this down, this HTML sets up a bunch of things. First, the modal and fade class tell Bootstrap the type and animation of the element. In this case, our modal will float down, as you can see here . We’ll deal with this later, with some custom CSS.

Next, we add the sao class, just so we don’t have to use Bootstrap’s ones. This is good practice, since Bootstrap may change its class names, and if/when that happens, we don’t want our code to break. In this same element, we set up a couple of HTML5 options for Bootstrap to control the behaviour of the modal.
We want the modal to not get dismissed in any way except by clicking the blue button, so we set data-keyboard to false and data-backdrop to static. This will result in the modal not closing when the user clicks outside of it or presses escape.

The rest is basically just copying the Bootstrap example modal, however, I recommend that you read through instead of just copying and pasting, since you can learn a lot by doing that.
We create the three parts of the modal I previously talked about, using Bootstrap classes.

Onto the CSS!

Animations are key here, because the entire look and feel of the UI depends on it. So first up, we will overwrite the slide-in transition from Bootstrap with our own, alongside with resetting the cursor to prevent it flickering when hovering over the modal in certain browsers:

.modal.sao .modal-dialog {
    transform: scale(.9);
    transition-duration: .075s;
    transition-property: transform;
    transition-timing-function: ease-in-out;
    user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}
 
.modal.sao.in .modal-dialog {
    transform: scale(1);
}

Then, we set up the cursor, so that when it’s over one of the buttons, the appropriate “link” cursor is shown:

.modal.sao span {
    cursor: default
}
 
.modal.sao .SAOOuterCircle {
    cursor: pointer
}

When done, create styling for the buttons. This can be tricky, but thanks to darkblackswords on DeviantArt, you don’t have to.
Get their icons here: http://darkblackswords.deviantart.com/art/Sword-Art-Online-Vector-Icons-434245957

.experimentSAOModalRoot .SAOOuterCircle.o {
    background-image: url("Yes.svg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 64px;
    width: 64px;
}
 
.experimentSAOModalRoot .SAOOuterCircle.x {
    background-image: url("No.svg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 64px;
    width: 64px;
}

Now it’s time to style the modal, so it’s all white and grey, just as seen in the show and screenshots. We also add a box-shadow to the middle part, to show that it’s actually behind the sliding parts that reveal the content of the modal:

.modal-content {
    background-color: #EEEEEE;
    border-color: white;
    border-radius: 0;
    border-style: solid;
    border-width: 2px;
    font-family: "SAO";
    opacity: .9;
}
 
.modal-dialog .modal-title {
    font-size: 26px
}
 
.modal-dialog .modal-body {
    background-color: #D8D8D8;
    box-shadow:
        0 10px 25px -15px rgba(0, 0, 0, .5) inset,
        0 -10px 25px -15px rgba(0, 0, 0, .5) inset;
    color: #808080;
    font-size: 20px;
    width: 450px;
}

After the top two parts look good, we need to touch up on some details and create smooth transitions. One of these details is the touch effect. The show isn’t very clear about this, but I think it’s reasonable to make the buttons at the bottom glow when hovered and clicked on. The simplest way of achieving this is making them a bit transparent:

.modal-footer .btnholder div:hover {
    opacity: .8
}
 
.modal-footer .btnholder div:active {
    opacity: .6
}

About now, you should be looking at a neat Sword Art Online styled modal, but when you change classes, it just snaps open and shut. The functionality we need is missing. Fixing this is easy, since all the classes are changing is padding and height, both of which can be transitioned nicely.

.modal-footer .btnholder,
.modal-dialog .modal-title,
.modal-footer .btnholder .btn {
    transition-property: opacity;
    transition-timing-function: ease;
}
 
.modal-footer .btnholder,
.modal-dialog .modal-title {
    transition-duration: .2s;
}
 
.modal-footer .btnholder .btn {
    transition-duration: .075s;
}

Bootstrap’s default when it comes to modals is that it’s at the top and scales with the message. I really wanted my modal to be in the center of the screen, so I copied the code from this Codepen,which apparently still works with the newest Bootstrap, modified it a little, then added it to my CSS:

.modal {
    padding: 0 !important;
    text-align: center;
}
 
.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    margin-right: -4px;
    vertical-align: middle;
}
 
.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

Presto!

And you’re done!
Now, when you load the page you just created, you will only see the background, because Bootstrap hides modals by default. To see what it looks like, use the .modal() Bootstrap Javascript function. By default, the whole thing is empty, so you can either:

  • Use Javascript to dynamically fill in the content, or
  • Edit the HTML, so that the modal shows whatever you want it to.

If you followed this post in your own editor, you should now have an accurate Sword Art Online styled modal that you can use with Bootstrap on technically any webpage!

I’ve gone ahead and (badly) wrote a simple Javascript file you can insert so you can test it out for yourself.
It’s at https://decentm.github.io/sao-ui/experiments.js. Then, you should be able to call

saoModal(
    "Title",
    "Content",
    "Positive answer title",
    "Positive answer content"
)

from the console.

That’s about it, while it’s not hard to create a single thing from a show like Sword Art Online, but to make it in a way that’s relatively easy to understand and be easy to build upon can be challenging. If you get stuck on a part, feel free to check my original code out at https://decentm.github.io/sao-ui/ and https://github.com/DecentM/sao-ui!

Thanks for reading! Since this is practically the first comprehensive blog entry I wrote, please let me know if it was difficult to follow or has issues that I should fix.