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;
}
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:
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
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;
}
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
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Draw Circle using css alone
I would like to know if there is any way to change the shape of the submit button from rectangle to circular shape??
I dont want to use an circular shapped image solution. I want the all other characteristics of the button as from the css style.
Use border-radius property.
Example:
.button {
width: 100px;
height: 100px;
background-color: #000;
border: solid 1px #000;
border-radius: 50%
}
The above example will give you a regular circle.
If you want just a little rounded shape, try this:
.button {
width: 100px;
height: 30px;
background-color: #000;
border: solid 1px #000;
border-radius: 5px
}
Live demo: Regular circle
Live demo: Rounded shape
Live demo: Input button with text
Your question is already answered but I recommend you Twitter Bootstrap.
It is a HTML/CSS framework which allows you make great buttons (among others) easily.
This buttons are "crossbrowser" which means they are compatible with Internet Explorer.
With only one class - btn - you can stylize a <button>, <input type="button"> or <a>.
This :
<button class="btn"></button>
Gives that:
You also can customize your button quickly with an optional class :
btn-primary, btn-info, btn-success, btn-warning, btn-danger and btn-inverse.
This classes transform your button like that :
Then you can choose a size with the classes btn-large, btn-small and btn-mini.
Finally, you can add an icon (the list is here) in your button.
This:
<button class="btn btn-success">
<i class="icon-shopping-cart icon-white"></i>
<span>Checkout</span>
</button>
Gives that:
Have fun with your new buttons. :)
Use CSS border radius. I would recommend googling 'CSS button generator' or such and finding any number of button generating tools that you can play around with to get the css right. You would just need to make sure the element's height=width and then adjust the corner radii accordingly.
Use this style:
input[type='submit'] {
width:100px;
height:100px;
border-radius:50px;
}
You can use border-radius in your CSS but it won't be supported in IE.
Play around with:-
border-radius: 10px 10px 10px 10px
I would suggest to either use the Jquery UI (you can make you own theme)
http://jqueryui.com/themeroller/
or
CSS3
http://webdesignerwall.com/tutorials/css3-gradient-buttons
CSS3 will not work in IE.