I am trying to give a text input a drop-shadow & a inner shadow, using CSS3 and box-shadow, you can see my code here,
.text {
width:388px;
line-height:37px;
height:37px;
box-shadow:inset 0px 4px 4px rgba(193, 209, 230, 0.58), 0px 2px 2px, rgba(255, 255, 255, 0.75);
border-radius:10px;
background:#cdd6e6;
border:0 none;
}
http://jsfiddle.net/3CBrm/
However my box-shadow rules are just being ignored, what am I doing wrong?
You seem to have an extra ,:
...rgba(193, 209, 230, 0.58), 0px 2px 2px, rgba(255, 255, 255, 0.75);
^
After this fix, it seems like your shadow is there, but it's too similar to the background color.
jsFiddle Demo
Related
I am trying to recreate the image below that gives the button a "opaque" or blurred transparency look. I have tried googling for an opaque background but did not find much. How can I recreate this look?
The effect is called, I believe, glassmorphism. It is generally achieved using backdrop-filter. You can find a generator for this effect at https://css.glass/. Here's some example CSS it kicked out that seems like it approaching the style in your image:
.your-class-here {
/* From https://css.glass */
background: rgba(255, 255, 255, 0.19);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
Obviously there's some extra properties in there you might not need, but you can strip out what you do.
I am trying to create a theme for Gnome 3, but I am running into a bit of an issue with styling the title bar. I am using the following CSS in my attempt to style the bars, but it only applies to windows that utilize a GtkHeaderBar to override the title bar.
headerbar {
border: 1px solid #000000;
border-bottom: none;
border-radius: 4px 4px 0 0;
box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25), inset -1px 1px 0px 0px rgba(255, 255, 255, 0.25);
background-image: linear-gradient(to right, rgba(109, 179, 242, 0.5) 0%, rgba(84, 163, 238, 0.5) 50%, rgba(54, 144, 240, 0.5) 51%, rgba(30, 105, 222, 0.5) 100%);
padding: 0 5px;
}
headerbar:backdrop {
border: 1px solid #303030;
border-bottom: none;
background-image: linear-gradient(to right, #C1C1C1 0%, #B1B1B1 50%, #A2A2A2 51%, #8B8B8B 100%);
}
/* Window Body */
window {
border: 1px solid #000000;
border-top: none;
border-radius: 0 0 4px 4px;
box-shadow: inset 1px -1px 0px 0px rgba(255, 255, 255, 0.25), inset -1px -1px 0px 0px rgba(255, 255, 255, 0.25);
background-image: linear-gradient(to right, rgba(109, 179, 242, 0.5) 0%, rgba(84, 163, 238, 0.5) 50%, rgba(54, 144, 240, 0.5) 51%, rgba(30, 105, 222, 0.5) 100%);
padding: 5px;
}
window:backdrop {
border: 1px solid #303030;
border-top: none;
background-image: linear-gradient(to right, #C1C1C1 0%, #B1B1B1 50%, #A2A2A2 51%, #8B8B8B 100%);
}
window > box {
border: 1px solid black;
border-radius: 3px;
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.25);
margin: 4px;
background-color: #ABABAB;
background-image: none;
}
It appears that the window manager is using the styling information from the last loaded theme instead of the CSS I am providing. I am switching themes by running gsettings set org.gnome.desktop.interface gtk-theme "<theme name".
This is what the title bar is supposed to look like (applied to a different window)
This is what a gtk3-demo window looks like when switching to my theme after Ambiance
This is what a gtk3-demo window looks like when switching to my theme after Adwaita
My conclusion from this is that there is a separate set of css nodes or classes that are separate from headerbar, although none of the suggestions I have found online such as using .header-bar have lead to any success. I attempted to inspect the css node hierarchy by launching the interactive debugger with GTK_DEBUG=interactive gtk3-demo, but the node hierarchy viewer ends at the window node, which does not include the title bar.
What is the proper way to style the title bar for themes in gnome-3? Is there a master list of css nodes somewhere that could be used for reference?
Edit: I just came across and tried the decoration tag, but it seems to have the same issue as headerbar, where it does not effect windows without a GtkHeaderBar element.
Edit 2: It would now seem that my issue is not necessarily with the CSS I have created. As a last ditch effort to try and induce any change in the title bars, I created a rule * { color: #00ff00; background-color: #ff0000; background-image: none} but it had no effect on the titles. I am now beginning to think the default title bar is styled somewhere other than the application css, possibly in another folder under the ~/.themes/xyz/ directory. Currently I have copied my entire CSS into both the gtk-3.0 and gtk-3.20 folders, but it doesn't seem to change anything. This is a tree of my theme. Are there required files missing from this?
.
├── gtk-3.0
│ └── gtk.css
├── gtk-3.20
│ └── gtk.css
└── index.theme
This issue was caused by forgetting to install the User Themes extension in gnome-tweak-tool. Because the title bar for some applications is provided by the application itself, the theme applied to them, but other programs relied on the shell to provide the title bar, and were therefore left without a style.
In button Post Your Question i found this css
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3),0 1px 0 rgba(255, 255, 255, 0.4) inset;
I was thinkins there is just one part in property box-shadow so what mean the second ,0 1px 0 rgba(255, 255, 255, 0.4) inset ?
That is the shadow inside the box. The first part is the shadow around the box.
Here is a good article for you:
http://css-tricks.com/snippets/css/css-box-shadow/
Look for Inner Shadow in the article.
I'm attempting to recreate the attached style from MS Word in CSS to use in an ePUB I'm working on for a friend. I can always take a screenshot of each chapter heading and do it that way, but I'd prefer that it be done in CSS.
Here's what I've got in Word:
Here is the code I have so far:
#font-face {
font-family : "AR Christy";
font-style : normal;
font-weight : normal;
src : url("../fonts/archristy.ttf");
}
h1 {
font-family : "AR Christy", serif;
font-weight : bold;
font-style : normal;
font-size : 30pt;
text-decoration : none;
font-variant : normal;
color : #95B932;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
-webkit-text-stroke: 1px white;
text-shadow: 2px 2px 2px #888888;
line-height : 1;
}
And here's how it looks when rendered in Safari:
I seem to be having trouble with the "texture" of the text, if that makes sense.
The font is available here if you're interested in trying to help:
http://fontzone.net/font-details/ar-christy
I've added the following two closeup pictures to make the difference more obvious. Here's the Word version:
And here's the current CSS version:
EDIT: Thanks to Kelly's suggestion, I decided that I had to use multiple shadow layers. This is the code I ended up using:
text-shadow: rgb(187, 187, 187) 0px 1px 0px,
rgb(181, 181, 181) 0px 2px 0px,
rgb(172, 172, 172) 0px 3px 0px,
rgb(160, 160, 160) 0px 4px 0px,
rgb(145, 145, 145) 0px 5px 0px,
rgb(127, 127, 127) 0px 6px 0px,
rgba(0, 0, 0, 0.199219) 0px 7px 1px,
rgba(0, 0, 0, 0.296875) 0px 8px 6px;
Which looks like this... Not exactly a match, but I like the overall feel:
You are missing shadow only, not texture difference..
just add this line and you will see similar result..
-webkit-text-shadow: 2px 2px 2px #888888;
Edit,
with the shadow effect, modify this(as you don't want -webkit-)
text-shadow:2px 4px 6px RGBA(0,0,0,0.7);
Now you want tyhe 3d effect in font that is possible using inset shadow,
check the fiddle I have created that have 2 text one have shadow, and another have inset shadow, that creates look a like effect.. although its not the same as word 3d,
FIDDLE
I hope this will help.
It will be hard to exactly mimic that inner-shadow effect as the illusion of 'pillow embossed' (as in the photoshop effect) isn't an evenly distributed effect. AFAIK, css effects are all behind an object so you would need to get into placing one version above another to get it close.
The end result is that nothing would mimic Word's styling exactly. I attempted to use the code mentioned to create an inner shadow, but it didn't work with the font I was using.
I ended up going with a different 3d effect, that was achieved by layering multiple shadows. Here's the shadow code I used, along with the final text:
text-shadow: rgb(187, 187, 187) 0px 1px 0px,
rgb(181, 181, 181) 0px 2px 0px,
rgb(172, 172, 172) 0px 3px 0px,
rgb(160, 160, 160) 0px 4px 0px,
rgb(145, 145, 145) 0px 5px 0px,
rgb(127, 127, 127) 0px 6px 0px,
rgba(0, 0, 0, 0.199219) 0px 7px 1px,
rgba(0, 0, 0, 0.296875) 0px 8px 6px;
I gave Kelly credit for sending me down the right path with multiple layers.
CSS border radius works fine, but it's now revealing a white background. (I'd prefer transparent or grey, similar to body background...)
CSS:
.window_header{
width:600px;
height:42px;
background: #333 url("../img/bg-2.png") repeat;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-bottom:1px dotted #666;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3),inset 0 -4px 5px rgba(0, 0, 0, 0.2),inset 1px 0px 1px rgba(0, 0, 0, 0.7),inset -1px 0px 1px rgba(0, 0, 0, 0.7),inset 0 -2px 1px rgba(0, 0, 0, 0.5),inset 0 2px 6px rgba(255, 255, 255, 0.15),inset -2px 0 6px rgba(255, 255, 255, 0.15),inset 2px 0 6px rgba(255, 255, 255, 0.15);
}
The white should be from the background of the container "behind" the one you applied border-radius to.
Maybe try to apply border-radius to it as well.
I would recommend either applying Border Radius to the underlying Element so instead of having rough white edges, the element would have rounded corners. So you wouldn't see the white edges.
-or-
Place the whole element edit before the containing element so it sits on top of the white background and go from there.
Perhaps the bg-2 file isn't transparent in that area? Depending on the editor that you used to create the image, it may not have had the ability to make it transparent.
Max Gherkins's explanation is also a very big possibility. :)
background: #333 url("../img/bg-2.png") repeat;
Your background image is not transparent. If it is a "flattened PNG", make sure the background is "transparent" and not "white".