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

28 nhận xét:

Hữu Nhân Designer nói...

like

Trường Nguyễn nói...

Nhanh quá!

Star Dũng Blog nói...

Đẹp

Trường Nguyễn nói...

(y)

Star Dũng Blog nói...

Logo chất ghê :v

Trường Nguyễn nói...

Hihi :3 hiểu gì k

Star Đức Blog nói...

Quá đẹp <3

Trường Nguyễn nói...

Ok (y)

Star Đức Blog nói...

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

Star Đức Blog nói...

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

Trường Nguyễn nói...

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.

Star Đức Blog nói...

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

Trường Nguyễn nói...

Mới

Star Đức Blog nói...

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

Cuzin Pro nói...

quá đẹp thanks thớt

Trường Nguyễn nói...

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

Trường Nguyễn nói...

Ok bạn!

Star Dũng Blog nói...

Chịu thôi :(

Hữu Nhân Designer nói...

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

Star Cường IT ­ nói...

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

Trường Nguyễn nói...

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

Trường Nguyễn nói...

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

Hữu Nhân nói...

:v Hơm

Star Cường IT ­ nói...

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

Trường Nguyễn nói...

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

Trường Nguyễn nói...

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

Duy Phương nói...

bài hay đấy anh

Trường Nguyễn nói...

Cảm ơn bạn.

Đăng nhận xét