Tôi xin chia sẻ một cách tạo chữ đổ bóng, 3D chỉ 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:- Bạn có thể sử dụng cho tiêu đề blogspot hay tiêu đề bài viết theo cách gán css của kiểu chữ bạn muốn cho phần css của header 1 hoặc post h1 hay post h3....
- Ở bài này hướng dẫn cách các bạn tạo chữ đẹp tại bài viết hoặc các tiện ích của blogspot bằng cách sử dụng thẻ div.
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
<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
<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
<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
<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
<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
<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
<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
<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
<div style=" font-size: 80px;font-weight: 700;text-shadow: 8px 8px 0 rgba(255,0,180,0.5);">DautoBlog</div>Mẫu 10
<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
<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ẻ!