[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

10cth1