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.
Related
This question already has answers here:
Make CSS3 triangle with linear gradient
(5 answers)
Closed 1 year ago.
I am trying to create a website but am having a little trouble adding a gradient into triangle shape I have created in css.
Here is what I am trying to go for:
Figma Prototype
However here is what I have right now
Actual Website
.triangle-tl {
width: 0;
height: 0;
border-top: 1000px solid black;
border-right: 2000px solid transparent;
}
<div class="triangle-tl"></div>
What Can I do to add a gradient into this triangle?
You can use the clip-path CSS property to do that.
to get a basic understanding click here.
And if you want to go for a specific clip-path design (geometry).
yu can easily make it with This.
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;
}
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
This question already has answers here:
Is it possible to have two background colors for a single html element? [duplicate]
(3 answers)
Closed 4 years ago.
my name is Gasper and I came across this site when looking on how to make a colour box split (2 colours in 1 box). I must say, I have 0 knowledge on how to program with html codes, so if anyone could help me I would be very happy.
And yes, I have no idea how to use this site as well, sorry. Actually, I have no idea if this is CSS or HTML, I don't even know the difference between them.
As you could probably figure out, I am a complete rookie.
So my question is:
.collapse-block
.options-swatch--color .color-brown{
background-color: #663300;
}
How can I add 2 different colours in this code that I don't know and is it even possible?
Thank you for your help, and if I wasn't clear enough in what I want, please comment and I will respond (if that is even how this site works).
If you want two colours in the element, one on the top and another on the bottom, just use a CSS linear gradient that runs vertically:
div {
width: 100px;
height: 100px;
background-image: linear-gradient(0deg, red 50%, blue 50%);
}
<div></div>
Here's a quick run-through for the CSS linear-gradient code: linear-gradient(0deg, red 50%, blue 50%);
0deg runs from bottom to top of element
red 50% and blue 50% are color stops. It basically means "from 0–50%, use red, and from 50%-100%, use blue). You can of course use a more verbose red 0%, red 50%, blue 50%, blue 100%, but when the start and end color stops are not specified the browser simply uses the same color as the next nearest color stop.
There you go, this should work
/* CSS */
#box {
width: 50px;
height: 50px;
background: linear-gradient(to bottom, red 50%, blue 50%);
}
<!-- HTML -->
<div id="box"></div>
Codepen demo
Try checking out some YouTube tutorials. Search HTML Crash Course For Absolute Beginners.
This is both HTML and CSS.
To not get you confused too much. HTML is the structure, so in this example the divs you see here. And CSS is styling it, like making a text the color red, or making the text big etc.
.box1{
width:500px;
height:500px;
background:#663300;
}
.inside{
width:500px;
height:250px;
background:brown;
}
<div class="box1">
<div class="inside"></div>
</div>
This question already has answers here:
How to change text transparency in HTML/CSS?
(10 answers)
Closed 7 years ago.
I'm making a portfolio and I'd like to know how to set a div property that makes the div's TEXT transparent and background and such opaque.
Use rgba and set the opacity to 0 (the last value).
color:rgba(0, 0, 0, 0);
See here
UPDATE
Now that you have clarified your question... SVG would be your best bet. See fill-opacity
Try the red,green,blue,alpha value for the color
div{
width: 50%;
height: 50%;
background: green;
}
p{
font-size: 30px;
font-weight: bolder;
color: rgba(0,0,0,.1);
}
<div>
<p> your text </p>
</div>