Thứ Hai, 19 tháng 5, 2014
Số lượt xem bài này:
Trang trí và thêm text (chữ) cho ảnh động
Ta có một ảnh động (gif) đẹp muốn gửi cho người thân. Gửi nguyên thế thì cũng được nhưng chắc không khoái lắm mà bạn muốn để lại một tí phong cách cá nhân trên tấm ảnh động đó. Tôi xin chia sẽ với các bạn cách trang trí (viền khung) và viết chữ lên ảnh động đơn giản bằng cách dùng code HTML chứ không dùng phần mềm.
Thực ra viết chữ lên ảnh động ta có thể dùng phần mềm Ulead GIF Animator, Easy GIF Animator...nhưng đối với các bạn chưa làm quen với xử lý ảnh gif thì cũng không dễ gì thực hiện. Ngay đối với người đã làm quen thì cũng hơi mất thời gian ví khâu định vị cho chữ trong ảnh động. Ảnh động có bao nhiêu Frame (khung hình) thì phải định vị text ngần ấy lần. Nếu muốn các bạn có thể tham khảo thêm text cho ảnh động với Ulead GIF Animator ở đây.
Còn bây giờ tôi chỉ chia sẽ với các bạn cách trang trí (viền khung) và viết chữ lên ảnh động đơn giản bằng cách dùng code HTML thôi
Đây là đoạn code mẫu để các bạn sử dụng. (Các bạn hãy nhấn nút "CHỌN TẤT CẢ" rồi copy đoạn code mẫu này dán vào Notepad để chỉnh sửa một số thông số trong code này theo ý mình)
giải thích code
width:450px là độ rộng của khung width:445px height:300px là độ rộng và chiều cao của hình nền.
Các bạn điều chỉnh cho phù hợp,độ rộng của khung phải lớn hoặc bằng độ rộng của hình nền
Link hình nền : Thay link hình nền tỉnh hoặc động đều dược vào .Bạn có thể thay link hình bất kỳ nhưng phải chỉnh kich cở phù hợp trước khi đưa vào.
background:#eee : đây là nền của khung ,thay mã màu theo ý của bạn
10px solid đọ rộng và kiểu khung ,bạn thay đổi các kiểu cho phép sau:dotted, dashed, double, groove, ridge, inset và outset.solid
border="5" : thay đổi đường viền của ảnh nền nếu ảnh đó có đường viền,nếu không thích bạn điền vào "0"
border:#4F4F4F: thay đổi mã màu của khung
font-size:15px: thay đổi kích cở chữ,các định dạng này bạn có thay đổi khi viết chữ vào nền.
font color="#bf00bf"' - Màu của chữ: Bạn có thể thay code màu để chuyển sang màu không trùng với màu của ảnh động để dòng chữ nổi hơn
vertical-align:top;- căn vị trí chữ trong ảnh động. bạn có thể thay top bằng bottom, center..
vertical-align:top;- căn vị trí chữ trong ảnh động. bạn có thể thay top bằng bottom, center..
Code mã màu các bạn có thể vào đây để chọn
Thay vào chỗ NHẬP TEXT CỦA BẠN VÀO ĐÂY bằng dòng text của bạn nhé !
Thay vào chỗ NHẬP TEXT CỦA BẠN VÀO ĐÂY bằng dòng text của bạn nhé !
Tôi đã áp dụng đoạn code trên để trang trí và viết lên ảnh động sau:
Và đây là kết quả
Cảm ơn ! Thôi được rồi ! |
6 nhận xét
Nếu không trang trí khung viền, bạn có thể sử dụng đoạn code đơn giản sau:
<div style="background-image: url(https://địa chỉ ảnh của bạn); background-repeat: no-repeat; height: 320px; width: 540;">
NỘI DUNG ĐOẠN CODE
</div>
Code chèn chữ ( Text ) vào ảnh trong blogger
Cảm ơn bạn đã chia sẽ !
Rất hân hạnh làm quen với Anh! Anh có thể vào đâyhoặc gặp gỡ nhau google.com/+KhoiHongoc.
Rất mong được làm quen
Mình rất hhân hạnh nếu được làm quen với bạn để chúng ta gặp nhau trên mạng nhằm trao đổi kinh nghiệm với nhau. Bạn có thể vào mục "LIÊN HỆ VỚI ADMIN" trong Blog này sẽ trao đổi được với mình qua mail !:d
Đoạn code của Anh có hạn chế là không điều chỉnh được đặc tính của font (màu, size...) và vị trí của dòng text(o)
Vẫn được chứ!! Anh trở lại thẻ "Viết" thay đổi thuộc tính của font( family,color,size...) đều được hết
Đăng nhận xét
1- Nhận xét chỉ nên liên quan đến bài đăng, phải có tính chất xây dựng và có văn hóa !
2- Để chèn biểu tượng cảm xúc vào nhận xét, các bạn nhập các ký hiệu bên dưới của hình vào phần viết nhận xét.
3- Việc nhập tài khoản Google của bạn và nhập 2 từ xác minh trước lúc gửi nhận xét là bắt buộc !
4- Các bạn có thể chèn Video trên Youtube hay ảnh bằng cách dán link của video (trên thanh địa chỉ) hay link ảnh trực tiếp ở khung soạn thảo nhận xét !
5-Các bạn có thể post code trong nhận xét nhưng phải mã hóa code trước ! Để mã hóa code các bạn vào đây