◄ Min  Size Fonts: + | - | ± Color: Max ►

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" />DEMOpost-img
Happy blogging \m/

Loading...
XUpdate CSS Trick Lawas
Update CSS Trick Lawas yaitu memperbaharui penulisan kode-kode CSS pada beberapa tutorial sebelumnya.
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE