Jump to content
FLASH SALE (EXTENDED TO 2/21/19)! Take 20% off all store products! Read more... ×
We're hiring! We are accepting applications for Junior Moderator, Uploader, and Support Team. Read more... ×
Having trouble connecting to our Discord server or has your role been mistakenly removed? Let us know! Read more... ×
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
  • Like 1

Share this post


Link to post
Share on other sites

Very cool I must say.

  • Thanks 1

Share this post


Link to post
Share on other sites

This looks better than i expected. Good job!

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.

×