This question already has answers here:
How to modify the fill color of an SVG image when being served as background image?
(24 answers)
Closed 4 years ago.
Currently I create buttons with icons by using the button's background, like in my example (this is probably the reason for my problem).
I would like to know if it is possible to change the colour of the icon from the CSS? Because at the moment we have to save the same icon multiple times for different colors (black, white, colored versions etc.)
If this is not possible and I have to use , could someone please show me an example of making an svg type button and how to then change it's color.
.btn-icon {
border: 1px solid black;
height: 40px;
width: 40px;
padding: 0px;
background: url("https://image.flaticon.com/icons/svg/1034/1034153.svg");
background-size: cover;
}
<button class="btn-icon"></button>
For Adel's answer in this question Modify SVG fill color when being served as Background-Image
This seem to be an amazing solution for me:
.icon {
background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
}
I think you should used
background-color: yellow;
In CSS
Related
This question already has answers here:
Is it possible to have two background colors for a single html element? [duplicate]
(3 answers)
Closed 2 years ago.
i have a div as follows
https://prnt.sc/w84dzj
div.button.fill {
color: #FFFFFF;
background-color: #ffcc00;
}
I'd like to color, not the whole, but only half the circle in a given color, and the other half in another color (maybe by using two classes called leftHalf and rightHalf).
the code i am trying is, if the leftside half is white, the inside image should be half blue so the user should know that they have completed half profile and when they are done with profile, it will display just like the above image
You can do that by using background-image: linear-gradient(...) like this.
div {
color: #FFFFFF;
background-image: linear-gradient(90deg,red 50%,yellow 50%);
height: 100px;
width: 100px;
border-radius: 50px;
}
<div></div>
Also if you don't set a presentage after
each color they will have a smooth transition.
You can also add in as many colors as you want.
This question already has answers here:
Is it possible to apply CSS to half of a character?
(20 answers)
Closed 3 years ago.
CSS stroke allows to outline a font.
I want to outline only 50% of a font.
I've seen a few workaround with JavaSCript to set css on half a letter, but i would like to this with CSS.
My goal is to able to add class to the the right star web font to look like the left full star. The image is 2 diffrent icons, I want to able to create the "half" look on the star with CSS stroke effect on the web font of the icon.
This is codepen that has a one icon without the stroke CSS effect, one with CSS stroke. How can I set in the css the so the stroke effect will create half icon "full" and other half "empty"?
.empty {
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
I doubt this is possible in pure CSS, but if you can add some tags then it's straightforward to do by having two icons on top of each other, and clipping one with overflow: hidden.
HTML:
<span class="half-thumb">
<span class="mdi mdi-thumb-up"></span>
<span class="mdi mdi-thumb-up empty"></span>
</span>
CSS:
.half-thumb {
position: relative;
}
.half-thumb :first-child {
width: 50%;
overflow: hidden;
position: absolute;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm still newbie in html. How can I achieve this with style:
rounded border 1px color grey
icon on the left with peach background
input text on the right
The only way to achieve that as Crossbrowser solution is to use background-image with background-position and background-size
input[type=text]{
background-image: url(http://i.imgur.com/EitD5gR.png);
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: left top;
border-radius: 6px;/*rounded border */
border: 1px solid grey;
padding-left: 16px
}
<input type=text />
in a near future you will be able to do that using :pseudo-element
Its better If you can provide some code but since you are a beginner hope this code helps you
<div id = 'outer'>
<div id = 'inner'>
img
</div>
</div>
CSS
#outer{
width:200px;
height:50px;
border: 2px solid gray;
position:absolute;
border-radius:10px;
}
#inner{
position:relative;
width: 20%;
height:100%;
background-color: yellow;
border-radius:2px;
z-index:-30;
}
Cick for fiddle Fiddle
Here's the basic idea:
The rounded border you'll get with the CSS property border-radius. You'll need to look this up, because not all browsers respect plain ol' border-radius - you'll end up with several css rules (e.g. border-radius:...; -webkit-border-radius:...). The border color you'll get with the css property border-color. http://www.w3schools.com/cssref/pr_border.asp (and the links in the left sidebar) is a good resource to learn about styling borders
The image inside the input is going to be kinda complicated for a newbie. There are a couple ways you could do this… I recommend using a :before "pseudoelement." You'll set the <input> (or whatever the main element you're styling here is) to let elements inside it position themselves relative to it, and then you'll set the pseudoelement to be absolutely positioned all the way on the left. The pseudoelement then gets a specific size, and you put an image into it.
Without doing too much of the work for you, the CSS will be something like
input {
border-radius: ...;
border-color: ...;
position: relative; <-- lets us position child elements relative to this one
}
input:before {
content: url(path/to/the/image);
position: absolute;
left: 0;
width: 30px; <-- I'm just guestimating that number
height: 100%; <--- depending on the rest of your css, this might need to be set in pixels
}
Other problems you might run into:
You might lose the rounded corners on the left. If so, you can round only those corners on the input:before (a tool like http://border-radius.com/ will help you round only certain corners)
If you're using an <input>, it might look wrong in some browsers. That's because browsers supply default styles for inputs. This gets into fancier stuff, so I'll give you the solution up front and you can study up to figure out what it does
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
border-repeat: repeat;
}
I am currently having an issue with background color and background images. The project i am working on must use both a color and a background image. For example the image will fill up half of a div and the color will fill up the other half.
Now normally to do this i would use the following piece of CSS:
background: blue url('img.png) right no-repeat;
and this works perfectly but on this project in particular the user can set the background image themselves using a CMS system. So to apply the background images i am using an inline style on each of the divs then the div has its own color in an external stylesheet like so.
stylesheet.css
.bg-color {
background: blue;
}
index.html
<div class="bg-color" style="background:url('img.png') right no-repeat;">
</div>
Now when doing this the background image overrides everything, is there a way for me to achieve the results i am looking for dynamically?
Thanks
the default value of the background shorthand you have on style= is transparent and that is overwriting the color you give in the class bg-color. try:
.bg-color {
background-color: blue !important;
}
In your CSS try using:
.bg-color {
background-color: blue;
}
instead of only background: blue;.
Here is a solution
You may use shorthand notation to incorporate both backgrounds.
<div style="background: url(http://scienceblogs.com/gregladen/files/2012/12/Beautifull-cat-cats-14749885-1600-1200.jpg) no-repeat, green;
background-size: 50%;"></div>
This question already has answers here:
Having an icon beside text in a button
(5 answers)
Closed 9 years ago.
<style>
span.icon {
background: url(lock.png) no-repeat;
float: left;
width: 40px;
height: 40px;
}
</style>
<input type="submit" id="submit" value="Log Me In"/><span class="icon">
So the icon won't show. I've got the icon but it's not working. I tried to add quotes to the file name but still no luck.
Since the icon is an image file and not a font, you can't change its color with CSS. You can, however, swap out the image for a properly colored version.
input{
background:green url("http://placehold.it/50/ffffff") 10px center no-repeat;
}
input:hover{
background-image: url("http://placehold.it/50/000000");
}
http://jsfiddle.net/daCrosby/tvNCa/2/
You may also want to look into CSS Sprites for things like this.
You would use an image editing program to make a button like that yourself or to decolor that image. To make it black you can desaturate it (or turn it into a black and white document) and change the levels to make it darker. It would probably still be best to make a new button on your own, though. There are many good looking button tutorials for gimp, photoshop, paint.net or other programs that you can find through google.
I made it black using microsoft paint lol.
http://i.imgur.com/o0caKSB.png