This web page requires JavaScript to be enabled.

JavaScript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.

How to enable JavaScript?

Flip Hozizontal with CSS3

10cth1-2 December 23, 2012 Nam Le 2

[Thủ thuật nhỏ với CSS3]

Dạo qua trang chủ HUTECH thấy phía trên góc phải màn hình có cái hình Giáng sinh. Xem sơ qua thì nó được chèn bằng 1 thẻ img định dạng pngvới style set trong nó có các thuộc tính thông thường như z-index, top, right,…

Để thêm không khi cho diễn đàn, mình lấy tấm ảnh trên trang chủ đó về diễn đàn và edit lại cách hiển thị. Đó là cho nó qua góc trái bằng CSS3 mà không cần dùng PhotoShop Flip horizontal tấm ảnh đó.

Tiến hành lấy tấm ảnh về bằng Ctrl U và find top-right.png, bạn sẽ được đoạn code sau:

DQoNCjxpbWcgc3R5bGU9InBvc2l0aW9uOmZpeGVkO3otaW5kZXg6OTk5OTt0b3A6MDtyaWdodDowIiBzcmM9Imh0dHBzOi8vbGg1Lmdvb2dsZXVzZXJjb250ZW50LmNvbS8tSkFCa2xmOU1vZFUvVU1jV1d6U1NKNEkvQUFBQUFBQUFCY1kvZzRzWk1ocmdqWFUvczE1MC90b3AtcmlnaHQucG5nIj4NCg0K

Trong đoạn code có thuộc tính z-index là 9999 và cách đỉnh màn hình là 0px, canh về bên phải 0px và quan trọng là được cái ảnh:

Tẩm ảnh chèn vào góc phải nên nếu chèn vào góc trái thì chẳng ra gì, có 2 cách để quay tấm ảnh lại để chèn vào góc trái:

1- Photoshop để Flip horizontal, sau đó save lại rồi upload lên host.

2- Dùng CSS3

Trong thủ thuật này, minh hướng dẫn các bạn dùng CSS3 vì nó đơn giản, không cần download tấm ảnh về, chỉnh sửa rồi up lên hót lại mà bạn chỉ cần thêm thuộc tính cho nó. Đoạn code sau sẽ giúp Flip horizontal một thẻ TAG HTML bằng CSS:

DQoNCi1tb3otdHJhbnNmb3JtOiBzY2FsZVgoLTEpOw0KLW8tdHJhbnNmb3JtOiBzY2FsZVgoLTEpOw0KLXdlYmtpdC10cmFuc2Zvcm06IHNjYWxlWCgtMSk7DQp0cmFuc2Zvcm06IHNjYWxlWCgtMSk7DQpmaWx0ZXI6IEZsaXBIOw0KLW1zLWZpbHRlcjogIkZsaXBIIjsNCg0K

Sau khi thêm vào “style” và dùng  left:0 thì sẽ được như trong hình.

Chúc bạn may mắn và có một Giáng sinh an lành 😉

@freeze_love | le.qnam


Last modified on December 4th, 2020 at 3:07 am

Nam Le
lequocnam



2 responds

  1. phanthovb says:

    cái z-index là gì vậy và tại sao phải đặt nó là 999

  2. le.qnam says:

    z-index là 1 thuộc tính trong CSS (phiên bản 3 và các bản về trước), giúp cho một TAG HTML đứng trên 1Tag khác, 999 là độ ưu tiên của nó.

    VD: 1 tag HTML là 1 thẻ IMG, muốn 1 IMG khác nằm đè lên IMG đó thì IMG nằm đè lên sẽ dc set z-index là 1, nếu muốn IMG3 đè lên IMG 1 và IMG2 thì z-index của IMG3 sẽ là 2.

Leave a Reply

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