Tạo hiệu ứng chữ Neon tuyệt đẹp chỉ bằng CSS
/ lúc / 28 bình luận
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
Tạo hiệu ứng chữ Neon tuyệt đẹp chỉ bằng CSS

CSS
/* bacsiwindowscom.blogspot.com */
body{
    user-select:none;
    overflow:hidden
}
.text-effect{
    overflow:hidden;
    position:relative;
    -webkit-filter:contrast(110%) brightness(190%);
    filter:contrast(110%) brightness(190%)
}
.neon-bsw-text{
    position:relative;
    background:black;
    color:transparent
}
.neon-bsw-text::before,.neon-bsw-text::after{
    content:attr(data-text);
    color:white;
    -webkit-filter:blur(0.02em);
    filter:blur(0.02em);
    position:absolute;
    top:0;
    left:0;
    pointer-events:none
}
.neon-bsw-text::after{
    mix-blend-mode:difference
}
.gradient,.spotlight-bsw-bg{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    pointer-events:none;
    z-index:10
}
.gradient{
    background:linear-gradient(45deg,red,blue);
    mix-blend-mode:multiply
}
.spotlight-bsw-bg{
    -webkit-animation:light 5s infinite linear;
    animation:light 5s infinite linear;
    background:radial-gradient(circle,white,transparent 25%) 0 0/25% 25%,radial-gradient(circle,white,black 25%) 50% 50%/12.5% 12.5%;
    top:-100%;
    left:-100%;
    mix-blend-mode:color-dodge
}
@-webkit-keyframes light{
    100%{
        -webkit-transform:translate3d(50%,50%,0);
        transform:translate3d(50%,50%,0)
    }
}
@keyframes light{
    100%{
        -webkit-transform:translate3d(50%,50%,0);
        transform:translate3d(50%,50%,0)
    }
}
.neon-bsw-text{
    font:700 220px '
    Roboto Slab'
    ,sans-serif;
    text-transform:uppercase;
    text-align:center;
    margin:0
}
.neon-bsw-text:focus{
    outline:none;
    border:1px dotted white
}
body{
    background:black;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    min-height:100vh;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-line-pack:center;
    align-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center
}
HTML
<div class='text-effect'>
  <h1 class='neon-bsw-text' data-text='Trường Nguyễn'>Trường Nguyễn</h1>
  <div class='gradient'/>
  <div class='spotlight-bsw-bg'/>
</div>
Result

BÌNH LUẬN VỀ BÀI VIẾT (28)

avatar
Hữu Nhân Designer

like

TRẢ LỜI
avatar
Trường Nguyễn

Nhanh quá!

TRẢ LỜI
avatar
Star Dũng Blog

Đẹp

TRẢ LỜI
avatar
Trường Nguyễn

(y)

TRẢ LỜI
avatar
Star Dũng Blog

Logo chất ghê :v

TRẢ LỜI
avatar
Trường Nguyễn

Hihi :3 hiểu gì k

TRẢ LỜI
avatar
Star Đức Blog

Quá đẹp <3

TRẢ LỜI
avatar
Trường Nguyễn

Ok (y)

TRẢ LỜI
avatar
Star Đức Blog

Anh chỉ em cách chèn icon awesome trước tiêu đề hoặc là cái khác đc không ạ ?

TRẢ LỜI
avatar
Star Đức Blog

Em chèn toàn bị hiện ô vuông

TRẢ LỜI
avatar
Trường Nguyễn

Nếu dùng Font Awesome bản mới thì xem hướng dẫn tại đây.
Nếu không rành thì cứ dùng F.A bản cũ đi cho dễ, bản mới này khó xài.

TRẢ LỜI
avatar
Star Đức Blog

Mà temp anh dùng bản nào ?

TRẢ LỜI
avatar
Trường Nguyễn

Mới

TRẢ LỜI
avatar
Star Đức Blog

Mới thì nó cứ hiện lên ô vuông

TRẢ LỜI
avatar
Cuzin Pro

quá đẹp thanks thớt

TRẢ LỜI
avatar
Trường Nguyễn

Đọc lại bình luận ở trên kìa.

TRẢ LỜI
avatar
Trường Nguyễn

Ok bạn!

TRẢ LỜI
avatar
Star Dũng Blog

Chịu thôi :(

TRẢ LỜI
avatar
Hữu Nhân Designer

:v Đổi domain chất v anh Trường

TRẢ LỜI
avatar
Star Cường IT ­

Sao đổi logo + URL blog rồi, thấy không liên quan đến tên cho lắm.

TRẢ LỜI
avatar
Trường Nguyễn

Hiểu ý nghĩa nó không em? :v

TRẢ LỜI
avatar
Trường Nguyễn

Đây là vấn đề thời gian thôi!

TRẢ LỜI
avatar
Hữu Nhân

:v Hơm

TRẢ LỜI
avatar
Star Cường IT ­

Phần comment đẹp khỏi phải chê :v

TRẢ LỜI
avatar
Trường Nguyễn

Cái rì mà không đẹp đâu :v

TRẢ LỜI
avatar
Trường Nguyễn

Đọc ngược lại xem :v

TRẢ LỜI
avatar
Duy Phương

bài hay đấy anh

TRẢ LỜI
avatar
Trường Nguyễn

Cảm ơn bạn.

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.