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

Tạo hiệu ứng chuyển động đẹp cho Online Status Xenforo

Chủ đề thuộc danh mục 'Hướng dẫn - Thủ thuật Xenforo' được đăng bởi Phạm Hữu Dư, 13/3/16.

Lượt xem: 2,503

  1. Phạm Hữu Dư phamhuudu.com

    Online Status hiển thị tình trạng online của thành viên trên diễn đàn, mặc định nó chỉ là 1 dấu nhỏ nằm ở góc avatar trông khá là đơn điệu, hôm nay mình sẽ hướng dẫn các bạn tạo thêm hiệu ứng chuyển động kiểu phát sáng tỏa ra trông bắt mắt hơn rất là nhiều, và cũng cực kỳ đơn giản.

    YW4NKGu.png
    Mặc định chỉ đơn giản thế này

    Sau khi thêm hiệu ứng thì các bạn có thể xem video demo dưới đây để thấy được hiệu ứng:



    Việc đơn giản các bạn cần chỉ là copy đoạn code css sau đây vào template EXTRA. css
    Code:
    .messageUserBlock div.avatarHolder .onlineMarker
    {
        display: inline-block;
        width: -62px;
        height: px;
    /*    margin: 9px 0 0 9px; <- if you'd like it on top left */
        margin: 79px 0 0 79px;
        background: #fff;
        border: none!important;
        border-radius: 50%!important
    }
       
    .messageUserBlock div.avatarHolder .onlineMarker:before
    {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        margin: 3px 0 0 3px;
        background: #BD0101;
        border-radius: 50%
    }
    
    .messageUserBlock div.avatarHolder .onlineMarker:after
    {
        content: '';
        position: absolute;
        width: 32px;
        height: 32px;
        margin: -16px 0 0 -16px;
        border: 8px solid #BD0101;
        border-radius: 50%;
        box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
        -webkit-transform: scale(0);
        -webkit-animation: 
    	
    online 2.5s ease-in-out infinite;
        animation: 
    	
    online 2.5s ease-in-out infinite
    }
    
    @-webkit-keyframes 
    	
    online
    {
          0% {opacity: 1;-webkit-transform: scale(0)}
         50% {opacity: .7}
        100% {opacity: 0;-webkit-transform: scale(1)}
    }
    
    @keyframes 
    	
    online
    {
          0% {opacity: 1;transform: scale(0)}
         50% {opacity: .7}
        100% {opacity: 0;transform: scale(1)}
    } 
    Đoạn css trên đã được mình tùy chỉnh lại màu sắc, vị trí và hiệu ứng phát sáng theo ý thích của mình để phù hợp với diễn đàn Việt Designer, các bạn có thể tùy chỉnh lại theo ý thích của mình theo thông số của đoạn css trên, còn vị trí thì các bạn tùy chỉnh ở template message_user_info. css nhé, chúc các bạn thành công :)

  2. SerdyKee

    SerdyKee Thành viên cấp 1

    Yêu a Dư chết luôn ý :3
  3. Gia Phú

    Gia Phú Thành viên cấp 4

    mới sáng vào và đã review và trên tay, cảm ơn asmin :D
  4. hieu khiem

    hieu khiem Mới đăng kí

    cho mình hỏi copy đoạn template EXTRA. css là ở đâu vậy các bạn
  5. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    hieu khiem thích bài viết này

Ủng hộ diễn đàn