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.
Related
I am trying to add a blur/glass effect to a Chrome Extension to look like https://css.glass/
These are the styles I used on the <html> of the popup
.extension-html {
background: rgba(0, 0, 0, 0.7);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.9px);
-webkit-backdrop-filter: blur(4.9px);
}
And this is how it looks like:
This is how it should look like: (Photoshop edit)
Is adding a glassy transparent effect like this doable with chrome? If so, any guidance would be appreciated
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.
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
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".
I am having trouble trying to style a select element in opera.
What happens, is that most of the styles applied to this element in the css is shown in Opera (11.60), but for some reason bits also get left out, like the box shadow effect and border radius.
It seems to me that opera displays the select element above these styles, as I have noticed in the transitioning that the curved border does exist, it's just behind the select element. As in, the select element when unfocused appears to have no border radius effect, but when focus is applied to the element, you then see the border in transistion then it disappears behind the element again.
In IE 9, Firefox 9 and the latest version of Chrome, the select element in question comes out near uniform. And in all, including Opera, the input element comes out perfectly with the same element styles applied.
Here's the HTML:
<div class="searchBox">
<form method="post" action="'.$_SERVER['PHP_SELF'].'" name="search">
<label for="bizName">Biz Name:</label>
<input name="bizName" class="bizName" type="search" placeholder="Search..." />
<label for="bizCategory">Biz Category:</label>
<select name="bizCategory" class="bizCategory" onchange="this.form.submit()">
<option>Choose</option>
</select>
<button type="submit" name="searching" class="search" value="Search">Search</button>
</form>
<!-- end .searchBox --></div>
And heres the pages' CSS:
input, select {
background: #fcfcfc;
border: 0px none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #6a6f75;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: , 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-background-clip: padding-box;
-webkit-transition: all 0.7s ease-out 0s; /* Saf3.2+, Chrome */
-moz-transition: all 0.7s ease-out 0s; /* FF4+ */
-ms-transition: all 0.7s ease-out 0s; /* IE10? */
-o-transition: all 0.7s ease-out 0s; /* Opera 10.5+ */
transition: all 0.7s ease-out 0s;
}
input {
padding: 7px 25px;
width: 135px;
}
select {
padding: 7px 10px;
width: 185px;
}
input:focus, select:focus
{
background: #6699cc;
color: #e7f3ff;
text-shadow:
-1px -1px 0 #666,
1px -1px 0 #666,
-1px 1px 0 #666,
1px 1px 0 #666;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}
.bizCategory {
margin-right: 15px;
}
I don't see why Opera should react this manner, as I believe it does support the W3C spec somewhat?
In anycase, my assumption is that Opera is applying some sort of default style to this select tag. But that is only an assumption.
Would anyone else be able to provide any input in this regard; or would anyone that has experienced this problem before, be able to explain what exactly is going on here?
Thank you in advance to taking the time to read through this!
Improved answer for 2015:
I found my using of styled select lists very needed for the time we're in now - so here is the once that i have the best experience with so far. And there isn't really any none javascript solution to the issue. Tough you could use a unordered list and list elements and style it, and grab the info from the selected li with some javascript and post trough an ajax post method. IE8+ approach for this without any frameworks would look like this:
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
If you are using a framework checkout the build-in selects in angular and bootstrap below.
Angular
Angular select comes from angular material you can style on top of this as crazy as you want or style your own, using the frameworks javascript i done the same.
There is also Bootstrap UI which is an angular framework for all kind of form fields.
Bootstrap
If your not using angular in your project i think the way that bootstrap solved it's the best i've used so far. Bootstrap select
Old answer
Generally i would say never redesign a select button, but anyhow checkout its way to approche it https://gist.github.com/itsadok/1139558
If you only need to hit newer browsers, you can use this, and just style it like any other object:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
See some stuff about it HERE
Or i would go for a javascript solution there's a lot of people out there already done it and shared like this: adam.co/lab/jquery/customselect or this bulgaria-web-developers.com/projects/javascript/selectbox or build it my self like a jquery plugin build on ul and li's
in your issue you could even go for a menu structure like "ul & li", that gave a jquery call on click something like THIS FIDDLE
just take the text from the ".yourtextholder" and send to the url
It is the background of the select element which does not respect the rounded corners. (Similar to ActiveX filters in IE8)
If you don't need a specific background color, you can use a completly transparent background:
select {
background-color: rgba(255, 255, 255, 0.0)
}
The drop down button still overlaps the corners on the right, but at least on the left you get rid of those 'dog ears'.