Cocktails

Effets Néon 01

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

<div class="container">
                                      <div class="neon">Cocktails</div>
                                    </div>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

	@font-face {
                                      font-family: neon;
                                      src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf);
                                    }
                                    
                                    .neon {
                                      font-family: neon;
                                      color: #FB4264;
                                      font-size: 3vw;
                                      text-shadow: 0 0 3vw #F40A35;
                                    }
                                    
                                    .neon {
                                      animation: neon 1s ease infinite;
                                      -moz-animation: neon 1s ease infinite;
                                      -webkit-animation: neon 1s ease infinite;
                                    }
                                    
                                    @keyframes neon {
                                      0%,
                                      100% {
                                        text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
                                        color: #FED128;
                                      }
                                      50% {
                                        text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
                                        color: #806914;
                                      }
                                    }

Dare to dream

Effets Néon 02

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

<h3>Dare to dream</h3>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

@import url("https://fonts.googleapis.com/css?family=Sacramento&display=swap");
                                    
                                    h3 {
                                      font-size: 88px;
                                      text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
                                        color: #fff6a9;
                                      font-family: "Sacramento", cursive;
                                      text-align: center;
                                      animation: blink 12s infinite;
                                      -webkit-animation: blink 12s infinite;
                                    }
                                    
                                    @-webkit-keyframes blink {
                                      20%,
                                      24%,
                                      55% {
                                        color: #111;
                                        text-shadow: none;
                                      }
                                    
                                      0%,
                                      19%,
                                      21%,
                                      23%,
                                      25%,
                                      54%,
                                      56%,
                                      100% {
                                    /*     color: #fccaff;
                                        text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
                                          0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
                                      text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
                                        color: #fff6a9;
                                      }
                                    }
                                    
                                    @keyframes blink {
                                      20%,
                                      24%,
                                      55% {
                                        color: #111;
                                        text-shadow: none;
                                      }
                                    
                                      0%,
                                      19%,
                                      21%,
                                      23%,
                                      25%,
                                      54%,
                                      56%,
                                      100% {
                                    /*     color: #fccaff;
                                        text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
                                          0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092; */
                                      text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
                                        color: #fff6a9;
                                      }
                                    }

BAR

Effets Néon 03

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

<div class="container">
                                      <div class="flux">BAR </div>
                                    </div>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                    @font-face {
                                      font-family: neon;
                                      src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf);
                                    }
                                    
                                    .flux {
                                      font-family: neon;
                                      color: #426DFB;
                                      font-size: 5vw;
                                      text-shadow: 0 0 3vw #2356FF;
                                    }
                                    
                                    
                                    
                                    
                                    .flux {
                                      animation: flux 2s linear infinite;
                                      -moz-animation: flux 2s linear infinite;
                                      -webkit-animation: flux 2s linear infinite;
                                      -o-animation: flux 2s linear infinite;
                                    }
                                    
                                    @keyframes flux {
                                      0%,
                                      100% {
                                        text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
                                        color: #28D7FE;
                                      }
                                      50% {
                                        text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;
                                        color: #146C80;
                                      }
                                    }

BAR

Effets Néon 04

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

.<p>BAR</P>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

@import url(https://fonts.googleapis.com/css?family=Exo+2:200i);
                                    
                                    :root {
                                      /* Set neon color */
                                      --neon-text-color: #f40;
                                      --neon-border-color: #08f;
                                    }
                                    
                                    .$ {
                                      font-size: 66px;
                                      font-weight: 200;
                                      font-style: italic;
                                      letter-spacing: .5rem;  
                                      color: #fff;
                                      text-align: center;
                                      border: 0.4rem solid #fff;
                                      border-radius: 2rem;
                                      text-transform: uppercase;
                                      animation: flicker33 1.5s infinite alternate;     
                                    }
                                    
                                     
                                    -moz-selection {
                                      background-color: var(--neon-border-color);
                                      color: var(--neon-text-color);
                                    }
                                    
                                    selection {
                                      background-color: var(--neon-border-color);
                                      color: var(--neon-text-color);
                                    }
                                    
                                    
                                    
                                    focus {
                                      outline: none;
                                    }
                                    @keyframes flicker33 {
                                        
                                        0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
                                          
                                            text-shadow:
                                                -0.2rem -0.2rem 1rem #fff,
                                                0.2rem 0.2rem 1rem #fff,
                                                0 0 2rem var(--neon-text-color),
                                                0 0 4rem var(--neon-text-color),
                                                0 0 6rem var(--neon-text-color),
                                                0 0 8rem var(--neon-text-color),
                                                0 0 10rem var(--neon-text-color);
                                            
                                            box-shadow:
                                                0 0 .5rem #fff,
                                                inset 0 0 .5rem #fff,
                                                0 0 2rem var(--neon-border-color),
                                                inset 0 0 2rem var(--neon-border-color),
                                                0 0 4rem var(--neon-border-color),
                                                inset 0 0 4rem var(--neon-border-color);        
                                        }
                                        
                                        20%, 24%, 55% {        
                                            text-shadow: none;
                                            box-shadow: none;
                                        }    
                                    }

Cocktails

Effets Néon 05

Codes à Copier/Coller :

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént texte

.$ {
                                      
                                      animation: pulsate 1.5s infinite alternate;  
                                      box-shadow: 0 0 .2rem #fff,
                                                0 0 .2rem #fff,
                                                0 0 2rem #bc13fe,
                                                0 0 0.8rem #bc13fe,
                                                0 0 2.8rem #bc13fe,
                                                inset 0 0 1.3rem #bc13fe; 
                                    }
                                    
                                    @keyframes pulsate {
                                        
                                      100% {
                                    
                                          text-shadow:
                                          0 0 4px #fff,
                                          0 0 11px #fff,
                                          0 0 19px #fff,
                                          0 0 40px #bc13fe,
                                          0 0 80px #bc13fe,
                                          0 0 90px #bc13fe,
                                          0 0 100px #bc13fe,
                                          0 0 150px #bc13fe;
                                      
                                      }
                                      
                                      0% {
                                    
                                        text-shadow:
                                        0 0 2px #fff,
                                        0 0 4px #fff,
                                        0 0 6px #fff,
                                        0 0 10px #bc13fe,
                                        0 0 45px #bc13fe,
                                        0 0 55px #bc13fe,
                                        0 0 70px #bc13fe,
                                        0 0 80px #bc13fe;
                                    
                                    }}

Dare to dream

Effets Néon 06

Codes à Copier/Coller :

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént texte

.$ {animation: pulses 1s ease-in-out infinite alternate;}
                                    
                                    
                                    @keyframes pulses{ 100% {
                                    
                                          text-shadow:
                                          0 0 4px #fff,
                                          0 0 11px #fff,
                                          0 0 19px #fff,
                                          0 0 40px #f09,
                                          0 0 80px #f09,
                                          0 0 90px #f09,
                                          0 0 100px #f09,
                                          0 0 150px #f09;
                                      
                                      }}

Cocktails

Effets Néon 07

Codes à Copier/Coller :

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént. (Bouton)

.$ {
                                      animation: flicker17 1.5s infinite alternate;
                                    
                                    }
                                    
                                    
                                    @keyframes flicker17 {
                                        
                                      0%, 18%, 22%, 25%, 53%, 57%, 100% {
                                    
                                          text-shadow:
                                          0 0 4px #fff,
                                          0 0 11px #fff,
                                          0 0 19px #fff,
                                          0 0 40px #0fa,
                                          0 0 80px #0fa,
                                          0 0 90px #0fa,
                                          0 0 100px #0fa,
                                          0 0 150px #0fa;
                                      
                                      }
                                      
                                      20%, 24%, 55% {        
                                          text-shadow: none;
                                      }    
                                    }

Effets Néon 8 - Bouton

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

<button class='glowing-btn'><span class='glowing-txt'>C<span class='faulty-letter'>L</span>ICK</span></button>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

@import url("https://fonts.googleapis.com/css?family=Raleway");
                                    
                                    :root {
                                      --glow-color: hsl(186 100% 69%);
                                    }
                                      
                                    .glowing-btn {
                                      position: relative;
                                      color: var(--glow-color);
                                      cursor: pointer;
                                      padding: 0.35em 1em;
                                      border: 0.15em solid var(--glow-color);
                                      border-radius: 0.45em;
                                      background: none;
                                      perspective: 2em;
                                      font-family: "Raleway", sans-serif;
                                      font-size: 2em;
                                      font-weight: 900;
                                      letter-spacing: 1em;
                                    
                                      -webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
                                        0px 0px 0.5em 0px var(--glow-color);
                                      -moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
                                        0px 0px 0.5em 0px var(--glow-color);
                                      box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
                                        0px 0px 0.5em 0px var(--glow-color);
                                      animation: border-flicker 2s linear infinite;
                                    }
                                    
                                    .glowing-txt {
                                      float: left;
                                      margin-right: -0.8em;
                                      -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
                                        0 0 0.45em var(--glow-color);
                                      -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
                                        0 0 0.45em var(--glow-color);
                                      text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
                                      animation: text-flicker 3s linear infinite;
                                    }
                                    
                                    .faulty-letter {
                                      opacity: 0.5;
                                      animation: faulty-flicker 2s linear infinite;
                                    }
                                    
                                    .glowing-btn::before {
                                      content: "";
                                      position: absolute;
                                      top: 0;
                                      bottom: 0;
                                      left: 0;
                                      right: 0;
                                      opacity: 0.7;
                                      filter: blur(1em);
                                      transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
                                      background: var(--glow-color);
                                      pointer-events: none;
                                    }
                                    
                                    .glowing-btn::after {
                                      content: "";
                                      position: absolute;
                                      top: 0;
                                      left: 0;
                                      right: 0;
                                      bottom: 0;
                                      opacity: 0;
                                      z-index: -1;
                                      background-color: var(--glow-color);
                                      box-shadow: 0 0 2em 0.2em var(--glow-color);
                                      transition: opacity 100ms linear;
                                    }
                                    
                                    .glowing-btn:hover {
                                      color: rgba(0, 0, 0, 0.8);
                                      text-shadow: none;
                                      animation: none;
                                    }
                                    
                                    .glowing-btn:hover .glowing-txt {
                                      animation: none;
                                    }
                                    
                                    .glowing-btn:hover .faulty-letter {
                                      animation: none;
                                      text-shadow: none;
                                      opacity: 1;
                                    }
                                    
                                    .glowing-btn:hover:before {
                                      filter: blur(1.5em);
                                      opacity: 1;
                                    }
                                    
                                    .glowing-btn:hover:after {
                                      opacity: 1;
                                    }
                                    
                                    @keyframes faulty-flicker {
                                      0% {
                                        opacity: 0.1;
                                      }
                                      2% {
                                        opacity: 0.1;
                                      }
                                      4% {
                                        opacity: 0.5;
                                      }
                                      19% {
                                        opacity: 0.5;
                                      }
                                      21% {
                                        opacity: 0.1;
                                      }
                                      23% {
                                        opacity: 1;
                                      }
                                      80% {
                                        opacity: 0.5;
                                      }
                                      83% {
                                        opacity: 0.4;
                                      }
                                    
                                      87% {
                                        opacity: 1;
                                      }
                                    }
                                    
                                    @keyframes text-flicker {
                                      0% {
                                        opacity: 0.1;
                                      }
                                    
                                      2% {
                                        opacity: 1;
                                      }
                                    
                                      8% {
                                        opacity: 0.1;
                                      }
                                    
                                      9% {
                                        opacity: 1;
                                      }
                                    
                                      12% {
                                        opacity: 0.1;
                                      }
                                      20% {
                                        opacity: 1;
                                      }
                                      25% {
                                        opacity: 0.3;
                                      }
                                      30% {
                                        opacity: 1;
                                      }
                                    
                                      70% {
                                        opacity: 0.7;
                                      }
                                      72% {
                                        opacity: 0.2;
                                      }
                                    
                                      77% {
                                        opacity: 0.9;
                                      }
                                      100% {
                                        opacity: 0.9;
                                      }
                                    }
                                    
                                    @keyframes border-flicker {
                                      0% {
                                        opacity: 0.1;
                                      }
                                      2% {
                                        opacity: 1;
                                      }
                                      4% {
                                        opacity: 0.1;
                                      }
                                    
                                      8% {
                                        opacity: 1;
                                      }
                                      70% {
                                        opacity: 0.7;
                                      }
                                      100% {
                                        opacity: 1;
                                      }
                                    }
                                    
                                    @media only screen and (max-width: 600px) {
                                      .glowing-btn{
                                        font-size: 1em;
                                      }
                                    }

Effets Néon 01

Dare to dream

Effets Néon 02

Effets Néon 03

Effets Néon 04

Effets Néon 05

Effets Néon 06

Effets Néon 07

Effets Néon 8 - Bouton

Soutenez mon travail.