Is it possible to adjust the opacity of just the text shadow, rather than the text itself as well?
E.g I have purple text with a blue shadow. I'd like to make the blue shadow have an opacity without losing anything on the purple.
h1.blue {text-shadow: 3px 3px 0px #3f6ba9;}
Yes, but specify color in rgba mode to add alpha transparency.
h1.blue {text-shadow: 3px 3px 0px rgba(63,107,169, 0.5)} //half of transparency
To add on the answer for anyone looking to use HEX code instead of RGB:
h1.blue {text-shadow: 3px 3px 0px #3f6ba980;}
The last 2 characters in the above HEX code has opacity set at 50%. For other opacity values, please refer to opacity-hex charts as linked here. Alternatively, if you are using VScode, you will be able to use their in-built color picker to adjust the opacity.
Related
It is easy to change the background color of an Ionic App by setting $background-color in variables.scss, but it wont work with gradients or images. I was surprised that I could not find any official documentation on this, nor a lot of useful questions and answers.
If you set $background-color to a non-color you will currently get a Sass error from one of the many Ionic components that calculate their colors based on the background color.
So here is what I ended up doing, first in src/theme/variables.scss:
$app-background: linear-gradient(to bottom, color($colors, light) 0%, color($colors, dark) 100%);
$background-color: transparent;
$toolbar-background: transparent;
The normal background and toolbar must be transparent to show the gradient underneath. We apply the gradient in src/app/app.scss:
ion-content {
background: $app-background;
}
You may think that ion-content only takes up the space between your header/navbar and footer/tabs, but is actually styled by Ionic to fill the entire screen. So you got your gradient from top to bottom. Success.
I am wondering if it is possible with leaflet.js (current beta version) to only draw the border on the inside of the polygon (inline border).
For example: I have a square polygon with a 6px border. This would show 3px of the border on the inside of the polygon and the other 3px on the outside. Is there a way to only show the 3px on the inside?
A workaround is to reduce the size of the polygon and use the default border, but it would be nice to have an option without having to reduce the size of the polygon.
Does anyone know how to achieve this without reducing the size of the polygon?
Cheers
Im testing some stuff for an app in SWIFT. My goal is to have the full screen covered in blocks, so it give a 100% width and height. but for some reason, theres always 1px or 2px spacing.
I think its because when i screenWidth is 320px, and I try to split it with 3 blocks, that would give 106,6666px pr block which is not possible.
Anyone got a good idea how to solve this? Should i maybe just add 1px if the number is uneven?
For the problematic behavior, try resizing the window of this web app. Thought the header and boxes stop being resized after a minimum dimension, the background image continues to position itself at the center of the page, which looks really stupid.
Here's the relevant code for the background image:
body{
text-align: center;
min-width:1000px;
min-height: 600px;
background: url(../images/road_newtry_tile4.jpg) 50% 50% fixed;
}
Even though background-position isn't nixing the min-width and height (ie, the window will stop resizing after predetermined dimensions, it continues to center the background image.
Why is it doing this? How can I prevent the image from re-centering after certain a certain point?
it is doing it because the 50% is relative to the size of the browser window. A fix would be to instead have the background image on a wrapper div, which has the min-width and min-height set.
In the page found in below link(bg-button.html), I have put round image as a background using styles. But I find a gray background outside the image area. How can I make the background transparent, Please let me know?
Round image as background
You can add the following style to the button:
background-color: transparent;
Alternatively, use #fff.
You must edit the image in a paint program (like GIMP), add a transparency layer, remove the part you don't like with the eraser and save it as GIF or PNG.
Note that IE 6 doesn't handle PNG transparency without some tricks.
Going off what the above poster said, you can generally get around this without thinking about it by just using shorthand, ala:
div#example { background: transparent url("imgurl.png") no-repeat top left; }