Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

How To Create The Super Saiyan Effect In Css / Js ?

Post a Comment
When I was a child, I used to read all Dragon Ball manga books. The Super Saiyan effect (surrounding aura and lightning) is really cool! Now I have an event page which lists all up

Solution 1:

SVG

CODEPEN

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. Pic

body {
  margin: 0;
}
.main {
  background-color: black;
  width: 100vw;
  height: 100vh;
}
.calander {} .calanderh2 {
  margin: 0;
  color: white;
  text-align: center;
}
.calander.event-grid {
  margin: 05%;
}
.event-grid.event {
  position: relative;
  display: inline-block;
  width: 30%;
  height: 250px;
  margin: 1%;
  text-align: center;
  background: -moz-radial-gradient(center, ellipse cover, #4c4c4c0%, #212121100%);
  /* 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, #4c4c4c0%, #212121100%);
  /* Chrome10+,Safari5.1+ */background: -o-radial-gradient(center, ellipse cover, #4c4c4c0%, #212121100%);
  /* Opera 12+ */background: -ms-radial-gradient(center, ellipse cover, #4c4c4c0%, #212121100%);
  /* IE10+ */background: radial-gradient(ellipse at center, #4c4c4c0%, #212121100%);
}
.event.date {
  color: #666;
  font-size: 3em;
  margin-bottom: 10px;
  text-shadow: 0px1px#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-regp {
  margin: 5px0;
}
.event.bottom-reginput {
  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%;
}
<divclass="main"><sectionclass="calander"><h2>UPCOMING EVENTS</h2><divclass="event-grid"><divclass="event"><h1class="date">16 APR</h1><spanclass="time">8:00 PM</span><br><spanclass="note">registration</span><divclass="bottom-reg"><p>LRC</p><inputplaceholder="REGISTER"></input></div></div><divclass="event"><h1class="date">19 APR</h1><spanclass="time">10:00 PM</span><br><spanclass="note">registration</span><divclass="bottom-reg"><p>LRC</p><inputplaceholder="REGISTER"></input></div><divclass="spesial"><svgwidth="100%"height="100%"viewBox="0 0 200 200"><usex="40"y="100"transform="scale(0.5) rotate(20)"xlink:href="#light" /><usex="150"y="-790"transform="scale(0.2) rotate(90)"xlink:href="#light" /><usex="0"y="200"transform="scale(0.35) rotate(-45)"xlink:href="#light" /><usex="-240"y="390"transform="scale(0.5) rotate(-70)"xlink:href="#light" /><usex="300"y="-90"transform="scale(0.4) rotate(90)"xlink:href="#light" /></svg></div></div><divclass="event"><h1class="date">23 APR</h1><spanclass="time">8:00 PM</span><br><spanclass="note">registation</span><divclass="bottom-reg"><p>LRC</p><inputplaceholder="REGISTER" /></div></div></div></section><svgclass="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><pathfill="#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.

Super Saiyan gif

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

<divclass="event"><imgid="saiyan"src="http://i.stack.imgur.com/CFoa1.gif" /><h1class="date">19 APR</h1><spanclass="time">10:00 PM</span><br><spanclass="note">registration</span><divclass="bottom-reg"><p>LRC</p><inputplaceholder="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:

enter image description here

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 ?"