How To Create The Super Saiyan Effect In CSS / JS ?
Solution 1:
SVG
I am a bit unsure if you wanted the yellow KI glow or the lighting so i went for the lighting effect.
I reused a simple <svg> shape with the <use> element.
The lighting shape is taken from Gohan.
The top left lighting. 
body {
margin: 0;
}
.main {
background-color: black;
width: 100vw;
height: 100vh;
}
.calander {} .calander h2 {
margin: 0;
color: white;
text-align: center;
}
.calander .event-grid {
margin: 0 5%;
}
.event-grid .event {
position: relative;
display: inline-block;
width: 30%;
height: 250px;
margin: 1%;
text-align: center;
background: -moz-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #4c4c4c), color-stop(100%, #212121));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #4c4c4c 0%, #212121 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, #4c4c4c 0%, #212121 100%);
}
.event .date {
color: #666;
font-size: 3em;
margin-bottom: 10px;
text-shadow: 0px 1px #222;
}
.event .time {
font-size: 1.4em;
color: #dd8834;
}
.event .note {
font-size: 1.3em;
color: LawnGreen;
}
.event .bottom-reg {
position: absolute;
bottom: 0;
height: 25%;
width: 100%;
background-color: white;
}
.event .bottom-reg p {
margin: 5px 0;
}
.event .bottom-reg input {
text-align: center;
color: white;
background-color: #55f;
border: 1px solid #99f;
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: white;
font-weight: bold;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: white;
font-weight: bold;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: white;
font-weight: bold;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: white;
font-weight: bold;
}
.test {
display: none;
}
.spesial {
z-index: 5;
position: absolute;
top: -25%;
left: -25%;
width: 150%;
height: 150%;
}<div class="main">
<section class="calander">
<h2>UPCOMING EVENTS</h2>
<div class="event-grid">
<div class="event">
<h1 class="date">16 APR</h1>
<span class="time">8:00 PM</span>
<br>
<span class="note">registration</span>
<div class="bottom-reg">
<p>LRC</p>
<input placeholder="REGISTER"></input>
</div>
</div>
<div class="event">
<h1 class="date">19 APR</h1>
<span class="time">10:00 PM</span>
<br>
<span class="note">registration</span>
<div class="bottom-reg">
<p>LRC</p>
<input placeholder="REGISTER"></input>
</div>
<div class="spesial">
<svg width="100%" height="100%" viewBox="0 0 200 200">
<use x="40" y="100" transform="scale(0.5) rotate(20)" xlink:href="#light" />
<use x="150" y="-790" transform="scale(0.2) rotate(90)" xlink:href="#light" />
<use x="0" y="200" transform="scale(0.35) rotate(-45)" xlink:href="#light" />
<use x="-240" y="390" transform="scale(0.5) rotate(-70)" xlink:href="#light" />
<use x="300" y="-90" transform="scale(0.4) rotate(90)" xlink:href="#light" />
</svg>
</div>
</div>
<div class="event">
<h1 class="date">23 APR</h1>
<span class="time">8:00 PM</span>
<br>
<span class="note">registation</span>
<div class="bottom-reg">
<p>LRC</p>
<input placeholder="REGISTER" />
</div>
</div>
</div>
</section>
<svg class="test" width="100px" height="100px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path fill="#ddf" stroke="#ddf" id="light" d="m 0,0 c 6.24111,-8.9445 10.61204,-23.77912 17.97353,-53.80856 l 29.7995,-5.55584 35.35534,41.92133 c -1.95372,12.45653 45.89675,34.80534 61.61931,34.34518 -17.63651,5.49982 -9.56977,24.91725 2.52538,36.87057 C 139.10793,46.26094 131.45087,39.06432 122.46831,22.22336 118.45247,16.48431 87.40919,-0.96167 83.63345,0.73967 c -9.2424,4.06941 -3.52888,14.963 -1.51523,18.60117 -4.31715,4.656 -7.89706,8.06774 -8.43836,13.6677 0.0873,-12.34933 1.5179,-42.45863 -5.49456,-26.14667 L 65.95578,-14.91769 C 61.11992,-21.99984 48.27857,-50.5446 47.89033,-37.93673 46.10689,-46.50735 39.22534,-49.00909 35.6512,-48.25273 17.657,-46.88454 17.9011,-38.9303 16.45831,-31.58521 7.76504,-6.22367 6.56293,-8.29891 0,0 Z"
/>
</defs>
</svg>
</div>Solution 2:
This might not be the best way, but a quick way could be to download an animated gif of super saiyan, make it transparent, edit the character out, then use css to overlay the image on your event.
With better photo editing software this could probably look a lot better, but this only took me about 5 minutes.
Here's the code: http://codepen.io/anon/pen/gpLMGr
<div class="event">
<img id="saiyan" src="http://i.stack.imgur.com/CFoa1.gif" />
<h1 class="date">19 APR</h1>
<span class="time">10:00 PM</span>
<br>
<span class="note">registration</span>
<div class="bottom-reg">
<p>LRC</p>
<input placeholder="REGISTER"></input>
</div>
</div>
<style>
#saiyan {
position: absolute;
z-index: 1;
width: 160%;
height: 100%;
left: -30%;
top: 0;
}
</style>
I just absolutely position the image over the rest of the event object, and have its width and height dependent on the event div.
Solution 3:
Disclaimer: this code is for the lulz.
Moved by curiosity, I've created a small example you might like:
Running demo on jsFiddle
Lightning effect
I've used the HTML5 Canvas Lightning from this fiddle, that is itself a fork of akm2's Lightning Points (Lightning 2); the canvas is then placed under a div with 0.99 of opacity, 20px oversized on each side, to give the effect of surrounding the boundaries, but only of few pixels.
Fire effect
The fire effect in CSS is easily achievable with the text-shadow property; I've taken parts of this but it is the same code I've seen dozens of time in many articles / fiddles, probably the first one ever is the one in the second link.
Since this applies only to text and not, for example, to divs, I've used the content attribute of the :before pseudo-element of the .sayan div to create a huge text composed by symbols (for a romantic reason, I've used the Go (悟) kanji from Goku (悟空), but the important is that it is not a recognizable alphabetic character, or goodbye aura effect... try it by yourself with content: 'a';), and I've put it between the canvas and the div with a negative z-index.
This is just an experiment for fun, not production code nor responsive stuff as asked in the question (even though if you resize the page, the divs move and the sayan div will retain its capabilities); my attempt to answer the question:
is it possible to do it, and how ?
, that I hope you liked.
If you want to transform it to something more serious, there is a lot of work to do (first of all, alter the script to make some dots moving only along the sides, to prevent having all of them inside the square), but I still suggest you to use a transparent animated PNG, or however something easier and less CPU-killer than this, declaratively made for the sake of the lulz ;)
Post a Comment for "How To Create The Super Saiyan Effect In CSS / JS ?"