Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[html5 + css3] Windows-8-like 3D Animations

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi banbaonylong, 21/4/13.

Lượt xem: 4,658

  1. banbaonylong Ko phải assmin

    Giả lập hiệu ứng metro app của Windows 8 trên nền Web y hệt

    • Cấu trúc code
    PHP:
    <div class="dashboard clearfix">
      <
    div class="col1 clearfix">
        <
    div class="big todos-thumb" data-page="todos">
          <
    p>My Todos
            
    <span class="todos-thumb-span">You have 5 more tasks to do!</span>
          </
    p>
        </
    div>
        <
    div class="small lock-thumb">
          <
    span class="icon-font  center" aria-hidden="true" data-icon=""></span>
        </
    div>
        <
    div class="small last cpanel-thumb" data-page="cpanel">
          <
    span class="icon-font" aria-hidden="true" data-icon=""></span>
        </
    div>
        <
    div class="big notes-thumb" data-page="notes">
          <
    span class="icon-font" aria-hidden="true" data-icon=""></span>
          <
    pNotes</p>
        </
    div>
        <
    div class="big calculator-thumb" data-page="random-page"></div>
      </
    div>
     
      <
    div class="col2">
        <!--....-->
      </
    div>
     
      <
    div class="col3"
        <!--....-->
      </
    div>
    </
    div>
    • Cấu trúc trang overlay (là cái trang khi bạn click vào icon nó hiện ra đó)
    PHP:
    <div class="page todos">
      <
    h2 class="page-title">My Todos</h2>
      <!--
    content of page goes here-->
      <
    div class="close-button">x</div>
    </
    div>
     
    <
    div class="page random-page">
      <
    h2 class="page-title">Some Awesome App!</h2>
      <!--
    content of page goes here-->
      <
    div class="close-button">x</div>
    </
    div>
    • View demo: Link
    • Download:
      Code:
      http://www.mediafire.com/?am73td8e1n7qwa3
      (Pass: vietdesigner.net)
    Nguồn: Sara Soueidan

    ...
    FMP, Monster Nano, Hp931 người khác thích bài viết này.
  2. Kul Emotion

    Kul Emotion Thành viên cấp 2

    Xin bác luôn :D :-bd
  3. banbaonylong

    banbaonylong Ko phải assmin

    cái này tự chỉnh sửa lại làm 1 pro5 online thì độc lắm ;;)
    Nguyễn Tất ThắngKul Emotion thích bài viết này.
  4. Hp93

    Hp93 Mới đăng kí

    hay lắm bác, nếu làm thêm được hiệu ứng click nữa thì càng tuyệt :">
  5. banbaonylong

    banbaonylong Ko phải assmin

    Hp93 click là sao bạn? ấn vào nó loading way tròn đó à?
  6. Hp93

    Hp93 Mới đăng kí

    à ko, ý em là hiệu ứng giống 1 nút 3D ấy, ấn vô nó lõm xuống chẳng hạn :D
  7. banbaonylong

    banbaonylong Ko phải assmin

    Monster Nano mình click bình thường mà... bạn xem lại
  8. Monster Nano

    Monster Nano Mới đăng kí

    Sorry! Mình click offline thì nó ko có phản ứng :D
    Phải đưa vào localhost thì nó mới động đậy :-B
    Hehe!
    banbaonylong thích bài viết này
  9. Thịnh Zombie

    Thịnh Zombie Thành viên cấp 3

    Ngon quá
  10. Nguyễn Tất Thắng

    Nguyễn Tất Thắng Rất là bình thường

    Hồi xưa cũng mày mò giả lập kiểu metro của window8 mà ko đẹp ntn :v
  11. Chất PC

    Chất PC Thành viên cấp 2

    Die mất link demo rồi bác ơi.../:)
  12. minibavuong

    minibavuong Mới đăng kí

    Sao mình chạy trên firefox thì hiệu ứng chạy đc mà chrome ko động đậy gì hết vậy thớt

Ủng hộ diễn đàn