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.
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 need to remove the border from ion-search bar . I tried the following code in variable.scss but got no luck.I am pretty new in ionic so please tell me in details.
.searchbar-input {
-webkit-box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 1),
0 3px 1px -2px rgba(255, 255, 255, 1), 0 1px 5px 0 rgba(255, 255, 255, 1);
box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 1),
0 3px 1px -2px rgba(255, 255, 255, 1), 0 1px 5px 0 rgba(255, 255, 255, 1);
}
Is hard to figure out a solution without the output of your code, you might try this:
.searchbar-input {
border: 0 !important;
box-shadow: none !important;
}
If it is ionic 4, try this:
.sc-ion-searchbar-md-h {
--box-shadow: none !important
}
In the SCSS file of the component which uses the searchbar.
I'm using Ionic 3, the solution that worked for me was put this code in the scss associate file:
ion-searchbar {
.searchbar-input-container {
.searchbar-input {
box-shadow: none;
}
}
}
I'm playing at CodePen and trying to make a cinematic CSS3 lens flare like in multimillion blockbusters. I tried to make it through the box-shadows but I'm unable to make them with needed shape, this is totally wrong. I can't use canvas or JS at all, so the point is to make it only with css, if it's possible. The result effect I want to get is something like this:
http://codepen.io/byob/pen/azzbjB This is that pen
#-webkit-keyframes blink {
0% { box-shadow: none; }
100% {
box-shadow: inset 10px 0px 50px 0px rgba(255, 0, 0, 0.5),
inset -10px 0px 50px 0px rgba(255, 0, 0, 0.5),
1px 1px 500px 30px rgba(255, 0, 0, 0.5),
50px 0px 0px 0px rgba(255, 0, 0, 0.5),
-20px 0px 0px 0px rgba(255, 0, 0, 0.5);
}
}
The one i want to do, is way more complex, so, guess i need help or the fact that it is impossible w/o js.
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".