Transparent Plastic Card With Blurred Background Using jQuery And CSS3

Makes use of jQuery, jQuery UI and CSS/CSS3 to create a draggable, toucn-enabled, transparent plastic card with blurred background.

How to use it:

1. Include the necessary jQuery and jQuery UI JavaScript libraries on the webpage.

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>

2. Include the jQuery UI Touch Punch library to provide the touch event support.

<script src="jquery.ui.touch-punch.min.js"></script>

3. The main HTML structure for the transparent plastic card

<div class="contents">
  <div id="t-card" class="card">
    <div class="card-contents">
      <div class="color-button-container">
        <div id="cb1" class="color-button card-color-white"></div>
        <div id="cb2" class="color-button card-color-grey"></div>
        <div id="cb3" class="color-button card-color-black"></div>
        <div id="cb4" class="color-button card-color-clear"></div>
      </div>
      <h1>Title</h1>
      <div class="content-image"></div>
      <p class="text-contents">
        Card descriptions
      </p>
      <p class="auto-graph">
        More content
      </p>
    </div>
    <div class="card-bg">
    </div>
  </div>
</div>

4. Create card controls as this:

<div class="control-panel">
  <p>
    <span>blur : </span>
    <input id="bNum" type="number" value="10" min="1" max="50">
    <button id="bBlur">applyBlur</button>
    <button id="bBg">changeBg</button>
    <button id="bFix">bgFixOn</button>
    <button id="bTog">boundaryOff</button>
  </p>
</div>

5. Place the following JavaScript and CSS files into the webpage and done.

<link rel="stylesheet" href="tc_style.css">
<script src="tc_script.js"></script>

Change log:

2017-02-19

• bugfix

2017-02-16

• v1.0.8

2017-01-29

• FIx cardBg height bug

---

This awesome jQuery plugin is developed by byeolbit. For more Advanced Usages, please check the demo page or visit the official website.