Thủ thuật blogspot - Dautoblog

Tạo chữ đẹp với CSS3

Tạo Chữ Đẹp Với CSS3
Một số trang web cho phép ta tạo các mẫu chữ đẹp mắt miễn phí chỉ với vài thao tác nhập vào rồi xuất ra sau đó mang code dán vào blog/web.Nhưng không phải free hoàn toàn mà một số trang vẫn đeo thêm tên web ở dưới chữ ta cần tạo.Cái gì cũng có giá của nó,muốn đẹp thì phải kèm chút điều kiện.
Tôi xin chia sẻ một cách tạo chữ đẹp với css3 nhưng chả có điều kiện gì chỉ việc dán code vào blogspot sau đó hiệu chỉnh cỡ chữ,độ béo của chữ,màu chữ là cũng có được các kiểu chữ đẹp vầy vậy. Đây chính là cách tạo chữ đẹp hay tạo chữ 3D với css,nếu có kiến thức về css bạn có thể kết hợp @font-face và hiệu chỉnh text-shadow để được kiểu chữ vừa ý.

tạo chữ đẹp,chữ 3D với css
Cách sử dụng:
Các bạn dán code tương ứng với kiểu chữ bạn thích vào bên HTML của trình soạn thảo văn bản hay tiện ích HTML/jvascript
Thay DautoBlog bằng chữ bạn muốn.
Hiệu chỉnh các thông số:
- color: white; là màu chữ
- font-size: 70px; là cỡ chữ
- font-weight: 700; là độ béo của chữ
- background: #000; là màu nền của chữ nếu có hoặc có thể thêm vào.
Sau đây là các mẫu và code của nó

Mẫu 1
Tạo Chữ Đẹp Với CSS3
<div style="color: white; font-size: 70px; font-weight: 700; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);">DautoBlog</div>
Mẫu 2
Tạo Chữ Đẹp Với CSS3
<div style="color: #e0eff2; font-family: bello-pro, serif; font-size: 70px; font-weight: 700; text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;">DautoBlog</div>
Mẫu 3
Tạo Chữ Đẹp Với CSS3
<div style="color: #202c2d; font-family: freight-sans-pro, sans-serif; font-size: 80px; font-weight: 900; text-shadow: 0 1px #808d93, -1px 0 #cdd2d5, -1px 2px #808d93, -2px 1px #cdd2d5, -2px 3px #808d93, -3px 2px #cdd2d5, -3px 4px #808d93, -4px 3px #cdd2d5, -4px 5px #808d93, -5px 4px #cdd2d5, -5px 6px #808d93, -6px 5px #cdd2d5, -6px 7px #808d93, -7px 6px #cdd2d5, -7px 8px #808d93, -8px 7px #cdd2d5;">DautoBlog</div>
Mẫu 4
Tạo Chữ Đẹp Với CSS3
<div style="color: #bc2e1e; font-family: news-gothic-std, sans-serif; font-size: 80px; font-style: italic; font-weight: 400; text-shadow: 0 1px 0px #378ab4, 1px 0 0px #5dabcd, 1px 2px 1px #378ab4, 2px 1px 1px #5dabcd, 2px 3px 2px #378ab4, 3px 2px 2px #5dabcd, 3px 4px 2px #378ab4, 4px 3px 3px #5dabcd, 4px 5px 3px #378ab4, 5px 4px 2px #5dabcd, 5px 6px 2px #378ab4, 6px 5px 2px #5dabcd, 6px 7px 1px #378ab4, 7px 6px 1px #5dabcd, 7px 8px 0px #378ab4, 8px 7px 0px #5dabcd;">DautoBlog</div>
Mẫu 5
Tạo Chữ Đẹp Với CSS3
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"></link>
<div style="-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1))); background: #777; color: #666666; font-family: 'Lobster', helvetica, arial; font-size: 80px; margin-top: 0; text-shadow: 0 1px 0 white;">
DautoBlog</div>
Mẫu 6
Tạo Chữ Đẹp Với CSS3
<div style=" font-size: 80px;font-weight: 700;color:#fff;text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;">DautoBlog</div>
Mẫu 7
Tạo Chữ Đẹp Với CSS3
<div style=" font-size: 80px;font-weight: 700;color:#fff;text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;">DautoBlog</div>
Mẫu 8
Tạo Chữ Đẹp Với CSS3
<div style=" font-size: 80px;font-weight: 700;color:#fff;text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;">DautoBlog</div>
Mẫu 9
Tạo Chữ Đẹp Với CSS3
<div style=" font-size: 80px;font-weight: 700;text-shadow: 8px 8px 0 rgba(255,0,180,0.5);">DautoBlog</div>
Mẫu 10
Tạo Chữ Đẹp Với CSS3
<div style="background: #000; color: #777777; font-weight: 700; font-size: 80px ; opacity: 0.3; text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;">DautoBlog</div>
Mẫu 11
Tạo Chữ Đẹp Với CSS3
<div style="color: white; font-size: 80px; font-weight: 700; text-shadow: 1px 1px 0 #CCC, 2px 2px 0 #CCC, /* end of 2 level deep grey shadow */ 3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, 6px 6px 0 #444;">DautoBlog</div>
Code này cơ bản sẽ theo font chữ của blogspot mà bạn đã cài đặt ở phần css của blogspot,nếu muốn kiểu chữ không theo font có sẵn của blog thì ta thêm:
font-family:kiểu phông;
- Điều chỉnh cỡ chữ(font-size)
Chúc vui vẻ!
Comments blogger

Không có nhận xét nào :