Tạo hiệu ứng chữ Neon tuyệt đẹp chỉ bằng CSS

Tạo hiệu ứng chữ Neon tuyệt đẹp chỉ bằng CSS

Huỳnh Phụng Blogger đã đăng
Hiện có lượt xem và 28 bình luận
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
Tác giả: Huỳnh Phụng Blogger
Ngày đăng: Thứ Ba, 20 tháng 2, 2018 lúc
Tổng số bình luận: 28
VỀ TÁC GIẢ
Những dịch vụ mà chúng tôi đáp ứng: sửa lỗi / tối ưu website / blogspot, thiết kế website / blogspot theo yêu cầu, convert PSD to HTML, tối ưu SEO, Google Insights,..v..v...!

HIỆN CÓ 28 BÌNH LUẬN
Xếp theo
  1. Trả lời
    1. Anh chỉ em cách chèn icon awesome trước tiêu đề hoặc là cái khác đc không ạ ?

      Xóa
    2. Em chèn toàn bị hiện ô vuông

      Xóa
    3. 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.

      Xóa
  2. :v Đổi domain chất v anh Trường

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

    Trả lờiXóa