A Pen by Sean Mateer

undefined

blurrrrrr

Thumbnail
This awesome code was written by seanmateer, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright seanmateer ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Sean Mateer</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!--draggable finder window-->


<div class="desktop">
<img src="http://hdwallpapersfit.com/wp-content/uploads/2015/03/os-x-yosemite-wallpapers-hd.jpg"</img>
</div>

<div class="finder-window">
  <div class="top-bar">
    <ul class="circles">
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="sidebar"></div>
  <div class="main"></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/seanmateer/a-pen-by-sean-mateer-MYwWJx */
html, body {
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

img {
  width: 100%;
  height: auto;
  position: fixed;
}

.finder-window {
  position: relative;
  width: 700px;
  height: 450px;
  display: block;
  overflow: hidden;
  cursor: move;
}

.top-bar {
  display: block;
  height: 75px;
  width: 100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5e3e5), color-stop(100%, #cecdce));
  border-radius: 6px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom: 1px solid #8E8E8F;
}

.circles {
  list-style-type: none;
  padding: 8px 0 0 10px;
}
.circles li {
  float: left;
  margin-right: 7px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}
.circles li:nth-child(1) {
  background-color: #DF625A;
  border: 1px solid #d9463c;
}
.circles li:nth-child(2) {
  background-color: #EEBE41;
  border: 1px solid #ebb320;
}
.circles li:nth-child(3) {
  background-color: #76C94E;
  border: 1px solid #63ba39;
}

.sidebar {
  float: left;
  border-right: 1px solid #8E8E8F;
  display: block;
  background-color: white;
  width: 180px;
  height: 375px;
  overflow: hidden;
}

.main {
  float: left;
  display: block;
  background-color: white;
  width: 519px;
  height: 375px;
}

.content-blurred {
  padding: 0 1rem;
  -webkit-filter: blur(4px);
  filter: url(#blur-effect);
  opacity: .35;
  z-index: 1;
}
.content-blurred .desktop img {
  position: fixed;
  top: 0px;
  left: 0px;
}


/*Downloaded from https://www.codeseek.co/seanmateer/a-pen-by-sean-mateer-MYwWJx */

var content = document.querySelector('.desktop');
var duplicate = content.cloneNode(true);
var contentBlurred = document.createElement('div');
contentBlurred.className = 'content-blurred';
contentBlurred.appendChild(duplicate);

$('.sidebar').append(contentBlurred);

$(function() {
    var isDragging = false;
    $(".window")
    .mousedown(function() {
        $(window).mousemove(function() {
            isDragging = true;
            $(window).unbind("mousemove");
          		
        });
    })
    .mouseup(function() {
        var wasDragging = isDragging;
        isDragging = false;
        $(window).unbind("mousemove");
    });  
});

$( ".finder-window" ).draggable();

Comments