Ads ad-300x250
JAWATAN ONLINE
  • Utama
  • Tips
  • Kerjaya
    • All
    • Johor
    • Kedah
    • Kelantan
    • Kuala Lumpur
    • Melaka
    • Negeri Sembilan
    • PAHANG
    • Perak
    • Perlis
    • Pulau Pinang
    • Sabah
    • Sarawak
    • Selangor
    • Terengganu
    MATTEL MALAYSIA SDN BHD

    Jawatan Kosong di Mattel Malaysia Sdn Bhd (MATTEL) Penang

    Sabah Electricity Sdn. Bhd.

    Jawatan Kosong di Sabah Electricity Sdn Bhd (SESB)

    Kerajaan Negeri Sabah

    Jawatan Kosong di KERAJAAN NEGERI SABAH

    RENESAS SEMICONDUCTOR MALAYSIA SDN BHD

    Jawatan Kosong di RENESAS SEMICONDUCTOR MALAYSIA SDN BHD

    YUNG KONG CO. BHD.

    Jawatan Kosong di YUNG KONG CO. BHD. (YK)

    OSRAM Opto Semiconductors (Malaysia) Sdn Bhd

    Jawatan Kosong Di Osram Opto Semiconductors Penang (OSRAM)

    BTC MAJU HOLDING SDN BHD123

    Jawatan Kosong di BTC MAJU HOLDING SDN BHD (BTC)

    Mr D.I.Y Sarawak

    Jawatan Kosong di Mr D.I.Y Group (M) Berhad (MR D.I.Y) SARAWAK

    Jawatan Kosong di Gentingmas Mall Sdn Bhd (GM)

    Jawatan Kosong di Gentingmas Mall Sdn Bhd (GM)

  • Pendidikan

    Buat Mockup Peranti dalam Pelayar Web dengan DeviceMock

  • Teknologi

    Buat Mockup Peranti dalam Pelayar Web dengan DeviceMock

    kaedah reka bentuk untuk percetakan 3d

    Kaedah Reka bentuk untuk Percetakan 3D

No Result
View All Result
JAWATAN KOSONG
  • Utama
  • Tips
  • Kerjaya
    • All
    • Johor
    • Kedah
    • Kelantan
    • Kuala Lumpur
    • Melaka
    • Negeri Sembilan
    • PAHANG
    • Perak
    • Perlis
    • Pulau Pinang
    • Sabah
    • Sarawak
    • Selangor
    • Terengganu
    MATTEL MALAYSIA SDN BHD

    Jawatan Kosong di Mattel Malaysia Sdn Bhd (MATTEL) Penang

    Sabah Electricity Sdn. Bhd.

    Jawatan Kosong di Sabah Electricity Sdn Bhd (SESB)

    Kerajaan Negeri Sabah

    Jawatan Kosong di KERAJAAN NEGERI SABAH

    RENESAS SEMICONDUCTOR MALAYSIA SDN BHD

    Jawatan Kosong di RENESAS SEMICONDUCTOR MALAYSIA SDN BHD

    YUNG KONG CO. BHD.

    Jawatan Kosong di YUNG KONG CO. BHD. (YK)

    OSRAM Opto Semiconductors (Malaysia) Sdn Bhd

    Jawatan Kosong Di Osram Opto Semiconductors Penang (OSRAM)

    BTC MAJU HOLDING SDN BHD123

    Jawatan Kosong di BTC MAJU HOLDING SDN BHD (BTC)

    Mr D.I.Y Sarawak

    Jawatan Kosong di Mr D.I.Y Group (M) Berhad (MR D.I.Y) SARAWAK

    Jawatan Kosong di Gentingmas Mall Sdn Bhd (GM)

    Jawatan Kosong di Gentingmas Mall Sdn Bhd (GM)

  • Pendidikan

    Buat Mockup Peranti dalam Pelayar Web dengan DeviceMock

  • Teknologi

    Buat Mockup Peranti dalam Pelayar Web dengan DeviceMock

    kaedah reka bentuk untuk percetakan 3d

    Kaedah Reka bentuk untuk Percetakan 3D

No Result
View All Result
JAWATAN ONLINE
No Result
View All Result

Buat Mockup Peranti dalam Pelayar Web dengan DeviceMock

Buat Mockup Peranti dalam Pelayar Web dengan DeviceMock

Amirul by Amirul
August 12, 2020
in Design, Gadget, Technology
0 0
0
0
SHARES
213
VIEWS
Share on FacebookShare on Twitter

Buat Mockup Peranti dalam Pelayar Web dengan DeviceMock

Anda boleh mendapatkan banyak mockup peranti percuma dalam talian, mulai dari JPA hingga fail Sketsa. Tetapi, bagaimana jika anda dapat membuat mockup peranti dengan cepat dalam pelayar web anda?

Baiklah, terima kasih kepada orang-orang di rm-labo, anda boleh! Plugin jQuery percuma mereka, DeviceMock.js, membolehkan anda membungkus peranti vektor di mana-mana elemen halaman, menggunakan JavaScript dan SVG yang mudah.

Jadi, bagaimana sebenarnya ini berfungsi?

Baiklah, pertama anda memerlukan salinan jQuery dan versi plugin DeviceMock dari GitHub. Ini dilengkapi dengan fail JS, fail CSS, dan beberapa fail SVG untuk membuat peranti sebenar.

Anda boleh menargetkan semua jenis elemen di halaman, dari gambar sederhana hingga keseluruhan div, atau bahkan elemen tertanam seperti iframe. Ini bermaksud anda boleh membina pelayar web mini yang keren di laman web anda dengan iframe ke halaman lain.

Plugin ini menyokong lima jenis peranti yang berbeza:

  • Pelayar web
  • Telefon Pintar
  • Tablet
  • Desktop
  • Komputer riba

Semua mockup ini menggunakan gaya reka bentuk rata kerana ia dibina dengan SVG. Dan, semuanya kelihatan serupa dengan peranti Apple, contohnya telefon pintar menjadi klon iPhone dan monitor desktop kelihatan seperti iMac.

Semua vektor ini mudah ditambahkan dan berfungsi di setiap penyemak imbas dengan sokongan SVG.

Anda bahkan boleh menukar sifat seperti ukuran mockup, tema (putih / hitam) dan orientasi (landskap potret).

Sekiranya anda menggunakan mockup penyemak imbas, anda juga boleh menentukan URL palsu di bar alamat. Ini adalah cara yang menyeronokkan untuk menambahkan lebih banyak penyesuaian.

Diberikan perpustakaan ini tidak akan berguna untuk semua orang tetapi ia dapat menyelesaikan masalah khusus yang dihadapi oleh banyak pembangun UI / UX ketika membuat prototaip.

Untuk mengetahui lebih lanjut, lawati halaman GitHub atau lihat laman langsung untuk demo aktif.


Tags: PhotoshopPHPTypographyWeb Design
Previous Post

Membuat Server Tempatan Dari Alamat IP Awam

Next Post

Belajar Cara Melukis Orang Melalui Teknik dan Latihan

Amirul

Amirul

Next Post
Belajar Cara Melukis Orang Melalui Teknik dan Latihan

Belajar Cara Melukis Orang Melalui Teknik dan Latihan

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Jawatan Online

We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Check our landing page for details.

Tags

Artificial Intelligence Branding Gaming Laravel Photoshop PHP Smartphone Typography Web Design

Stay Connected

  • Utama
  • Tips
  • Kerjaya
  • Pendidikan
  • Teknologi

© 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Utama
  • Tips
  • Kerjaya
  • Pendidikan
  • Teknologi

© 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Refresh
Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock