Transparent Plastic Card With Blurred Background Using jQuery And CSS3

File Size: 1.11 MB
Views Total: 3325
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 class="content-image"></div>
      <p class="text-contents">
        Card descriptions
      <p class="auto-graph">
        More content
    <div class="card-bg">

4. Create card controls as this:

<div class="control-panel">
    <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>

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:


  • bugfix


  • v1.0.8


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