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

×