A Pen by keremciu.

index.html

    <div class="toolbar">
        <div class="tabs">
            <ul>
                <li class="tabitem active"><a href="#box1">ALL<span></span></a></li>
                <li class="tabitem"><a href="#box2">FAVORITES<span></span></a></li>
            </ul>
        </div>
    </div>
    <div class="content">
        <div id="box1" class="box show">
            <div class="item">
                <div class="itemhead">
                    <img src="http://www.polymer-project.org/samples/tutorial/images/avatar-01.svg" width="70" height"70" />
                    <h2>Eric</h2>
                    <div class="heart">
                        <svg viewBox="0 0 24 24" style="pointer-events: none; width: 24px; height: 24px; display: block;"><g id="favorite"><path d="M12,21.4L10.6,20C5.4,15.4,2,12.3,2,8.5C2,5.4,4.4,3,7.5,3c1.7,0,3.4,0.8,4.5,2.1C13.1,3.8,14.8,3,16.5,3C19.6,3,22,5.4,22,8.5c0,3.8-3.4,6.9-8.6,11.5L12,21.4z"></path></g></svg>
                    </div>
                </div>
                <p>Have you heard about the Web Components revolution?</p>
            </div>
        </div>
        <div id="box2" class="box">
            <div class="item">
                <div class="itemhead">
                    <img src="http://www.polymer-project.org/samples/tutorial/images/avatar-02.svg" width="70" height"70" />
                    <h2>Rob</h2>
                    <div class="heart">
                        <svg viewBox="0 0 24 24" style="pointer-events: none; width: 24px; height: 24px; display: block;"><g id="favorite"><path d="M12,21.4L10.6,20C5.4,15.4,2,12.3,2,8.5C2,5.4,4.4,3,7.5,3c1.7,0,3.4,0.8,4.5,2.1C13.1,3.8,14.8,3,16.5,3C19.6,3,22,5.4,22,8.5c0,3.8-3.4,6.9-8.6,11.5L12,21.4z"></path></g></svg>
                    </div>
                </div>
                <p>Loving this Polymer thing.</p>
            </div>
        </div>
    </div>

Material-Design-App.markdown

Material Design App

Hello Everyone! I loved Material Design and I developed the following polymer app without Canvas and Polymer.

You can use Only CSS3 - Pure Javascript!

I hope you like it :)

http://www.polymer-project.org/samples/tutorial/finished/index.html

A Pen by keremciu on CodePen.

License.

script.js

/*
	Kerem Sevencan @keremciu
  
  ----------------
	Hello Everyone!
 	- I loved Material Design and I developed the following polymer app without Canvas and Polymer.
  
  You can use Only CSS3 - Pure Javascript!
  
  I hope you like it :)
  
  http://www.polymer-project.org/samples/tutorial/finished/index.html
  
 */
window.onload = function() {
    var heart = document.getElementsByClassName("heart");
    var classname = document.getElementsByClassName("tabitem");
    var boxitem = document.getElementsByClassName("box");

    var clickFunction = function(e) {
        e.preventDefault();
        var href = this.getElementsByTagName("a")[0].getAttribute("href").replace("#","");
        for(var i=0;i<boxitem.length;i++){
            boxitem[i].className =  boxitem[i].className.replace(/(?:^|\s)show(?!\S)/g, '');
        }
        document.getElementById(href).className += " show";
        for(var i=0;i<classname.length;i++){
            classname[i].className =  classname[i].className.replace(/(?:^|\s)active(?!\S)/g, '');
        }
        this.className += " active";
        this.getElementsByTagName("span")[0].className += 'active';
        var left = this.getElementsByTagName("a")[0].getBoundingClientRect().left;
        var top = this.getElementsByTagName("a")[0].getBoundingClientRect().top;
        var consx = (e.clientX - left);
        var consy = (e.clientY - top);
        this.getElementsByTagName("span")[0].style.top = consy+"px";
        this.getElementsByTagName("span")[0].style.left = consx+"px";
        this.getElementsByTagName("span")[0].className = 'clicked';
        this.getElementsByTagName("span")[0].addEventListener('webkitAnimationEnd', function(event){
            this.className = '';
        }, false);  
    };

    for(var i=0;i<classname.length;i++){
        classname[i].addEventListener('click', clickFunction, false);
    }
    for(var i=0;i<heart.length;i++){
        heart[i].addEventListener('click', function(e) {
            var classString = this.className, nameIndex = classString.indexOf("active");
            if (nameIndex == -1) {
                classString += ' ' + "active";
            }
            else {
                classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+"active".length);
            }
            this.className = classString;

        }, false);
    }
}

style.css

@import url(http://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,300);
body {margin:0;background:#E5E5E5;font-weight:300;font-family: "RobotoDraft", Helvetica, Arial, sans-serif;}
.toolbar {height:64px;background:#03A9F4}
.tabs {padding-top:14px}
.tabs ul {list-style:none;margin:0;width:100%;overflow:hidden;padding:0;margin-left:16px;}
.tabs ul li {float:left;width:100px}
.tabs a {position:relative;color:white;text-decoration:none;display:block;width:100px;height:50px;text-align:center;line-height:52px;font-weight:500;font-size:14px;color:rgba(255,255,255,0.6);overflow:hidden;}
.tabs .active a {color:white;}
.tabs .active a:after {height:2px;width:100%;display:block;content:" ";bottom:0px;left:0px;position:absolute;background:#FFFF8D;
-webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;-moz-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;transition:all 1s cubic-bezier(0.4, 0.0, 1, 1);}
.tabs a span {position:absolute;margin-left:-40px;margin-top:-24px;width:80px;background:rgba(255,255,141,1);height:100%;display:block;border-radius:50%;opacity:0;}
.tabs a span.clicked {-webkit-animation: expand 0.8s cubic-bezier(0.4, 0.0, 0.4, 1) 0s normal;-moz-animation: expand 0.8s cubic-bezier(0.4, 0.0, 0.4, 1) 0s normal;border-bottom:2px solid #FFFF8D;}
.content {box-shadow:inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);height:500px;padding-top:50px;position:relative;top:0px;overflow:hidden;}
.item {background:white;width:440px;padding-bottom:30px;margin:0 auto;}
.itemhead {padding:30px;overflow:hidden;position:relative;}
.itemhead img {border-radius:100%;float:left}
.itemhead h2 {float:left;margin-left:20px;}
.itemhead .heart {cursor:pointer;position:absolute;right:4px;top:4px;padding:7px;border-radius:2px}
.item p {padding:0px 30px;font-size:19px;line-height:26px;margin:0;}

.heart:hover {box-shadow:0 1px 0 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.1)}
.heart #favorite {fill:#636363}
.heart.active #favorite {fill:#DA4336;}

.box {display:none;height:500px;overflow:auto;position:relative;overflow-x:hidden;}
.box.show {display:block;}

@-webkit-keyframes expand {
    0% {
        background:rgba(255,255,141,1);
        opacity:1;
        border-radius:100%;
        transform: scale(0);
        -webkit-transform: scale(0);
        -moz-transform:scale(0);
    }
    50% {
        background:rgba(255,255,141,0.8);
        border-radius:50%;
    }
    100% {
        background:rgba(255,255,141,0);
        transform: scale(3);
        border-radius: 0;
        -webkit-transform: scale(3);
        -moz-transform:scale(3);
        opacity:1;
    }
}
@-moz-keyframes expand {
    0% {
        background:rgba(255,255,141,1);
        opacity:1;
        border-radius:100%;
        transform: scale(0);
        -moz-transform:scale(0);
    }
    50% {
        background:rgba(255,255,141,0.8);
        border-radius:50%;
    }
    100% {
        background:rgba(255,255,141,0);
        transform: scale(3);
        border-radius: 0;
        -moz-transform:scale(3);
        opacity:1;
    }
}
@-webkit-keyframes border-expand {
    0% {
        opacity:0;
        width:0;
    }
    100% {
        opacity:1;
        width:100%;
    }
}
@-moz-keyframes border-expand {
    0% {
        opacity:0;
        width:0;
    }
    100% {
        opacity:1;
        width:100%;
    }
}