cascadesthetics
Click a panel to view contents.

Blue-slide (from the opening credits of the anime Summer Wars)

Japanese animation is an art-form well-known for its adherence to the traditional style of hand-drawn illustrations, though that’s not to say that the medium is in any way shy towards the capabilities of computer-generated art and animation. Throughout its history, anime has considerately and capably employed such assistance to enhance not just its illustrative display but also other presentations such as color design, photography, typography, three-dimensionalism, and more. Similarly so, with the continual advent of featured and functional, expressive web elements through HTML, CSS and other web languages, it’s not only possible, but also amorous to reflect the progress of anime as an art-form. The Web and Anime Design series is an attempt to accurately and aesthetically replicate visual effects featured in Japanese animated series on a wholly different medium, the web, through a thoughtful sense of design and creative implementations.

Blue-slide
from the anime Summer Wars (サマーウォーズ)

For lack of better word and official name, blue-slide is the text-effect used in the opening credits of the anime film, Summer Wars, directed by Mamoru Hosoda. The sequence has a very simple yet very sleek palette consisting of three colors: black, blue and white. The effect itself too is modest yet finely engineered. The Japanese text, consisting, for the most part, of ideographic kanji characters, are positioned boldly in white text, similar to a header. Meanwhile, the lower Roman type is minuscule in comparison but appeals through its elegant aqua-blue color and more overly its animation in which the kerning between each letter is decremented, making the text  seem as if it is “sliding” towards the left.

We can emulate this effect by using relatively simple HTML and CSS, applying three classes: one for the Japanese text/header, one for the Roman text/subtext, and one for the background color, all of which can be modified in color, font, size, positioning, etc. accordingly.

One of the first problems that we run into is mimicking the font used for the Japanese text in the film itself. Upon first glance, I’d say that the readily available font that matches it most closely is Adobe‘s Kozuka Gothic® Pr6N Bold (maybe its Kozuka Gothic® Pr6N Heavy) font. Following is a statement about the original Japanese typeface family from their webpage itself:

The Kozuka Gothic typeface family, composed of six different weights to cover various uses ranging from body text composition to headlines, have now been completed as OpenType fonts.

Kozuka Gothic provides a clear image common to Kozuka Mincho, but also gives the visual strength needed for a Gothic typeface.

Kozuka Gothic is Adobe’s second original Japanese typeface family following Kozuka Mincho. With the systematic design methods developed for Kozuka Mincho, we have again succeeded in adding to this new Gothic typeface visual strength and clarity, as well as stylistic characteristics common to those of Kozuka Mincho.

The Kozuka Gothic family is composed of six weights in total: EL (Extra Light) which is very light, L (Light), R (Regular), and M (Medium) that cover purposes from body text to display lines for sub-headings, and the heavier B (Bold) and H (Heavy) which are effective for display lines set in larger type sizes. Kozuka Gothic has systematically designed glyph shapes with good design consistency, and fine printability. Retaining the clear and modern feeling of Kozuka Mincho, Kozuka Gothic has the visual strength required for a Gothic typeface.

Masahiko Kozuka, Advisor, who has been involved with many text typeface design projects, supervised, and lead the typeface design project of Kozuka Mincho, and Adobe’s Japanese type design team produced the typeface. Kozuka Gothic, whose style is based on traditional Japanese sans-serif design, was created with Adobe’s new and original design methods developed for making digital typefaces suitable for today’s uses. As a useful typeface family paired with Kozuka Mincho, Kozuka Gothic will widen the user’s creative typographic range.

While I indeed did describe the Kozuka Mincho® Pr6N series as readily available, it’s hard to assume the font will grace the computers of all of your own webpage’s visitors, not to mention the $125 USD licensing fee for its official use. This is a bit of a pinch, so in addition to Photoshop’s remarkably designed type, we’ll be using the next best thing, Meiryo, a considerably disseminated font on both Windows and Mac computers, as an auxiliary font.

This brings us to our next difficulty with foreign type: the excessive line break that follows kanji characters. To bypass this, we’re going to informally administer the margin property to our header class that will contain the kanji characters, setting the bottom margin to a negative value. *Do note that if you intend to use this design completely void of Japanese characters, this add-on should either be discarded or adjusted accordingly.

Last but not least, in inching ever so closer to the aesthetic of the film itself, we want to ensure that the characters flaunt an identical amount of smoothness and crispness. It’s a frequent problem in web design that text often looks much sharper, almost atrociously so, than when viewed in other applications. In preemptive-ness of this, we’re going to administer a common countermeasure to this with the text-shadow property; setting it to the same color as the text itself, positioning it exactly beneath the text itself, and applying the blur effect with a very humble value.

Now with the Japanese textual aspect covered, we have much more freedom in stylizing the English text, font-wise at least, so begin by changing (or keeping) the font-family as you see fit. After assigning the text-transform to auto-capitalize all letters, the default letter-spacing (that will actually be the final letter-spacing once the animation has completed), and rest of the qualities (optional); our main concern is the actual key-frame animation to be done. We give the subtext class an assignment of our custom-named animation, and in another instance of CSS definition, we outline the frames of the animation. Here we have four frames (making sure the animation begins at zero percent and ends at one-hundred perfect) and change the CSS property of letter-spacing each time, to give that semblance of movement.

*We add a   before our English text to align its ident with the header

And with that, we have a presentable implementation of blue-slide.

For our HTML, we simply declare all three classes, with the background first, the header second, and the subtext third. If any of these classes are div-types, then they should execute the line-break automatically.

Code:

CSS:

.summerwarswhite {
margin: 0px 0px -31px 0px;
color:#000000;
font-size: 32px;
font-weight:600;
font-family: Kozuka Gothic Pro H, Meiryo;
text-shadow: 0px 0px 1px #000000;
letter-spacing:2.5px;
}

.black {
background-color:#000000;
}

.summerwarsblueslide {
color: #00B8E6;
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size:10px;
text-transform:uppercase;
text-shadow: 0px 0px .15px #00B8E6;
letter-spacing:1px;
-webkit-animation: blueslide 2s; /* Chrome, Safari, Opera */
animation: blueslide 2s;
animation-timing-function:linear;
-webkit-animation-timing-function:linear; /* Safari and Chrome */
}

/* Chrome, Safari, Opera */
@-webkit-keyframes blueslide {
0% {letter-spacing:4px}
100% {letter-spacing:1px}
}

/* Standard syntax */
@keyframes blueslide {
0% {letter-spacing:4px}
100% {letter-spacing:1px}
}

HTML:

<div class =”black”>
<div class=”summerwarswhite” style=”color:#ffffff;”>サマーウォーズ</div><br>
<span class=”summerwarsblueslide”>&nbsp;Summer Wars Blue-slide</span>
</div>

Demo: jsfiddle

 

Close

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!

Close