Text outer glow effect using CSS - html

I need to add an "outer glow" Photoshop effect to some text using CSS. Here is a screenshot of the mockup of what I am trying to acheive:
Here is the Photoshop layer settings:
I'm pretty sure this is text-shadow but I've been messing around with it and I cannot achieve a glow on all sides.

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>

There has text-shadow, first two values are x and y offsets, third value specifies the shadow blur:
text-shadow: 0 0 32px black;
body {
background-color: #00bcd4;
}
p {
margin: 30px;
color: white;
font-family: sans-serif;
font-size: 40px;
font-weight: bold;
text-shadow: 0 0 32px black;
}
<p>Lorem ipsum dolor sit amet</p>

Are you looking for something like this?
body{
background-color: #CCAA77;
}
div{
font-size: 40px;
color: white;
text-shadow: 0px 0px 30px white,0px 0px 30px white,0px 0px 30px white,0px 0px 10px #553300,0px 0px 10px #553300;
}
<div>Protecting From Cancer</div>
As you can see, you can compound several text-shadow to make them more intense and mixing colors.

Related

Add outside stroke to the text with css

How to add outside stroke for the text.
I tried with -webkit-text-stroke: 10px black; and text-shadow but my text becomes thinner, I want to have font size 24px.
p {
color: #fff;
text-shadow: -1px -1px 0 #844733, 1px -1px 0 #844733, -1px 1px 0 #844733, 1px 1px 0 #844733;
font-size: 24px;
}
<p>my text</p>
here is the image -> [1]: https://i.stack.imgur.com/5xMgn.png
I wanted very thick stroke and only outlide
You can use a pseudo element with identical text content to the main text and give the pseudo element the text-stroke. It was shown on CSS Tricks.
p {
color: #fff;
font-size: 24px;
position: relative
}
p:after {
content: attr(data-text);
-webkit-text-stroke: 6px #844733;
color: #844733;
position: absolute;
left: 0;
z-index: -1
}
<p data-text="my text">my text</p>
#import "compass/css3";
-webkit-text-stroke: width of stroke;
this one is pretty smooth

Have image and text on top of another image

So here is my goal, I want to have image(aka that's my logo) on top of another which is basically the background. So the background image has the logo on it and also some text and both are centered. Now here is my problem, because I set position to relative and absolute, when I resize the window, my images are not responsive, meaning the logo and the text aren't centered anymore.
So what I had to do, was put the texts and the logo in a div and make the background of that div the other image (using background-url in css) the other image background but that's not efficient. So I have this so far:
#pictures {
width: 100%;
margin-top: 0;
padding-top: 100px;
padding-bottom: 100px;
background: url('http://cdn-s-www.lalsace.fr/images/3CC1D55D-083C-44F1-B484-2D315D21D529/JDE_V0_07/(disney).jpg');
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
-webkit-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
}
#logo {
width: 30%;
height: auto;
padding-top: 20px;
background: none !important;
}
#line1 {
font-size: 30px;
color: white;
text-align: center;
padding-top: 40px;
margin-bottom: 4%;
letter-spacing: 0.1em;
-webkit-text-stroke: 1px white;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family: 'IM Fell Double Pica', serif;
}
#line2 {
font-size: 30px;
color: white;
text-align: center;
letter-spacing: 0.1em;
-webkit-text-stroke: 1px white;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family: 'IM Fell Double Pica', serif;
}
<div class=" ui centered grid">
<div id="pictures" class="ui containcer">
<h1 id="line1">Service - Awareness - Commnuity Outreach</h1>
<img id="logo" src="https://image.ibb.co/bBHabb/slide.png">
<h1 id="line2">Sophomores Leaders Impacting, Developing, and Educating</h1>
</div>
</div>
So here is my question : How can I fix the responsiveness problem without having to use the background-url property (So just have img tags in myhtml)? And fyi I am using Semantic UI instead of Bootstrap.
First, I would like to mention that this would be a great use of css grid. But to answer your question and to pick up from what you have started. In order to make your images responsive without using background you need them to have a width: 100% and a height: auto. I modified your code a bit to show this would work in your question. Notice I made a wraper class with the position of relative and an inner class with position of absolute. The inner class contains your text and can text-align: center here. Your text and logo will now be on top of the image and centered. You will need media queries to change your text size to fit within the image on smaller screens. If you want to vertically align your inner class you might want to check out this link: http://vanseodesign.com/css/vertical-centering/ for some more details.
.res-image {
width: 100%;
height: auto;
}
#logo {
width: 30%;
height: auto;
padding-top: 20px;
}
#line1 {
font-size: 30px;
color: white;
padding-top: 40px;
margin-bottom: 4%;
letter-spacing: 0.1em;
-webkit-text-stroke: 1px white;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px
1px 0 #000, 1px 1px 0 #000;
font-family: 'IM Fell Double Pica', serif;
}
#line2 {
font-size: 30px;
color: white;
letter-spacing: 0.1em;
-webkit-text-stroke: 1px white;
}
<div class="wrapper ui centered grid">
<img class="res-image" src="https://image.ibb.co/gjfJAR/DSC_0041.jpg">
<div class="inner ui containcer">
<h1 id="line1">Service - Awareness - Commnuity Outreach</h1>
<img id="logo" src="https://image.ibb.co/bBHabb/slide.png">
<h1 id="line2">Sophomores Leaders Impacting, Developing, and
Educating</h1>
</div>
</div>

I can't make the inner shadow of text (an incorrect result)

I encountered a problem when creating inner shadow for the text. I tried this method (some css does not work in such online-compilers, but the code is visible):
.text {
background-color: #565656;
font-size: 35px;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
<div class="text">
Text
</div>
The result is a light gray text, but I need the text of a different color. When I tried to change the text color and shadow color (not alpha), it became clear that, apparently, "background-clip: text;" do not cut the shadow in the text area, and I see a blurred silhouette outside the contours of letters.
This is what happens (the text and shadow colors are wrong here, but the overlap is visible):
And that's what I need:
By using a background color the same as main shadow color it's possible, there may be other ways but this is the most common one I know of.
Source code -- https://codepen.io/vincicat/pen/zikrC
body {
/* This has to be same as the text-shadows below */
background: #def;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 2em;
line-height: 1em;
text-align:center;
}
.inset-text {
/* Shadows are visible under slightly transparent text color */
color: rgba(10, 60, 150, 0.8);
text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}
/* Don't show shadows when selecting text */
::-moz-selection, ::selection {
background: #5af;
color: #fff;
text-shadow: none;
}
<h1 class="inset-text">Inset text-shadow trick</h1>
.text {
font-size: 50px;
display:flex;
justify-content: center;
font-stretch: ultra-expanded;
color: rgb(96, 32, 24);
background-color: rgb(186, 186, 186);
background-image: url(http://previews.123rf.com/images/auborddulac/auborddulac1201/auborddulac120100059/12000991-Dotted-yellow-background-Stock-Photo.jpg);
text-shadow: rgb(224, 224, 224) 1px 1px 0px;
}
<div class="text">
Text
</div>

Box positioning - cross-browser compatibility issue

I have a problem with a page layout on the website I am working on.
Here's a link
The blue box on the right hand side is looking good in IE and Firefox, but it's too short (the text is too close to the bottom of the box) in Chrome, Safari and Opera.
Here's the code for the box:
#testimon {
background: url("../img/ttm_bg.png") repeat-x scroll 0 0 transparent;
border-radius: 15px 15px 15px 15px;
border-top: 4px groove #00D1FA;
box-shadow: 0 1px 4px 1px #555555;
font-size: 14px;
height: 788px;
margin-top: 26px;
padding: 3px;
text-align: center;
width: 262px;
}
#testimon h4 {
color: rgba(255, 255, 255, 0.92);
font-size: 19px;
margin: 8px 0 17px 0;
text-shadow: 1px 2px 2px #1A1A1A;
}
#testimon p {
font-family:Georgia, "Times New Roman", Times, serif;
color: rgba(0, 0, 0, 0.88);
line-height:25px;
font-size: 14px;
font-style: oblique;
font-weight: bold;
text-shadow: 0 1px 1px #CCCCCC;
}
#testimon .quote {
font-size:25px;
padding:4px;
}
#testimon .signature {
color: #e6e6e6;
font-style: normal;
margin-bottom: 15px;
text-shadow: none;
}
#testimon .spacer2 {
background: url("../img/stars.png") no-repeat scroll 98px 0 transparent;
height: 13px;
margin: 31px 0 15px 0;
width: 262px;
}
Thanks for any help!
The problem is less a cross-browser issue and more a styling issue - you've got a fixed height on that testimonials div, so what if someone has different fonts than you specify, or increases the font size on their browser, the text will spill over (as it did when I upped the font using Firebug).
The solution is to remove the height from the #testimon element, and ensure that the background repeats vertically (which it currently does not).
This is probably a font rendering related issue. The sizes are slightly different in each browser so the end overall height is different. I would remove the height value from #testimon.
I look at the site with Crome, Opera, Maxathon, Firefox, Safari, and I.E., all browsers are current version of the browser. The images and the text look good. The only issue I could see were in some of the browsers you had to click on the image two or maybe three times to make the image to zoom in.
You might want to clear the cache of the browser and close and re-open the browser.

adding text to images for navigation bar

I have a navigation bar but want to add images to it, so that rather than text links, the nav bar is made up of buttons consisting of an image and text which have a hover effect etc.
But as some of the link names are dynamic I can't make the buttons in photoshop so was wondering how to make this type of nav bar in just html and css.
Any ideas?
EDIT
To clarify i have the following image sample nav button
and want to add text beneath this to form the buttons on the nav bar if that makes it clearer.
You can do a lot just with CSS
The basic idea is to change attributes of each state of the button using pseudo classes .cssclass:hover to mouse over state and .cssclass:active to mouse down.
normal
/* style of the button in normal state */
button.css3button{
padding: 0.5em;
background-color: lightblue;
border: 4px outset green;
color: green;
border-radius: 4px;
}
:hover
/* properties that change when mouse over */
button.css3button:hover {
background-color: lightgreen;
}
:active
/* properties that change when mouse down */
button.css3button:active {
color: yellow;
border: 4px inset red;
}
Live Demo: JSFIDDLE
more complex styling examples with CSS3:
<button type="button" name="" value="" class="css3button">submit</button>
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#bfc2ff 0%,
#82b4ff 25%,
#4664fa);
background: -webkit-gradient(
linear, left top, left bottom,
from(#bfc2ff),
color-stop(0.25, #82b4ff),
to(#4664fa));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
-webkit-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(49,141,212,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
Demo: JSFIDDLE
you can of course change sizes, colors, gradients for each state :hover :active :visited on your own taste, you can style almost anything <a> <span> <div> <button>
This question isn't really suited for this forum. It is for specific problems, not basic tutorials. There are plenty of good tutorials out there you can find by doing a simple google search that walk you through basic CSS and how to achieve this.
But just to get you started, you could do something like this: http://jsfiddle.net/wgBTZ/
HTML:
<ul>
<li><a href="#" >One</a></li>
<li><a href="#" >Two</a></li>
<li><a href="#" >Three</a></li>
<li><a href="#" >Four</a></li>
</ul>
CSS:
li {
float:left;
width: 100px;
height: 40px;
background:#CCC;
margin:0 0 0 15px;
}
a {
color: black;
text-decoration:none;
float:left;
width: 100px;
height: 40px;
background:#CCC;
}
a:hover {
background:#000;
color:white
}
Edit: This is just the basic mechanics. With CSS3 you can take what I've done above and actually build some pretty cool stuff.