How to Make Text Glow

How to make text glow?

How about setting a blue shadow for the textview by using android:shadowColor and setting android:shadowDx and android:shadowDy to zero, with a pretty big android:shadowRadius?

Text outer glow effect using CSS

Text-shadow is what you have to use to achieve glow or some kind of text-shadow.

p{
text-shadow : horizontal-shadow vertical-shadow blur color;
}

To add multiple text-shadow, you can do that by separating them, by adding comma to text-shadow property.

p{
text-shadow : horizontal-shadow vertical-shadow blur color, horizontal-shadow vertical-shadow blur color;
}

p{  background:#111;  color:#fff;  text-shadow:1px 1px 10px #fff, 1px 1px 10px #ccc;  font-size:48px;  text-align:center;}
<p>Demo Text</p>

How to make text glow programmatically (via code, not xml) in android?

You can use setShadowLayer (float radius, float dx, float dy, int color) on your textview. For example:

textView.setShadowLayer(30, 0, 0, Color.RED);

Found in the TextView documentation

How do I get my links to glow on :hover with CSS3?

a:hover { text-shadow: 0 0 5px #ff0000; }

How do I animate a glowing effect on text?

If you want to just use CSS3, you don't even have to use any jQuery/JavaScript. Just do this in your CSS:

.confirm_selection {
-webkit-transition: text-shadow 0.2s linear;
-moz-transition: text-shadow 0.2s linear;
-ms-transition: text-shadow 0.2s linear;
-o-transition: text-shadow 0.2s linear;
transition: text-shadow 0.2s linear;
}
.confirm_selection:hover {
text-shadow: 0 0 10px red; /* replace with whatever color you want */
}

Here's the fiddle: http://jsfiddle.net/zenjJ/

If you want the element to run on its own (without hovering), do this:

CSS:

.confirm_selection {
-webkit-transition: text-shadow 1s linear;
-moz-transition: text-shadow 1s linear;
-ms-transition: text-shadow 1s linear;
-o-transition: text-shadow 1s linear;
transition: text-shadow 1s linear;
}
.confirm_selection:hover,
.confirm_selection.glow {
text-shadow: 0 0 10px red;
}

JavaScript:

var glow = $('.confirm_selection');
setInterval(function(){
glow.toggleClass('glow');
}, 1000);

You can play around with the timing in the CSS/JavaScript to get the exact effect you're looking for.

And finally, here's the fiddle: http://jsfiddle.net/dH6LS/


Update Oct. 2013: being that all major browsers now support CSS animations, all you need is this:

.confirm_selection {    animation: glow .5s infinite alternate;}
@keyframes glow { to { text-shadow: 0 0 10px red; }}
.confirm_selection { font-family: sans-serif; font-size: 36px; font-weight: bold;}
<span class="confirm_selection">[ Confirm Selection ]</span>

How to make text flash and glow using css

 @import url(//fonts.googleapis.com/cssfamily=Pacifico); body { min-height:100vh; padding-top:5rem; background: #112 url(//images.weserv.nl/url=i.imgur.com/6QJjYMe.jpg) center no-repeat; background-size: cover; margin: 0; overflow:hidden; }
.lasvegas {font-family: 'Pacifico', cursive;font-size:80px;border: none;color: rgba(255,255,255,0.6);text-align:center;text-shadow: 1px 5px 4px rgba(0,0,0,.3), 0 0 2pxrgba(255,255,255,1), 0 0 10pxrgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 030px rgba(255,255,255,1), 0 0 40px #ff00de,0 0 70px#ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de; } .lasvegas span {animation: blink .3s infinite alternate;}.lasvegasspan.delay {animation-duration:6s;animation-delay: 2sanimation-direction: alternatecubic-bezier(0.5, 0.2, 0.3,1.0)}
@keyframes blink {0% {}
50% {}
60% {text-shadow:0 02px rgba(255, 255, 255, .1), 0 0 10px rgba(255, 255, 255, .4); text-stroke: 2px rgba(255,255,255,0.05);}
70% {text-shadow: 0 0 2px rgba(255,255,255,1), 0 0 10px.rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 030px rgba(255,255,255,1), 0 0 40px #ff00de, 0 0 70px#ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de;}
80% {text-shadow:0 0 2px rgba(255, 255, 255, .1), 0 0 10pxrgba(255, 255, 255, .4);text-stroke: 2pxrgba(255,255,255,0.05);}
100% {text-shadow: 0 0 2pxrgba(255,255,255,1), 0 0 10px rgba(255,255,255,1), 0 020px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,1),00 40px #ff00de,0 0 70px #ff00de, 0 0 80px #ff00de, 0 0100px #ff00de;}
}
<div class="lasvegas"><span> Neon text from<br></span> <span class="delay">Las Vegas</span> </div>


Related Topics



Leave a reply



Submit