For a limited-time, upgrade to +Blizzard for $35 USD and receive the following:

— a free copy of Oblivion Light.
— a free copy of WebFlake Trackers Bundle.
— a free WF Halloween Member Badges (PSD).

You can visit this thread below for more details regarding the original promotion.
CLICK HERE

Contact @Davlin to make a purchase or for questions / comments.

Jump to content
mr-pimpen

Storm lightning effect

Recommended Posts

want a real cool lightning effect for your background gaming forum or any other forums

i cant show a screen shot because of the flash you can try it on a test site see if you like it

html

add to your header

<!-- two layers of Image-->
<div class="bg"></div>
<div class="lightning flashit"></div>

add to your css

/* First lets set a background */
.bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://wwwsite.com/upload/image here');
  background-position: center center;
  background-origin: content-box;
  background-size: cover;
  background-attachment: fixed;
  z-index: -2;
}

/* Now the same background, but with brightness filters*/
.lightning{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://wwwsite.com/upload/image here');
  background-position: center center;
  background-origin: content-box;
  background-size: cover;
  background-attachment: fixed;
  -webkit-filter: brightness(3);
  filter: brightness(3);
  -o-filter: brightness(3);
  -moz-filter: brightness(3);
  z-index: -1;
}

/*Now just a opacity animation*/
.flashit{
-webkit-animation: flash ease-out 7s infinite;
-moz-animation: flash ease-out 7s infinite;
animation: flash ease-out 7s infinite;
animation-delay: 2s;
}

@-webkit-keyframes flash {
	from { opacity: 0; } 
  92% { opacity: 0; }
	93% { opacity: 0.6; }
  94% { opacity: 0.2; }
  96% { opacity: 0.9; } 
	to { opacity: 0; }
}

@keyframes flash {
	from { opacity: 0; } 
    92% { opacity: 0; }
	93% { opacity: 0.6; }
    94% { opacity: 0.2; }
    96% { opacity: 1; } 
	to { opacity: 0; }
}
/*End! is that simple! */

/*Now just some stupid logo to get some look and feel */
#logo{
  z-index:1000;
  width: 100%;
  font-size: 6rem;
  color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -18rem;
  margin-top: -2rem;
  font-weight: 900;
}
#logo span{ font-weight: 100;}

html , body{
  font-family: "Titillium Web", "lato" , sans-serif;
}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:200,900|Lato:100,300,900);

@media screen and (max-width: 630px){
  #logo{
    font-size: 3rem;
    margin-left: -9rem;
    margin-top: -1rem;
  }
}

this is really awesome if you want that background to flash

if you want your h1 forums to flash with it add this in the index

<div id="bg" class="banner flashit">
  <h1 class='ipsType_pageTitle'>
		{lang="Forums"}
	</h1>
<p>hello world</p>
<ul class="actions">
</ul>
</div>

 

Edited by mr-pimpen
adding

Share this post


Link to post
Share on other sites
What do you think? Remember the human.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×