Update CSS Trick Lawas

Dari pada tidak mosting, bagi-bagi resource saja lah :D Satu web keren Edan Kwan ternyata suka berbagi kreasi di CodePen Kreasinya mantap-mantap :-bd Tiap hari datang ke Codepen ternyata banyak untungnya ;))
Salah satu contoh tutorial CSS sederhana membuat blank avatar (no image) full hanya pakai variabel CSS!

Read here Avatar.

.avatra {
    position: relative;
    overflow: hidden;
    width: 70px;
    height: 70px;
}
.avatra:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 70%;
    height: 45%;
    margin: 0 0 0 -35%;
    background: #21416b;
    -webkit-border-radius: 100% 100% 0 0;
    border-radius: 100% 100% 0 0;
}
.avatra:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 21%;
    width: 40%;
    height: 40%;
    margin: 0 0 0 -20%;
    background: #21416b;
    -webkit-box-shadow: 0 0 0 1px #debe94;
    box-shadow: 0 0 0 1px #debe94;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

Markup HTML<div class="avatra"></div>

Master David Walsh bercerita tentang create a sheen logo effect with css yang terinspirasi dari ShineTime serupa dengan ini create an image swipe/shimmer effect with css transitions!

Setelah itu gue menclok ke polaroid collage yakni membuat album gambar dengan teknik CSS3 :nth-child() selector Koben cuma mau mengambil teknik grayscale yg ada di sana. Kenapa e why, because dulu aku pernah juga memosting hal begituan make image to grayscale use svg for blogger. Ternyata kode SVG Grayscale dapat di tulis dengan gaya internal style sheet! Taruh kode diatas/sebelum kode </b:skin>

.collage {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
}
.collage:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

Pemakaian<img src="" alt="" class="collage" />DEMO
Happy blogging \m/