Minggu, 02 Oktober 2016

CSS Border dan cara membuat bubble comment

Bubble comment CSS3

Border trick - Berjumpa kembali pada kategori tips dan trick, momen kali ini saya akan berbagi beberapa tips dan trik seputan border (border, border-radius, border-image).

#CSS Triangle

CSS Triangle

CSS Triangle atau lebih sobat kenal dengan triangle border adalah sebuah trik border yang memadukan tiga border dalam satu elemen dengan satu elemen warnanya di transparankan.lihat contoh dibawah ini

< div class="atas" > < / div >

< div class="kanan" > < / div >

< div class="bawah" > < / div >

< div class="kiri" > < / div >

.atas {
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: #34495E;
}

.kanan {
width: 0;
height: 0;
border: 8px solid transparent;
border-right-color: #34495E;
}

.bawah {
width: 0;
height: 0;
border: 8px solid transparent;
border-bottom-color: #34495E;
}

.kiri {
width: 0;
height: 0;
border: 8px solid transparent;
border-left-color: #34495E;
}

Deskripsi singkat syntax diatas sebagai berikut: "penjelasan paling sederhana adalah karena setiap elemen pada html itu berbentuk persegi panjang dan memiliki empat sisi elemen dan secara teknis pasti memiliki akan memiliki empat pembatas elemen (border), jika elemen diberikan lebar (width) 0 dan tinggi (height) 0, tiga border yang diberi warna dan empat border yang diberi style solid maka secara otomatis peramban akan membacanya sebagai triangle border. Bagaimana mudah bukan... pasti sobat akan bingung dikarenakan masalah cara penulisan yang berbeda-beda, karena memang banyak jalan menuju roma bukan.... Lalu bagaimana membuat commenting MWB mirip dengan tooltip website profesional atau mirip dengan tampilan chat pada social media app, atau perpesanan iPhone atau populernya disebut bubble comment ? Simak tips dan triknya berikut ini :

#Social media bubble chat

Bubble chat

< div id="comments" > < / code >

< div class="comment" > < / code >

< div class="comment-header" >< / code >

< h5 class="title" >< a href="#" rel="nofollow" >Anonymous< / a >< / h5 > on 00:00, dd-mm-yyyy < / div >

< div class="comment-content" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. < / div >< / div >

< div class="comment" >

< div class="comment-header" >

< h5 class="title" >< a href="#" rel="nofollow" >Anonymous< / a >< / h5 > on 00:00, dd-mm-yyyy < / div >

< div class="comment-content" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. < / div > < / div >

< div class="comment" >

< div class="comment-header" >

< h5 class="title" > < a href="#" rel="nofollow" > Anonymous < / a > < / h5 > on 00:00, dd-mm-yyyy < / div >

< div class="comment-content" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. < / div > < / div >

< div class="comment" >

< div class="comment-header" >

< h5 class="title" > < a href="#" rel="nofollow" > Anonymous < / a > < / h5 > on 00:00, dd-mm-yyyy < / div >

< div class="comment-content" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. < / div > < / div >

< / div >

< / div >

a {
font-size: 22px;
text-transform: uppercase;
font-weight: 200;
color: #555;
}

#comments {
margin: 0;
padding: 20px 80px;
}

.comment-header {
padding: 3px 7px 0;
color: #555;
font-weight: normal;
}

.comment-content {
padding: 0 7px 5px;
}

.comment::before {
display: block;
content: '';
border: 18px solid transparent;
border-top-color : #FFF;
position: absolute;
top: 0;
left: -17px;
}

.comment::after {
display: block;
content: '';
width: 64px;
height: 64px;
position: absolute;
top: 0px;
left: -75px;
background:
url('images/guest-pic.png')
no-repeat
50% 50%;
background-size: contain;
border-radius: 70px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

.comment {
max-width: 100%;
margin: 15px auto 15px 0;
padding: 0 10px 10px;
background: #FFF;
position: relative;
color: #555;
font-size: 16px;
border-radius: 0 9px 9px 9px;
}

#comments .comment:nth-of-type(even)::before {
display: block;
content: '';
border: 18px solid transparent;
border-top-color : #DEFFC6;
position: absolute;
top: 0;
left: auto;
right: -17px;
}

.comment:nth-of-type(even)::after {
display: block;
content: '';
width: 64px;
height: 64px;
position: absolute;
bottom: -35px;
right: -75px;
left: auto !important;
background:
url('images/author-pic.png')
no-repeat
50% 50%;
background-size: contain;
border-radius: 70px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

.comment:nth-of-type(even) {
max-width: 80%;
margin: 15px 0px 15px auto;
padding: 10px;
background: #DEFFC6;
position: relative;
color: #555;
font-size: 16px;
border-radius: 9px 0 9px 9px;
}

#Deskripsi Bubble chat

Kenapa diletakkan pada pseudo element ? Karena Triangle border menunjukan arah datangnya bubble chat tersebut. Dan elemen .comment sebagai konten dari bubble chat itu sendiri

#Bubble chat seperti iPhone

Bubble iPhone Chat messages

< div id="comments" > < / code >

< div class="comment" > < / code >

< div class="comment-header" >< / code >

< h5 class="title" >< a href="#" rel="nofollow" >Anonymous< / a >< / h5 > on 00:00, dd-mm-yyyy < / div >

< div class="comment-content" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. < / div >< / div >

< div class="comment" >

< div class="comment-header" >

< h5 class="title" >< a href="#" rel="nofollow" >Anonymous< / a >< / h5 > on 00:00, dd-mm-yyyy < / div >

< div class="comment-content" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. < / div > < / div >

< div class="comment" >

< div class="comment-header" >

< h5 class="title" > < a href="#" rel="nofollow" > Anonymous < / a > < / h5 > on 00:00, dd-mm-yyyy < / div >

< div class="comment-content" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. < / div > < / div >

< div class="comment" >

< div class="comment-header" >

< h5 class="title" > < a href="#" rel="nofollow" > Anonymous < / a > < / h5 > on 00:00, dd-mm-yyyy < / div >

< div class="comment-content" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. < / div > < / div >

< / div >

a {
font-size: 22px;
text-transform: uppercase;
font-weight: 200;
color: #FFF;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

#comments {
margin: 0;
padding: 20px 80px;
}

.comment-header {
padding: 3px 7px 0;
}

.comment-content {
padding: 0 7px 5px;
}

.comment::before {
display: block;
content: '';
border: 18px solid transparent;
border-bottom-color : #E7E3EF;
position: absolute;
bottom: 7px;
left: -17px;
border-radius: 20px;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}

.comment::after {
display: block;
content: '';
width: 64px;
height: 64px;
position: absolute;
bottom: -35px;
left: -75px;
background:
url('images/guest-pic.png')
no-repeat
50% 50%;
background-size: contain;
border-radius: 70px;
}

.comment {
max-width: 80%;
margin: 15px auto 15px 0;
padding: 0 10px 10px;
background: #E7E3EF;
position: relative;
color: #555;
font-size: 16px;
border-radius: 30px;
}

#comments .comment:nth-of-type(even)::before {
display: block;
content: '';
border: 18px solid transparent;
border-bottom-color : #219AFF;
position: absolute;
bottom: 7px;
left: auto;
right: -17px;
border-radius: 20px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);
}

.comment:nth-of-type(even)::after {
display: block;
content: '';
width: 64px;
height: 64px;
position: absolute;
bottom: -35px;
right: -75px;
left: auto !important;
background:
url('images/author-pic.png')
no-repeat
50% 50%;
background-size: contain;
border-radius: 70px;
}

.comment:nth-of-type(even) {
max-width: 80%;
margin: 15px 0px 15px auto;
padding: 10px;
background:
-webkit-linear-gradient(
to bottom,
#52C7F7,
#219AFF
);
background:
-moz-linear-gradient(
to bottom,
#52C7F7,
#219AFF
);
background:
-o-linear-gradient(
to bottom,
#52C7F7,
#219AFF
);
background:
linear-gradient(
to bottom,
#52C7F7,
#219AFF
);
position: relative;
color: #FFF;
font-size: 16px;
border-radius: 30px;
}

Wowow... Lumayan kan buat sela-sela comment.

#Gradient border

CSS Border gradient MWB

Baru mendengar tentang yang satu ini dan bertanya apakah ini mungkin ? Jawabanya ya, dengan memanfaatkan border-image dan gradient akan didapati border gradient. Langsung saja menuju link demonya

Bagaimana sobat sekalian sudah memahaminya ? Atau malah tambah kebingungan ... Curahkan saja pada Kotak komentar.

Terima kasih telah berkunjung dan semoga bermanfaat !.

#Related tutorial

  1. 3 Cara mengganti font face pada css MWB
  2. Tutorial step by step membuat css MWB via hp
  3. Animation
CSS Triangle MWB, CSS Gradient MyWapBlog, CSS tricks

Rabu, 28 September 2016

Ulquiorra CSS Highend Anime

Ulquiorra CSS highend Anime - Selamat datang kembali sobat, kesempatan kali ini masih bisa menyapa sobat semua. Terima kasih sebelumnya untuk MyWapBlog team telah mengapresiasi hobi saya dengan mem-postkan review tentang saya kemarin. Untuk sobat semua jadi tambah tau siapa saya ya...

Banyak sekali halangan ingin mem-postkan CSS tapi mau bagaimana lagi mencuri kesempatan emas seperti saat ini adalah hal yang terbaik.

Untuk para sobat yang sedang mencari CSS anime, mungkin ini adalah pilihan yang tepat meskipun tadinya mau bertemakan one piece tapi saya tidak menemukan jiwa disana dan saya lebih menjatuhkan pilihan kepada Ulquiorra schiffer karena terinspirasi ketika melihat warna Jungle Green (#34B48B) pada source code milik daud dohiri.

baiklah sobat semua mari kita simak ulasan CSS Highend Ulquiorra pada tabel di bawah ini



CSS MWB Highend Ulquiorra, CSS MWB Anime september 2016
Click image to zoom out


CSS Highend by Eza dwi anandharizky
NameUlquiorra schiffer
CreatorEza dwi anandharizky
CategoryAnime, Flat
TypeHighend (ModernBlack)
FeatureResponsive, Floating menu, cool background, fix all color mixer, Fontawesome, explore it by your self
DemoHome | Single post | About
Download LinkDownload
Validate checkValid CSS3
Import code
Post countBebas

#Cara pemasangan / How to use

  • Salin kode import dalam textarea diatas / copy the code in the textarea above.
  • Sign in akun MWBmu / sign in to your MyWapBlog account.
  • Pilih dasbor / select dashboard link
  • Pilih tema / select and click theme link
  • Pilih ponsel mutakhir / select and click highend
  • Pilih ModernBlack / select ModernBlack
  • Pilih sunting CSS kosong / choose edit css empty
  • Tempelkan kode yang telah di salin tadi ke dalam textarea / paste the code has been copied into textarea
  • Kemudian simpan / then click the save buttons
  • Kunjungi blogmu / visit your blog
  • Muat ulang halaman jika tema belum nampak / reload your page if themes don't appear.

Big thanks untuk sobat daud dohiri karena telah meminta tema ini dan mengirimkan source code kepada saya namun hanya warna jungle green yang saya pakai. Tetapi terima kasih telah membantu.

Postingan yang akan datang mungkin trik atau juga CSS lagi, tapi biarlah menjadi apa adanya. Saya akhiri saja post mengenai Ulquiorra CSS highend Anime.

Terima kasih dan semoga bermanfaat !

#Related CSS

  1. Bootstrap style CSS Highend
  2. MUICSS Highend
  3. Panorama CSS Highend
CSS MWB Terbaru, CSS MWB Anime, CSS Highend, CSS Smarthpone, CSS Super keren, CSS MWB Akhir tahun 2016.

Selasa, 20 September 2016

styled pie menu mwb

Styled pie menu MWB - Selamat datang kembali, setelah sekian lama tidak memposting trik dan tiba-tiba teringat dengan menu CSS ModernBlack yang coba saya modifikasi, dan secara teknis masih banyak bug, meskipun segala kemungkinan telah saya coba :)

Seperti saat saya mencoba nya dengan UC Browser dan tidak berfungsi sama sekali meskipun dari segi tampilan tidak ada perubahan,lihat thumbnail dibawah ini :

Styled pie Menu MWBStyled pie menu MWB

Cara terbaik menampilkan icon pada menu adalah dengan penggunaan icon dari FontAwesome namun untuk kecepatan memuat halaman jadi metode bisa rubah dengan menggunakan atau banyak cara lainya.

Berikut syntax CSSnya :

/* Style pie menu MWB
using FontAwesome icon */
#navigation {
float: left;
}

#open-nav-icon {
position: fixed;
top: 7px;
left: 7px;
height: 50px;
padding: 4px 12px;
cursor: pointer;
margin: 10px 0px 10px 8px;
z-index: 100;
}

#open-nav-icon img {
display: none;
}

#open-nav-icon:before {
background: rgba(211, 211, 211, 0.8);
padding: 5px 10px;
border-radius: 50px;
content: "\f0c9";
color: #FFF;
text-shadow: 2px 2px 3px #222;
position: absolute;
font-size: 2em;
top: 0px;
left: 0px;
z-index: 100;
border: 2px solid #ffffff;
}

#nav-links {
position: fixed;
top: 0;
left: 0;
width: 240px;
height: 240px !important;
z-index: 99;
border-bottom-right-radius: 100%;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
}

#nav-links ul {
margin-top: .5em;
padding: 0px;
text-align: left;
}

#nav-links ul li {
padding: 10px;
color: #FFF;
padding-left: 10px;
margin-left: 140px;
}

#nav-links ul li:nth-of-type(2) {
margin-left: 110px;
padding-bottom: 0;
}

#nav-links ul li:nth-of-type(3) {
margin-left: 70px;
margin-top: -10px;
padding: 0;
}

#nav-links ul li:nth-of-type(4) {
margin-left: 5px;
margin-top: -5px;
padding: 0;
}

#nav-links ul li a {
visibility: hidden;
}

#nav-links ul li a:before {
color: #FFF;
visibility: visible;
font-size: 2em;
content: "\f015";
margin-right: 10px;
background: #22CC71;
border: 2px solid #FFF;
padding: 5px 8px;
border-radius: 100%;
text-shadow: 2px 2px 3px #222;
text-decoration: none;
}

#nav-links ul li+li a:before {
content: "\f007";
background: #F1C40F;
padding: 5px 9px;
}

#nav-links ul li+li+li a:before {
background: #9B59B6;
content: "\f09e";
padding: 5px 9px;
}

#nav-links ul li+li+li+li a:before {
background: #3498DB;
padding: 5px 7px;
content: "\f0e4";
}




Jika anda pengguna desktop silahkan gunakan link demo berikut :

#Deskripsi

  • #open-nav-icon position element absolute menjadikan menu button float(mengambang) dengan posisi tetap(fixed) ketika anda men-scroll halaman kebawah hal yang sama juga harus dilakukan pada selector "#nav-links".
  • #open-nav-icon img sengaja saya gunakan "display: none" agar icon dapat di customisasi sesuai keinginan kita dengan memanfaatkan pseudo-element "::before" pada selector #open-nav-icon nantinya.
  • #open-nav-icon::before Disinilah peran penting FontAwesome ataupun gambar *.png, jika anda gunakan FontAwesome masukan html entity pada property "content: '';" e.g. #open-nav-icon::before ingin dipasangkan icon humburger menu yaitu dengan memasangkan \f0c9 pada property "content: '';" tersebut.
  • #nav-links Disinilah anda akan menemui banyak masalah dengan crossbrowser nantinya. property border sepertinya melengkung sempurna seperti keinginan namun ada apa dengan background yang tidak ikut melengkung ? ini ditemui pada android default browser. Sedangkan yang lainya tidak menjadi kendala, namun anda bisa mengatasinya dengan mengganti background dengan background-image namun anda harus menyiapkan terlebih dahulu gambarnya.
  • #nav-links ul li Kenapa di hidden ? Jawabanya adalah menghilangkan text, kenapa tidak gunakan color: transparent dan font-size: 0 karena tidak semua tampilan pada browser mendukung itu. Dan visibility: hidden adalah pilhan terbaik. Untuk meng-custom icon pada selector #nav-links ul li::before nantinya.

Ok cukup sekian pembahasanya. Semoga tidak menambah kepusingan anda. Dan semoga syntax ini dapat dikembangkan oleh anda penggemar CSS MWB, pertanyaan lain seputar topik ini silahkan anda post kan pada Kotak komentar.

Sekian dari saya dan semoga bermanfaat !.

  1. Multilevel dropdown menu MWB
  2. 3 Cara mengganti font face MWB
  3. Tutorial step by step membuat CSS MWB
Style pie menu MWB, Radial menu, CSS menu, FontAwesome icon, internet icon set, How to, Tutorial

Selasa, 16 Agustus 2016

Kumpulan beberapa library animasi css

Kembali lagi saya menyapa sobat setia blog ini. kali ini bukanlah tutorial yang akan saya berikan, namun beberapa library / kumpulan berbagai animasi, efek hover yang patut sobat coba.

ANIMATE.CSS

Animate CSS

Animate.css adalah kumpulan lebih dari 60 efek CSS yang diciptakan oleh Daniel Eden, seorang desainer di Dropbox. Karya Daniel Eden di Animate.css merupakan inspirasi bagi beberapa CSS efek Libraries lainnya

  1. Lisensi MIT
  2. DEMO
  3. Download from Github

FANCYINPUT

FancyInput CSS

FancyInput Menawarkan khusus dengan interaksi yang berhubungan dengan textarea HTML dan input elemen . Ini akan memberi Anda kemampuan untuk menerapkan efek CSS yang menarik ketika pengguna mengetik ke dalam kolom formulir.

  1. DEMO
  2. Download from Github

MAGIC

MAGIC CSS

Magic adalah koleksi efek CSS3 menarik dari Proyek magic yang terinspirasi oleh karya Daniel Eden di Animate.css dan dikembangkan oleh orang italia. Dengan Magic, Anda dapat dengan mudah trigger animasi CSS dan transisi menggunakan jQuery (atau JavaScript front-end framework pengembangan web pilihan Anda) hanya dengan menetapkan pendengar acara pada objek sasaran HTML Anda dan kemudian menambahkan / menghapus CSS Class animasi.

  1. DEMO
  2. Download from Github

HOVER.CSS

HOVER CSS

Ini adalah koleksi Besar sebanyak 48 efek CSS3 melayang-layang dengan developer front-end, Ian Lunn. Apa yang keren tentang Hover.css itu adalah datang dengan versi SASS, yang benar- benar berguna untuk seluruh banyak untuk kita semua pecinta web desain.

  1. Lisensi MIT
  2. DEMO
  3. Download from Github

EFFECKT.CSS

EFFECKT CSS

Effeckt.css adalah library animasi Ponsel Pertama dan transisi CSS efect. Termasuk Efect yang disumbangkan dan dikuratori oleh desainer untuk memastikan Selera anda. Effeckt.css sangat menekankan pada kinerja, salah satu kriteria yang jika tidak dapat berjalan dengan baik pada 60 fps pada perangkat mobile, itu keluar. Baca 9 gol dari Effeckt.css dan menonton 22 detik video proyek di YouTube untuk mendapatkan sekilas Effeckt.css

  1. Lisensi MIT
  2. DEMO
  3. Download from Github

Oke cukup sekian post kali ini, silahkan yang berminat tinggal didownload dan bermanuver dengan caranya masing-masing, semoga membantu

Library CSS Animasi, Kumpulan efek Animasi dan hover.

Senin, 15 Agustus 2016

Animation

Animation

CSS3 Animation

Animation property pada CSS dapat digunakan untuk menghidupkan banyak property CSS seperti color, background-color, height atau width setiap animasi perlu didefinisikan dengan @keyframes sebagai aturan (at-rule) yang kemudian disebut dengan animasi property, seperti contoh berikut :

 .elemen {
animation: pulse 5s infinite;
}

@keyframes pulse {
0% { background-color: #ca2540; }
100% { background-color: #3468af; }
}

Setiap @keyframes diatas mendefinisikan apa-apa yang terjadi selama animasi berjalan. Misal 0% adalah awal dari animasi dan 100% adalah akhirnya. Keyframes ini dapat dikendalikan dengan singkatan animasi property, atau dengan delapan sub-property dari animasi property itu sendiri, untuk memberikan kontrol lebih, keyframes haruslah dimanipulasi.

Sub-property

  1. animation-name: mendeklarasikan nama animasi yang telah ditulis pada @keyframes
  2. animation-duration: lamanya waktu animasi untuk menyelesaikan satu siklus.
  3. animation-timing-function: membentuk kurva percepatan seperti ease atau linear.
  4. animation-delay: tenggang waktu diantara animasi yang sedang dimuat dan dimulai dari urutan animasi.
  5. animation-direction: menetapkan arah animasi setelah siklus selesai, reset default pada setiap siklus.
  6. animation-iteration-count: jumlah kali animasi harus dilakukan.
  7. animation-fill-mode: konfigurasi yang value nya ditentukan sebelum atau setelah animasi. Misalnya sobat dapat mengatur keadaan terakhir animasi untuk tetap pada layar, atau sebaliknya.
  8. animation-play-state: pause atau play animasi.
 @keyframes stretch {
0% { background-color: #ca2540; }
100% { background-color: #3468af; }
}

.element {
animation-name: stretch;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}

/* sama dengan singkatan seperti ini: */

.element {
animation:
stretch
1.5s
ease-out
0
alternate
infinite
none
running;
}

Berikut daftar lengkap value sub-property yang dapat sobat gunakan.

  1. animation-timing-function:
    ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) e.g. cubic-bezier(0.5, 0.2, 0.3, 0.1)
  2. animation-duration:
    Xs atau Xms e.g. 5s 500ms
  3. animation-delay:
    Xs atau Xms e.g. 3s 300ms
  4. animation-iteration-count:
    X e.g. 1
  5. animation-fill-mode:
    forwards, backwards, both, none
  6. animation-direction:
    normal, alternate
  7. animation-play-state:
    paused, running, running

Beberapa langkah animasi

Jika animasi memiliki awal yang sama dan property yang sama, sobat bisa menggunakan tanda koma sebagai pemisah antara 0% dan 100% nilai dalam @keyframes.

 @keyframes pulse {
0%, 100% { background-color: #fcb150; }
50% { background-color: #ca2540; }
}

Beberapa animasi

Sobat dapat menggunakan tanda koma (,) sebagai pemisah value untuk menyatakan beberapa animasi pada selector. Pada contoh dibawah ini saya akan mengubah warna lingkaran dalam @keyframes sementara itu juga menyenggol dari sisi ke sisi dengan yang lainya.

 .element {
animation: pulse
3s
ease
infinite
alternate,
nudge
5s
linear
infinite
alternate;
}

Performa

Memakaikan animasi kebanyak property yang dikhawatirkan adalah performanya. Karena ada beberapa property yang tidak dapat dianimasikan. Jadi kita harus hati-hati sebelum memakaikan animasi ke berbagai property, namun ada beberapa kombinasi tertentu yang aman dipergunakan

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity

Property animatable

MDN telah merilis daftar property yang dapat dianimasikan buka link berikut untuk melihat daftarnya MDN CSS Animated properties list

Browser yang mendukung.
Chrome : 6+
Firefox : 5+
Opera : 12+
Safari : 5+
IE : 10+
Android : 4.4+
iOS : 4+

Prefix

Meskipun property animasi berjalan baik pada browser versi keluaran terbaru, namun kita ingin mendukung sebanyak mungkin browser versi keluaran lama, dalam hal ini kita perlu sekali menggunakan vendor prefix.

 .elemen {
-webkit-animation: NAMA KEYFRAME 5s infinite;
-moz-animation: NAMA KEYFRAME 5s infinite;
-o-animation: NAMA KEYFRAME 5s infinite;
animation: NAMA KEYFRAME 5s infinite;
}


@-webkit-keyframes NAMA KEYFRAME {
0% { opacity: 0; }
100% { opacity: 1; }
}

@-moz-keyframes NAMA KEYFRAME {
0% { opacity: 0; }
100% { opacity: 1; }
}

@-o-keyframes NAMA KEYFRAME {
0% { opacity: 0; }
100% { opacity: 1; }
}

@keyframes NAMA KEYFRAME {
0% { opacity: 0; }
100% { opacity: 1; }
}
MWB CSS Animation. Cara membuat animasi di MWB,

Selasa, 09 Agustus 2016

Linear gradient

Linear Gradient MyWapBlog

Bertemu lagi dengan saya dalam kesempatan kali ini, kali ini kita akan ulas habis bagaimana membuat background gradasi atau lebih familiar dengan gradient, dan akan berbagi sedikit tips tentang ini.

Sobat mungkin apakah mungkin membuat background gradient tanpa gambar dengan css3 saja ? Dan jawabanya sangat mungkin sekali dan gradient sebenarnya adalah background-image, ada tiga cara membuat semuanya mungkin yaitu menggunakan linear-gradient, radial-gradient dan repeating-linear-gradient.

Linear gradient

Linear gradient adalah gambar gradasi yang sudah banyak kita ketahui. Linear-gradient akan mulai dari kiri ke kanan (left-to-right), atas kebawah (top-to-bottom), atau dari sudut yang sobat pilih.

Tidak perlu deklarasi berlebih untuk menerapkan linear gradient dari atas kebawah (top-to-bottom) karena ini adalah parameter bawaan dengan atas sebagai sumbu utamanya, lebih jelas lihat contoh berikut ini :

.gradient {
background-image: linear-gradient(
red,
#16a085
);
}

Gunakan koma sebagai pembatas antar warna-warna dan parameter, warna yang sobat gunakan bisa berupa Hex, rgba, nama warna, hsl, dsb.

Untuk membuat tampil dari kiri ke kanan(left-to-right), sobat bisa menggunakan parameter "to" seperti "to right" sebelum menuliskan kode warna.

.gradient {
background-image: linear-gradient(
to right,
red,
#16a085
);
}

Jika sobat menginginkan bagian sudut kiri bawah (bottom-left) sebagai sumbu utama dan menuju ke kanan atas (top-right) sebagai sumbu akhir sobat tinggal gunakan "to top right" sebagai parameter.

.gradient {
background-image: linear-gradient(
to top right,
red,
#16a085
);
}

Jika box element membentuk bangun bujur sangkar, dan sudutnya membentuk 45 derajat, sobat bisa gunakan cara berikut :

.gradient {
background-image: linear-gradient(
45deg,
red,
#16a085
);
}

Pada kenyataanya sobat tidak dibatasi menggunakan dua warna saja, melainkan banyak warna yang bisa sobat gunakan dan memisahnya menggunakan koma.

.gradient {
background-image: linear-gradient(
#f1c40f,
#3468af,
#16a085,
#34495e,
#27ae60,
#00ced1,
#e74c3c,
#8e44ad
);
}

Browser yang mendukung

Dari contoh diatas kita hanya melihat syntax untuk browser versi terbaru, namun bagaimana dengan browser versi lama, browser versi baru memang akan terlihat bagus menggunakan linear gradient ini, namun pada versi lama perlu sedikit trik dan beberapa syntax untuk mengatasinya agar tampil dengan baik, dalam hal ini saya akan gunakan tiga istilah :

  • Versi lama, orisinil alat web, seperti parameter from() dan color-stop()
  • Tweener, sudut pandang sistem lama seperti "left"
  • Versi baru, sudut pandang sistem baru seperti "to right"

Firefox

  1. Firefox 3.5- : tidak mendukung
  2. Firefox 3.6-15 : Tweener, dengan prefix
  3. Firefox 16+ : mendukung, tanpa prefix

Chrome

  1. Chrome 1-9 : versi lama, dengan prefix
  2. Chrome 10-25 : tweener, dengan prefix
  3. Chrome 26+ : versi baru, tanpa prefix

Safari

  1. Safari 3- : tidak mendukung
  2. Safari 4-5.0 : versi lama, mendukung dengan prefix
  3. Safari 5.1-6.0 : mendukung dengan prefix
  4. Safari 6.1 : versi baru, tanpa prefix

Opera

  1. Opera 11.0- : tidak mendukung
  2. Opera 11.1-11.5 : tweener, hanya mendukung linear saja
  3. Opera 11.6-12: tweener, mendukung linear dan radial
  4. Opera 12.1 : tweener, tanpa prefix
  5. Opera 15+ : versi baru, tanpa prefix

IE

  1. IE 8 : tidak mendukung
  2. IE 9 : filter saja
  3. IE 10+ : versi terbaru tanpa prefix

Android

  1. Android 2.0 : tidak mendukung
  2. Android 2.1-3.0 : tweener, dengan prefix
  3. Android 4.0-4.3 : tweener, dengan prefix
  4. Android 4.4+ : versi baru, tanpa prefix

iOS

  1. iOS 3- : tidak mendukung
  2. iOS 3.2-4.3 : tweener, dengan prefix
  3. iOS 5.0-6.1 : tweener dengan prefix
  4. iOS 7.0+ : versi baru, tanpa prefix

Jika ingin semua tampilan sama, maka sobat bisa menggunakan prefix, namun latihan yang paling mudah adalah jika browser versi baru gunakan versi baru tanpa prefix.

Jadi jika sobat ingin sekali menggunakan prefix maka deklarasi syntax akan terlihat seperti ini :

.gradient {

/* Fallback
(bisa gunakan .jpg / .png sebagai alternatif) */
background-color: red;
/* SVG fallback untuk IE 9
(bisa gunakan data URL, atau bisa gunakan filter) */

background-image: url(fallback-gradient.svg);

/*
Safari 4,
Chrome 1-9,
iOS 3.2-4.3,
Android 2.1-3.0

*/

background-image: -webkit-gradient(
linear,
left top,
right top,
from (red),
to(#f06d06)
);

/*
Safari 5.1,
iOS 5.0-6.1,
Chrome 10-25,
Android 4.0-4.3

*/

background-image: -webkit-linear-gradient(
left,
red,
#f06d06
);

/* Firefox 3.6 - 15 */

background-image: -moz-linear-gradient(
left,
red,
#f06d06
);

/* Opera 11.1 - 12 */

background-image: -o-linear-gradient( left,
red,
#f06d06
);

/*
Opera 15+, Chrome 25+,
IE 10+, Firefox 16+,
Safari 6.1+, iOS 7+,
Android 4.4+

*/

background-image: linear-gradient( to right,
red,
#f06d06
);
}

Kode yang sangat rumit dan menegangkan, menulisnya secara manual akan membuat kode error karena masalah ketelitian dalam penulisan, lebih baik gunakan autoprefixer karena akan lebih mudah dalam melakukan penulisan untuk prefix.

Radial Gradient

Radial berbeda dengan linear gradient, ini akan dimulai dari satu titik sumbu ditengah dan menyebar kesamping membentuk sebuah bentuk elips.

Secara default warna pertama akan terletak di tengah (center center) dari sebuah element memudar memutar keseluruh element sampai warna terakhir.

.gradient {
background-image: radial-gradient(
yellow,
#f06d06
);
}

ya sobat bisa lihat gradient itu membentuk elips kan, dan secara bawaan value dari radial-gradient ini memang ekliptika, jika ingin menampilkan bentuk bulat lihat contoh dibawah ini :

.gradient {
background-image: radial-gradient(
circle,
yellow,
#f06d06
);
}

Beberapa value yang mungkin ingin sobat coba closest-corner, closest-side, farthest-corner, farthest-side

Browser support

Tidak jauh berbeda dengan linear-gradient hanya saja radial-gradient ini tidak akan tampil sepenuhnya pada opera versi lama.

Mirip linear-gradient, radial-gradient banyak syntax yang dihilangkan dan dirubah, kita gunakan lagi istilah versi lama, tweener, versi baru.

/* Versi lama */

background-image: -webkit-gradient(
radial,
center center,
0,
center center,
141,
from(black),
to(white),
color-stop (25%, blue),
color-stop(40%, green),
color-stop (60%, red),
color-stop(80%, purple));

/* Tweener */

background-image: -webkit-radial-gradient( 45px 45px,
farthest-corner,
#F00 0%,
#00F 100%
)
repeat
scroll
0% 0%
rgba(0, 0, 0, 0);

/* Versi baru */

background-image: radial-gradient( circle farthest-side at right,
#00F,
#FFF
);
}

Repeating linear gradient

repeating-linear-gradient dapat digunakan pada radial dan linear gradient.

Ada sebuah trik untuk non-repeating-linear-gradient hanya menyeting background-size maka linear gradient akan tampak belang-belang warna-warni, namun berbeda pada repeating-linear-gradient yang bergantung pada color-stop() terakhir.

.repeat {
background-image: repeating-linear-gradient(
45deg,
yellow,
yellow 10px,
red 10px,
red 20px /* ukuran yang menentukan */
);
}

Tidak jauh berbeda dengan radial gradient.

.repeat {
background: repeating-radial-gradient(
circle at 0 0,
#eee,
#ccc 50px
);
}

Sekian post kali ini, saya akhiri semoga bermanfaat !.

additonal resource: css-tricks.com
Linear-gradient MWB, Radial-gradient MWB, Repeating-linear-gradient MWB, CSS3 Gradient MWB MyWapBlog, Tutorial CSS MWB

Selasa, 19 Juli 2016

Cara melihat design css smartphone version dari layar desktop

Hallo sobat, berjumpa kembali dengan saya. kesempatan kali ini saya akan berbagi tips bagi sobat yang menggunakan laptop / personal komputer untuk melihat hasil design css template sobat, ataupun melihat saat pertandingan kontes nanti digelar.

Baiklah dalam tips ini saya hanya menggunakan browser mozilla firefox. Dengan mode responsive design view, apa itu mode responsive design, desain responsif beradaptasi dengan ukuran layar yang berbeda untuk memberikan presentasi yang cocok untuk berbagai jenis perangkat, seperti ponsel atau tablet. Responsif Desain Mode membuat mudah untuk melihat bagaimana situs web atau web Anda aplikasi akan terlihat pada ukuran layar yang berbeda.

Mengaktifkan mode responsive web design view pada browser mozilla dengan beberapa cara berikut :

  • Pilih "Responsif Design View" dari submenu Web Developer di Firefox Menu (atau Alat menu jika Anda menampilkan menu bar atau berada di OS X)
  • Tekan "Responsive Design View" tombol pada toolbar Toolbox ini
  • Tekan Ctrl + Shift + M, (atau Cmd + Opt + M pada OS X)

Untuk cara me-nonaktifkan sobat bisa gunakan cara ini :
  • Pilih menu item "Responsive Design View" lagi
  • Klik tombol "Close" yang berada di atas kiri jendela
  • Tekan Ctrl + Shift + M, (atau Cmd + Opt + M pada OS X). Sebelum Firefox 34, Tombol Escape juga akan menutup Responsif Design View.

Begini penampakanya sob :

Responsive design view

Mengubah ukuran layar

Sobat bisa gunakan dua cara untuk hal ini :

  • Menggunakan "Select size" kontrol
  • mengklik dan menyeret pada kontrol di kanan dan bawah sisi area konten, atau di sudut kanan bawah

Jika sobat mengubah ukuran menggunakan klik-dan-tarik sobat dapat tahan tombol Control (Cmd di Max OS X) untuk memperlambat kecepatan di mana daerah mengubah ukuran. Hal ini membuat lebih mudah untuk mengatur ukuran tepat.

Tampilan kontrol mode responsive design view

responsive design view kontrol

Di bagian atas jendela Mode Responsive Design menampilkan halaman, ada lima kontrol:

Close

Menutup mode Responsive Design dan kembali ke browsing normal.

Select size

Memilih dari sejumlah lebar ditetapkan kombinasi x tinggi, atau menentukan sendiri.

Orientation

Beralih layar antara portrait dan landscape.

Simulate Touch Events

Mengaktifkan / menonaktifkan acara simulasi sentuh: sementara simulasi sentuh acara diaktifkan, peristiwa mouse dijabarkan dalam acara sentuh.

Screenshot

Mengambil screenshot dari area konten. Screenshot disimpan ke lokasi default-download Firefox.

Set Custom User Agent

Baru di Firefox 47. Masukkan User Agent String di sini dan menavigasi dari kotak. kotak mendapat sorot biru untuk menunjukkan bahwa UA string masuk sekarang sedang digunakan. Firefox sekarang akan menyertakan string UA yang diberikan dalam permintaan yang dibuat dari tab saat ini saja. Hal ini berguna untuk situs yang menyajikan konten yang berbeda untuk browser berdasarkan UA sniffing. Pilih dan menghapus string untuk kembali normal.

Mudahkan sobs selamat mencoba tips dari saya. Saya akhiri post kali ini semoga bermanfaat.

Source: developer.mozilla.org

Cara melihat css smarphone MWB via layar desktop, komputer, laptop, CSS Smartphone MWB, tips MWB.