I noticed that the buttons on unfuddle.com use a layer of noise, i was just wondering what the purpose of this is, i can't visibly notice the difference, but perhaps this is some cross browser hack?
It seems silly to build such an awesome CSS3 button that uses no images only to still load a noise image anyway.
Here is their CSS that goes with the buttons in question, note the gnoise.png?cbv-1346878364
.gp_button, a.gp_button, input.gp_button:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
color: #FFFFFF;
display: inline-block;
font-family: "Lato","Arial",sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
line-height: 34px;
margin-right: 1px;
padding: 0 1em;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.gp_button:hover, a.gp_button:hover, input.gp_button:hover:not([type="radio"]) {
background-color: #A5C416;
background-image: radial-gradient(at center center , #85C700 20%, #7EBD00 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
}
.gp_button:visited, a.gp_button:visited, input.gp_button:visited:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #7FBF00;
}
.gp_button:active, a.gp_button:active, input.gp_button:active:not([type="radio"]) {
background-color: #C0EB00;
background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
border-color: #90D900;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
}
.oldie .gp_button, .oldie a.gp_button, .oldie input.gp_button:not([type="radio"]) {
background-color: #7EBD00;
border-color: #7FBF00;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
color: #FFFFFF;
display: inline-block;
font-family: "Lato","Arial",sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
line-height: 34px;
margin-right: 1px;
padding: 0 1em;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.oldie .gp_button:hover, .oldie a.gp_button:hover, .oldie input.gp_button:hover:not([type="radio"]) {
background-color: #85C700;
}
.oldie .gp_button:visited, .oldie a.gp_button:visited, .oldie input.gp_button:visited:not([type="radio"]) {
background-color: #7EBD00;
}
.oldie .gp_button:active, .oldie a.gp_button:active, .oldie input.gp_button:active:not([type="radio"]) {
background-color: #7EBD00;
border-color: #90D900;
}
gnoise.png goes on top of the background-color (along with the radial gradient) to add some visual complexity to an otherwise flat image. The effect is barely visible on a.gp_button, but you can see it if you zoom in on a screenshot using Photoshop, or use the eyedropper to compare pixel colors. The effect is more visible on the <footer> element, because of its darker background color.
By re-using one image on top of solid colors, they get a variety of colors while avoiding multiple HTTP requests which might slow down page loading.
It's just a guess, but the get parameter (?cbv=1346878364) could be used to ensure that, after an update to the image files, a new image file is actually pulled from the server instead of using a browser-cached version.
My guess is that it could have been there for browsers that don't support CSS3. However when I inspect the button in chrome it is overwritten by another image, which makes me believe that is not the case.
If it is not there for older browsers then chances are it is just a coding error. maybe they used it at some point and forgot to take it out.
But to answer your question. It isn't used for anything because it is been overwritten by this image. And if you are looking to replicate what they are doing then I would just remove it.
background-image: -webkit-radial-gradient(center center, #7ebd00 20%,#77b300 80%),url('/images/gnoise.png?cbv=1346878364');
Here is my file input rendered in Chrome:
In IE it looks a lot more basic, which is fine (although the vast inconsistencies with this particular control are frustrating!)
My default CSS for inputs is:
input{
font-family: arial, sans-serif;
font-size: 12px;
font-weight: bold;
color:White;
background-image:url(../images/buttonBG.png);
height:27px;
border:1px solid #000;
border-radius: 7px;
-moz-border-radius: 7px;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
text-shadow: 0px 1px 2px #000;
}
input:hover{
text-shadow: 0px 1px 2px #fff;
background-image:url(../images/buttonBGo.png);
}
As you can see there are two types of text on the control, is it possible to style both individually?
Also is there any way to specifically select file inputs? Like input.file (doesn't seem to work). If this is not possible, how do I remove all the CSS the input style has applied to it (so I am working with a blank slate again).
Though i have never implemented it anywhere but while studying about the same i came across this url
http://pixelmatrixdesign.com/uniform/
This might help you out.
you can't differentiate input types in IE. In recent browser you might be able to achieve it with css3 attributes selectors:
input[type=button] {
border: 15px solid Red;
}
what you can do is manually add a css class to your file input:
<input type="file" class="inputFile" />
.inputFile { color: Yellow; }
For full customazation (e.g. changing the look of the browse button) you'll need to use the label element technique.
It's fully semantic, accessible and requires no JavaScipt. Basically, you hide the input, ensure the id is set on both the label and file field, then style the label accordingly. Here's a great article that explains the technique along with a CodePen (https://codepen.io/bmarshall511/pen/bjyEgq) that shows how it's done: https://benmarshall.me/styling-file-inputs/
[type="file"] + label {
background: #f15d22;
border-radius: 5px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
I am currently playing around with CSS3 and trying to achieve a text effect like this (the black blurry inner shadow):
But I cannot find a way to create text shadows inside the text. I wonder whether it is still possible because the box-shadow element is able to render shadow inside like this:
box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
Any ideas?
Here's a little trick I discovered using the :before and :after pseudo-elements:
.depth {
color: black;
position: relative;
}
.depth:before, .depth:after {
content: attr(title);
color: rgba(255,255,255,.1);
position: absolute;
}
.depth:before { top: 1px; left: 1px }
.depth:after { top: 2px; left: 2px }
The title attribute needs to be the same as the content. Demo: http://dabblet.com/gist/1609945
You should be able to do it using the text-shadow, erm somethink like this:
.inner_text_shadow
{
text-shadow: 1px 1px white, -1px -1px #444;
}
here's an example: http://jsfiddle.net/ekDNq/
An elegant example without the need for a positioned wrapper or duplicative content in the markup:
:root {
background: #f2f2f2;
}
h1 {
background-color: #565656;
font: bold 48px 'Futura';
color: transparent;
text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.8);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
<center>
<h1>Text With Inner Shadow</h1>
</center>
Looks good on dark backgrounds as well:
:root {
--gunmetal-gray: #2a3439;
background: var(--gunmetal-gray);
}
h1[itemprop="headline"] {
font-family: 'Futura';
font-size: 48px;
padding-bottom: 0.35rem;
font-variant-caps: all-small-caps;
background-color: var(--gunmetal-gray);
color: transparent;
text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.1);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
filter: brightness(3);
}
<center>
<h1 itemprop="headline">Text With Inner Shadow</h1>
</center>
AND ME LINK
AND ME2 LINK
Here's my best try:
.inner_shadow {
color:transparent;
background-color:white;
text-shadow: 0 0 20px rgba(198,28,39,0.8), 0 0 0 black;
font-family:'ProclamateHeavy'; // Or whatever floats your boat
font-size:150px;
}
<span class="inner_shadow">Inner Shadow</span>
The problem is how to clip the shadow that bleeds around the edges!!! I tried in webkit using background-clip:text, but webkit renders the shadow above the background so it doesn't work.
Making a Text Mask with CSS?
Without a top mask layer it is impossible to do a true inner shadow on text.
Perhaps someone should recommend that the W3C add background-clip: reverse-text, that would cut a mask through the background instead of cutting the background to fit inside the text.
Either that or render the text-shadow as part of the background and clip it with background-clip: text.
I tried absolutely positioning an identical text element above it, but the problem is background-clip: text crops the background to fit inside the text, but we need the reverse of that.
I tried using text-stroke: 20px white; on both this element and the one above it, but the text stroke goes in as well as out.
Alternate Methods
Since there is currently no way to make an inverted-text mask in CSS, you could turn to SVG or Canvas and make a text replacement image with the three layers to get your effect.
Since SVG is a subset of XML, SVG text would still be select-able and searchable, and the effect can be produced with less code than Canvas.
It would be harder to achieve this with Canvas because it doesn't have a dom with layers like SVG does.
You could produce the SVG either server-side, or as a javascript text-replacement method in the browser.
Further Reading:
SVG versus Canvas:
http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
Clipping and Masking with SVG Text:
http://www.w3.org/TR/SVG/text.html#TextElement
More precise explanation of the CSS in kendo451's answer.
There's another way to get a fancy-hacky inner shadow illusion,
which I'll explain in three simple steps. Say we have this HTML:
<h1>Get this</h1>
and this CSS:
h1 {
color: black;
background-color: #cc8100;
}
Step 1
Let's start by making the text transparent:
h1 {
color: transparent;
background-color: #cc8100;
}
Step 2
Now, we crop that background to the shape of the text:
h1 {
color: transparent;
background-color: #cc8100;
background-clip: text;
}
Step 3
Now, the magic: we'll put a blurred text-shadow, which will be in front
of the background, thus giving the impression of an inner shadow!
h1 {
color: transparent;
background-color: #cc8100;
background-clip: text;
text-shadow: 0px 2px 5px #f9c800;
}
See the final result.
Downsides?
Only works in Webkit (background-clip can't be text).
Multiple shadows? Don't even think.
You get an outer glow too.
There's no need for multiple shadows or anything fancy like that, you just have to offset your shadow in the negative y-axis.
For dark text on a light background:
text-shadow: 0px -1px 0px rgba(0, 0, 0, .75);
If you have a dark background then you can simply invert the color and y-position:
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);
Play around with the rgba values, the opacity, and the blur to get the effect just right. It will depend a lot on what color font and background you have, and the weightier the font, the better.
You can kind of do this. Unfortunately there's no way to use an inset on text-shadow, but you can fake it with colour and position. Take the blur right down and arrange the shadow along the top right. Something like this might do the trick:
background-color:#D7CFBA;
color:#38373D;
font-weight:bold;
text-shadow:1px 1px 0 #FFFFFF;
... but you'll need to be really, really careful about which colours you use otherwise it will look off. It is essentially an optical illusion so won't work in every context. It also doesn't really look great at smaller font sizes, so be aware of that too.
Try this little gem of a variation:
text-shadow:0 1px 1px rgba(255, 255, 255, 0.5);
I usually take "there's no answer" as a challenge
I've seen many of the proposed solutions, but none were quite what I was hoping.
Here's my best hack at this, where the color is transparent, the background and the top text-shadow are the same color with varying opacities, simulating the mask, and the second text-shadow is a darker, more saturated version of the color you actually want (pretty easy to do with HSLA).
(btw, text and styling based upon a dupe thread's OP)
I've had a few instances where I've needed inner shadows on text, and the following has worked out well for me:
.inner {
color: rgba(252, 195, 67, 0.8);
font-size: 48px;
text-shadow: 1px 2px 3px #fff, 0 0 0 #000;
}
This sets the opacity of the text to 80%, and then creates two shadows:
The first is a white shadow (assuming the text is on a white background) offset 1px from the left and 2px from the top, blurred 3px.
The second is a black shadow which is visible through the 80% opacity text but not through the first shadow, which means it's visible inside the text letters only where the first shadow is displaced (1px from the left and 2px from the top). To change the blur of the this visible shadow, modify the blur parameter for the first layer shadow.
Caveats
This will only work if the desired color of the text can be achieved without it having to be at 100% opacity.
This will only work if the background color is solid (so, it won't work for the questioner's specific example where the text sits on a textured background).
Here is a link talking about how to do this, it should be what you are looking for:
http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/
This looks like it's working: http://tips4php.net/2010/08/nice-css-text-shadow-effects/
He's using multiple shadows to achieve that effect as explained here: http://www.w3.org/Style/Examples/007/text-shadow#multiple
Seems everyone's got an answer to this one. I like the solution from #Web_Designer. But it doesn't need to be as complex as that and you can still get the blurry inner shadow you're looking for.
http://dabblet.com/gist/3877605
.depth {
display: block;
padding: 50px;
color: black;
font: bold 7em Arial, sans-serif;
position: relative;
}
.depth:before {
content: attr(title);
color: transparent;
position: absolute;
text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
}
This is easily the best example I have seen.
http://lab.simurai.com/carveme/
The source is on gitthub
https://github.com/simurai/lab/tree/gh-pages/carveme
Building on the :before :after technique by web_designer, here is something that comes closer to your look:
First, make your text the color of the inner shadow (black-ish in the case of the OP).
Now, use an :after psuedo class to create a transparent duplicate of the original text, placed directly on top of it. Assign a regular text shadow to it with no offset. Assign the original text color to the shadow, and adjust alpha as needed.
http://dabblet.com/gist/2499892
You don't get complete control over spread, etc. of the shadow like you do in PS, but for smaller blur values it is quite passable. The shadow goes past the bounds of the text, so if you are working in an environment with a high contrast background-foreground, it will be obvious. For lower contrast items, especially ones with the same hue, it's not too noticeable. For example, I've been able to make very nice looking etched text in metal backgrounds using this technique.
Here's a great solution for TRUE inset text shadow using the background-clip CSS3 property:
.insetText {
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}
Here's what I came up with after looking at some of the ideas here. The main idea is that the color of the text blends with both shadows, and note that this is being used on a grey background (otherwise the white won't show up well).
.inset {
color: rgba(0,0,0, 0.6);
text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6);
}
There's a much simpler way to achieve this
.inner{color: red; text-shadow: 0 -1px 0 #666;} // #666 is the color of the inner shadow
Voilà
For normal-sized text on small-ish buttons
I found the other ideas on this page to lose their efficacy when used on small buttons with small text lettering. This answer expands on RobertPitt's answer.
Here is the minor tweak:
text-shadow: 1px 1px transparent, -1px -1px black;
$('button').click(function(){
$('button').removeClass('btnActive');
$(this).addClass('btnActive');
});
body{background:#666;}
.btnActive{
border: 1px solid #aaa;
border-top: 1px solid #333;
border-left: 1px solid #333;
color: #ecf0f8;
background-color: #293d70;
background-image: none;
text-shadow: 1px 1px transparent, -1px -1px black;
outline:none;
}
button{
border: 1px solid #446;
border-radius: 3px;
color: white;
background-color: #385499;
background-image: linear-gradient(-180deg,##7d94cf,#1c294a 90%);
cursor: pointer;
font-size: 14px;
font-weight: 600;
padding: 6px 12px;
xxtext-shadow: 1px 1px 2px navy;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnActive">Option One</button>
<button>Option Two</button>
Note:
I used this site to finesse the color shades.
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
for box shadow:
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
you can see online text and box shadow:
online text and box shadow
for more example you can go to this address :
more example code freeclup
Try this example for inset text shadow. Here's the HTML
<h1 class="inset-text-shadow">Inset text shadow trick</h1>
and the CSS
body {
background: #f8f8f8;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 6em;
line-height: 1em;
}
.inset-text-shadow {
/* Shadows are visible under slightly transparent text color */
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
}
Demo on Jsfiddle
I'm using it from this site, also it looks good. Have a look at it Inner shadow
Trying out some webkit transitions on a site and have come across a problem. The hover state on my links adds a 1px border and decreases the padding so that the positioning stays the same. Works fine normally, but not when I add the transition. Obviously, as I'm only making 1px changes, it happens abruptly, but it doesn't happen at the same time - the padding changes before the border, so the whole thing 'jiggles'.
#loginbuttons a {
text-decoration: none;
padding: 5px;
-webkit-transition: all 0.5s ease;
}
#loginbuttons a:hover {
padding: 4px;
border: 1px solid black;
background-color: yellow;
}
The best way I've found to get around this is to have a white border on the normal state so that it's only changing the color, but I want it to be transparent. Also, is there any way of fading the background color in from white instead of black without setting a white background color? Again, I want it to be transparent, but it just looks weird going gray and then yellow!
I've got transitions on my navigation menu as well, and the same thing happens (this time altering the padding and margin):
#nav ul li a {
color: white;
padding: 10px 10px 8px 10px;
margin: 0 5px;
border: 1px solid black;
opacity: 0.85;
-webkit-transition: all, 0.5s;
}
#nav ul li a:hover, #nav ul li a.selected {
color: black;
padding: 13px 13px 11px 13px;
margin: 0 2px;
text-shadow: 2px 2px 4px white, -2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white;
opacity: 1;
-webkit-box-shadow: 0px 0px 8px #888;
}
Hmmm, just tried bumping the values up a bit, and even changing the margin and padding by 15px using a linear transition still produces a small (looks like 1 or 2px) glitch. Same thing happens in safari and chrome.
Anyone got any ideas how to make it smooth? Or sort out the color issue? Think it would be better doing it with jquery (ignoring the cross-browser support!)? Might go and see if the same thing happens with opera...
edit: seems like the 10.5a opera release for macs still doesn't support transitions...
First of all, it might be worthy to try border: 1px solid transparent so that the transition changes only the color of the border. In that sense the padding stays the same and there is less browser guesswork. If transparent does not work, any color with an alpha value of 0, for example, rgba(0, 0, 0, 0) is also acceptable.
Opera Presto 2.3 supports transitions, but it asks for different statements — -o-transition-property et al. Hope that this link would be of good use. Firefox does CSS transitions too, and they have a demo page. To make transitions work in Firefox, one must use -moz- statements.