Creating dark inset text is simple. You just write the same word twice (using text-shadow in this case) but the second time you write it drop it down and to the right a little bit and write it in a lighter color with some opacity. Easy once you figure it out.
The problem I am having is with white inset text. There is no color whiter than white so there is no way to create the illusion of more light being at the top than down inside the inset character. The best I can come up with is white outset text but I want white inset text.
.dark {
color:rgba(0, 0, 0, .6);
text-shadow:2px 2px rgba(255, 255, 255, .1);
}
.light {
color:rgba(200, 200, 200, 1);
text-shadow:2px 2px rgba(0, 0, 0, .2);
}
fiddle
Found an answer on IRC fiddle
the light is hitting from the top left so it looks darker where the tl z axis would be
You just have to try different combinations. I have also used multiple text-shadows to do inset text styles.
I prefer just doing this for your light style:
text-shadow:1px -1px rgba(0, 0, 0, .2);
Position the dark text shadow on the opposite side of the light text shadow:
text-shadow: -2px -2px rgba(0, 0, 0, .2);
Related
What is the correct order of box shadow value position.
If I put the color values at the beginning or at the end it works fine, but what is more correct? Does this matter in web browsers, or do they display both? Mozilla's website and examples have the color at the end.
Which is more correct or are both correct? What about the other values of inset, offset-x-y, blur, spread-radius and their positions?
Color at the end:
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
Color at the beginning:
/* color | offset-x | offset-y | blur-radius | spread-radius */
box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px 1px;
The order of the values in the box-shadow property is as follows:
box-shadow: [inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color];
It is important to note that the order of the values is fixed, and the values should be placed in the order listed above. It does not matter whether the color is placed at the beginning or the end, as long as all of the values are included in the correct order.
For example,
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 2px 1px;
box-shadow: inset 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
It is generally considered good practice to place the color value at the end.
It does not matter whether the color is placed at the beginning or the end, as long as all of the values are included in the correct order.
Putting the color at the beginning or end of the format string are both equally correct.
According to the formal syntax:
box-shadow =
none |
<shadow>#
<shadow> =
<color>? &&
[ <length>{2} <length [0,∞]>? <length>? ] &&
inset?
Where && means that:
all these entities are mandatory but may appear in any order.
(Note that the question mark (?) denotes that an entity is optional, so in this specific case, not all are mandatory.)
I recently added the following code to one of my text elements to add a cool underline to it:
border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
border-image-slice: 1;
width: fit-content!important;
It looks like this on chrome and Android:
live picture here
However, on iOS devices the border completely surrounds the whole text and looks like this:
iOS live picture here
I tried some -webkit and -moz-fit-content type of things but since I am not actively in programming I did not get it to work.
I hope someone can help with this problem and I appreciate your solutions!
Best regards!
In your border-image-slice, give it precision and it will be ok :)
I've tested it and it works on Safari v 13.1.2
Aurélie
p {
border-bottom: 2px solid transparent!important;
border-image: linear-gradient(0.25turn, rgb(0, 0, 0), rgb(255, 0, 0), rgb(255, 204, 0));
border-image-slice: 0 0 1 0;
width: fit-content!important;
}
<p>Biscuit cake sweet roll. Carrot cake caramels</p>
I need to create gradient that will be in the bootom of element and look like this
I have tried like this
.div-with-shadow {
padding-bottom: 1.4285714286rem;
border-bottom: solid 0.0714285714rem rgba(0, 0, 143, 0.05);
box-shadow: inset 0 -3.5714285714rem 3.5714285714rem -3.5714285714rem #e9e9fd;
}
<div class="div-with-shadow"></div>
But it does not look the same, this has to be some kind of gradient and not border, anyone can help me, thanks
I have been trying to build a site with the right and left sides of the main container having a brown shadow.
So far I achieved my goal but not completely, meaning I get shadow on both sides but it is too dark. I want my shadow to be much lighter (something like Bloomingdales.com website).
Here is my css code, any suggestion?
Thanks!
.container {
overflow: hidden;
background: white;
padding: 15px;
-webkit-box-shadow: 4px 2px #492409, -4px 0 2px #492409;
-moz-box-shadow: 4px 0 2px -6 #492409, -1px 0 2px #492409;
box-shadow: 4px 0 2px #492409, -4px 0 2px #492409;
}
As #Vlad Saling pointed out, css3 supports a variety of box-shadow options.
This Website has some great information concerning how browsers compute shadows. In particular:
You can specify colours in CSS using the alternate rgba([red], [green], [blue], [alpha]) syntax. RGB values are written in decimal (0-255) and the last attribute is “alpha” (i.e. opacity) a decimal number from 0 (transparent) to 1 (opaque). 0.5 alpha gives you something 50% transparent. So rgba(0, 0, 0, 0.25) gives you a nice faded black shadow that stays dark enough to be noticeable over even dark grey.
To solve your problem, either change the color to a lighter shade of brown, or adjust your box shadow attributes to include an alpha channel by declaring its color using rgba rather than hex:
-webkit-box-shadow: 4px 2px rgba(28, 14, 3, x), -4px 0 2px rgba(28, 14, 3, x);
-moz-box-shadow: 4px 0 2px -6 rgba(28, 14, 3, x), -1px 0 2px rgba(28, 14, 3, x);
box-shadow: 4px 0 2px rgba(28, 14, 3, x), -4px 0 2px rgba(28, 14, 3, x);
Should work. Replace x with the degree of alpha transparency (opacity) that you want. For example, .5 for 50% transparency.
i've been reading and experimenting with conditional css to display the following css for IE 8.
box-shadow: 0 1px 1px inset, 0 0 40px rgba(0, 0, 0, 0.5) inset, 0 16px 0 rgba(255, 255, 255, 0.4) inset, 0 4px 5px rgba(0, 0, 0, 0.6);
I have been fiddling with gradient and offset but i can not find anything about inset without having to create additional elements.
is is possible to 3 insets and use rgba, as using the gradient start and end for ie was a standard gradient. If not i will happily use basic styling and drop the css3 styling, thanks
Nope, it is not supported; http://dimox.net/cross-browser-css3-box-shadow/... However, take in consideration your analytics data and see how many visitors are really using ie8, maybe it's only a small percentage, and it's not that much of a mis;)