LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Battlefield 3 Patch

A new patch is available: 13.37 GB

Please download the patch or you can not play online...


...downloading

CSS
@import url(https://fonts.googleapis.com/css?family=Doppio+One);

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing:antialiased;
}

html, 
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: left;
  
  background:#000;
}

/* 
 * background image
 */
#full_page {
  position:absolute; 
  z-index:1; 
  width:110%; 
  height:110%;
  opacity:.3;

  animation: test 5s infinite ease-in-out forwards;
  animation-delay:1.5s;
}

.bf3-dialog {
  position:absolute;
  z-index:1337;
  top:10%;
  left:25%;
  width:50%;
  font: 1em 'Doppio One', sans-serif;
  color:#fff;
  text-transform: uppercase;
  text-shadow: 0 -1px 1px #333, 0 1px 1px #000, -1px 0px 2px rgba(0, 0, 0, .2);
  cursor:default;
  animation: flattr 5s infinite ease-in forwards;
  animation-delay:1.5s;
  user-select: none;
}

.bf3-title {
  position:relative;
  background: rgba(71,160,255,0.8);
  background: linear-gradient(top, rgba(71,160,255,0.8) 0%,rgba(0,49,99,0.6) 100%);
  border: 2px solid rgba(255, 255, 255, .2);
  border-top: 2px solid rgba(255, 255, 255, .6);
  border-bottom: 2px solid rgba(30, 30, 30, .5);
  padding:8px;
  box-shadow:0 2px 6px -2px rgba(0, 0, 0, .6);
}

.bf3-title:after {
  position:absolute;
  background:rgba(255,255,255,.2);
  content:'\273B';
  font-size:70px;
  line-height:75px;
  right:8px;
  top:-50%;
  width:80px;
  height:80px;
  border-radius:5px;
  text-align:center;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 0 8px rgba(0, 0, 0, .7);
  color:rgba(255,255,255, .8);
}

.bf3-content {
  background:rgba(26, 25, 34, .8);
  border:1px solid rgba(26, 25, 34, .3);
  border-top:none;
  padding:5%;
}

.bf3-content p {
  margin:0;
  padding:0;
  width:100%;  
  padding:0;
  margin:0;
}

.bf3-content hr {
  background:rgba(255,255,255,.7);
  height:2px;
  border:none;
}

.bf3-slider {
  height:20px;
  width:90%;
  margin:0 5%;
  margin-top:3%;
  
  background:#fff;
  border:4px solid #fff;
  display:inline-block;
  overflow:hidden;
}

.bf3-slider span[role="position"] {
  background:#000;
  height:50px;
  display:inline-block;
  animation: slider 5s infinite ease-out forwards;
  animation-delay:1.5s;
}

@keyframes flattr {
  0%, 5%, 100% {transform:translate(0, 0);opacity:1;}
  1% {
      transform:translate(5px, 0);
      opacity:.6;
      -webkit-filter:blur(5px);
      filter:blur(5px);
      color: rgba(0, 168, 255, .7);
      text-shadow: 5px 5px 0 rgba(255, 0, 180, .7);
  }
  2% {
    	transform:translate(-5px, 0);
    	opacity:.6;
     
  }
  3% {
    	transform:translate(5px, 0);
    	opacity:.6;
  }
  4% {
    	transform:translate(-5px, 0);
    	opacity:.6;
  }
  
  10% {
    -webkit-filter:blur(0);
    filter:blur(0);
  }
  
  11% {
    color:#fff;
    text-shadow: 0 -1px 1px #333, 0 1px 1px #000, -1px 0px 2px rgba(0, 0, 0, .2);
  }
}

@keyframes test {
  0%, 5%, 100% {transform:translate(0, 0);}
  1% {
      transform:translate(25px, 0);
      opacity:.7;
      -webkit-filter: sepia(100%) invert(60%);
      filter: sepia(100%) invert(60%);
  }
  2% {
      transform:translate(-25px, 0);
      opacity:.7;
  }
  3% {
      transform:translate(25px, 0);
      opacity:.7;
  }
  4% {
      transform:translate(-25px, 0);
      opacity:.7;
  }
  30% {
     -webkit-filter: sepia(0) invert(0);
     filter: sepia(0) invert(0);
  }
  
  50% {
    opacity:.3;
  }
}

@keyframes slider {
  0% {
    opacity:.6;
    width:5%;
  }
  20% {
    width:30%;
  }
  30% {
    opacity:1;
     -webkit-filter: sepia(50%) invert(20%);
     filter: sepia(50%) invert(50%);
  }
  
  100% {
    width:60%;
  }
}
JS
/*
    Battlefield 3 Dialog

    A tribute to Battlefield 3. You're under attack.
    (This is how a dialog looks like in Battlefield 3 on my xbox 360)


    2012 by Tim Pietrusky
    timpietrusky.com
*/

/* 
 * Drag the dialog 
 */
draginit();

$('.bf3-dialog').mousedown(function() {
  dragstart(this);
});

$('.bf3-dialog').mouseup(function() {
  dragstop(this);
});


var dragobjekt = null,
    dragx = 0,
    dragy = 0,
    posx = 0,
    posy = 0;

function draginit() {
  document.onmousemove = drag;
  document.onmouseup = dragstop;
}

function dragstart(element) {
  dragobjekt = element;
  dragx = posx - dragobjekt.offsetLeft;
  dragy = posy - dragobjekt.offsetTop;
}

function dragstop() {
  dragobjekt = null;
}

function drag(e) {
  posx = document.all ? window.event.clientX : e.pageX;
  posy = document.all ? window.event.clientY : e.pageY;
  if (dragobjekt != null) {
    dragobjekt.style.left = (posx - dragx) + "px";
    dragobjekt.style.top = (posy - dragy) + "px";
  }
}
Host Instantly Drag and Drop Website Builder

 

Description

A tribute to Battlefield 3: Dialog. You're under attack. SHIT!
Term
Mon, 11/27/2017 - 21:53

Related Codes

Pen ID
Pen ID
Pen ID