I try to fill the exact background of a round glyphicon:
so that this one
looks like that one
only with css and i want the border to be any color, my attempts with outline did not succeed. border shadow cant be an option because of the inflexible color.
please also declare the browser supported by your solution.
Here the fiddle to start:
http://jsfiddle.net/aQrPd/145/
.custom {
margin-left:10px;
background-color:white;
border-radius: 50%;
padding: 4px 3px 0 3px;
border: 3px #ccc solid;
}
.c2 {
background:black;
}
You could use box-shadow.
Browser Support for box-shadow
div {
width: 30px;
height: 30px;
background: black;
margin: 20px;
border-radius: 50%;
box-shadow: 0 0 0 5px white,
0 0 0 10px #CBCBCB;
}
<div></div>
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
.custom {
margin-left: 10px;
background-color: white;
border-radius: 50%;
padding: 4px 3px 0 3px;
border: 3px #ccc solid;
}
.custom:before {
content: '';
display: inline-block;
border-radius: 100%;
background: #000;
height: 14px;
width: 14px;
}
<br />
<br />
<span class="custom glyphicon glyphicon-ok-circle"></span>
<br />
<br />
<img src="http://fs2.directupload.net/images/150101/gxdavpdq.png" />
Related
I am trying to apply a white border to the left side only of an ellipse and keep the other sides as transparent.However, the border is not getting applied to the whole portion of left side.What changes are required to get the expected output shown?
#ellipsis {
background-color: #3ebede;
height: 25px;
color: #000;
position: relative;
padding: 4px 15px 4px 30px;
width: 200px;
border-radius: 20px;
margin: -4px -25px -4px -4px;
text-align: left;
display: inline-block;
border: solid;
border-color: transparent transparent transparent white
}
<body>
<button id="ellipsis"></button>
<button id="ellipsis"></button>
<button id="ellipsis"></button>
</body>
Link to my code:
https://jsbin.com/bebekirano/edit?html,output
Expected output
consider box-shadow instead:
.ellipsis {
background-color: #3ebede;
height: 25px;
color: #000;
position: relative;
padding: 4px 15px 4px 30px;
width: 200px;
border-radius: 20px;
margin: -4px -25px -4px -4px;
text-align: left;
display: inline-block;
box-shadow:-2px 0 0 2px #fff;
border:none;
}
<body>
<button class="ellipsis"></button>
<button class="ellipsis"></button>
<button class="ellipsis"></button>
</body>
In case you want transparency, here is a trick with radial-gradient:
.ellipsis {
background-color: #3ebede;
height: 25px;
color: #000;
position: relative;
padding: 4px 15px 4px 30px;
width: 200px;
border-radius: 20px;
margin: -4px -25px -4px -4px;
text-align: left;
display: inline-block;
border:none;
}
.ellipsis:not(:last-child) {
background:radial-gradient(4px 3px at right,transparent 30px,#3ebede 31px);
}
body {
background:#ddd;
}
<div>
<button class="ellipsis"></button>
<button class="ellipsis"></button>
<button class="ellipsis"></button>
</div>
I do have very simple ui.xml with HTML5 input element. When I add stylename to this element, it doesn't affect to anything? How can I do that, or do I missed something? stylename="{style.input3}" is working on TextBox, but it doesn't on range.
What I would like to do actually, I'm trying to add tooltip, change color of thumb, etc...
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:with field="res"
type="com.ali.slider.client.resources.AllResources" />
<ui:with field="img" type="com.ali.slider.client.resources.AllImages" />
<ui:style>
.panel {
margin: 5px;
}
.input[type='range'] {
-webkit-appearance: none;
border-radius: 5px;
box-shadow: inset 0 0 5px #333;
background-color: #999;
height: 10px;
vertical-align: middle;
}
.input[type='range']::-moz-range-track {
-moz-appearance: none;
border-radius: 5px;
box-shadow: inset 0 0 5px #333;
background-color: #999;
height: 10px;
}
.input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 20px;
background-color: #FFF;
box-shadow: inset 0 0 10px rgba(000, 000, 000, 0.5);
border: 1px solid #999;
height: 50px;
width: 20px;
}
.input[type='range']::-moz-range-thumb {
-moz-appearance: none;
border-radius: 20px;
background-color: #FFF;
box-shadow: inset 0 0 10px rgba(000, 000, 000, 0.5);
border: 1px solid #999;
height: 50px;
width: 20px;
}
.input3 {
-moz-appearance: none;
border-radius: 20px;
background: #d0e4f6;
background-color: #999;
box-shadow: inset 0 0 10px rgba(002, 002, 000, 2.5);
border: 1px solid #999;
height: 20px;
width: 100px;
}
</ui:style>
<g:HTMLPanel styleName="{res.sliderBarStyle.sliderContainer}">
<div>
<input ui:field="hSlider" type="range" min="10" max="100"
value="20" step="10" name="slider" styleName="{style.input3}"></input>
<g:TextBox ui:field="sliderTextBox" value="0" styleName="{style.input3}"></g:TextBox>
</div>
</g:HTMLPanel>
</ui:UiBinder>
HTML (non-widget) elements are just like in (X)HTML, so just use class="{style.input3}"
I'm looking for a CSS approach to make one div's side oblique, but with border radius at the top. for example
solution with transform skew doesnt work, because I need correct border-radius.
thanks in advance!
How about this? I made the two parts of the tab different colors, so you can see their outline.
.tab {
display: inline-block;
border: 1px solid black;
}
.tab .left {
background-color: pink;
border: solid red;
border-width: 3px 0 0 3px;
border-radius: 10px 0 0 0;
height: 20px;
padding: 0 10px;
float: left;
}
.tab .right {
background-color: #8080FF;
border: solid blue;
border-width: 3px 3px 0 0;
width: 20px;
height: 20px;
border-radius: 0 10px 0 0;
float: left;
transform: skew(30deg);
transform-origin: 0 100%;
}
<div class="tab">
<div class="left">TextTexT</div>
<div class="right"></div>
</div>
demo - http://jsfiddle.net/bu4aps5a/
use pseudo element :after
div {
width: 100px;
height: 40px;
border: 1px solid grey;
border-right: 1px solid transparent;
border-top-left-radius: 5px;
border-top-right-radius: 6px;
position: relative;
background: rgb(219, 219, 219);
text-align: center;
line-height: 40px;
}
div:after {
content: '';
width: 20px;
height: 100%;
position: absolute;
transform: skewX(25deg);
border: 1px solid grey;
border-left: 1px solid transparent;
top: -1px;
right: -11px;
border-top-right-radius: 6px;
background: rgb(219, 219, 219);
}
<div>test</div>
Here is a svg solution without any CSS:
<svg width="95" height="46">
<path d="M1,9 Q1,1 9,1 L70,1 Q76,0 80,9 L95,45 L1,45z" fill="#EEEEEE" stroke="#818185" stroke-width="1" />
<text x="25" y="29" font-size="18" font-weight="500" fill="#414145">Hits</text>
</svg>
I'm banging my head against the wall trying to understand why my image is not moving into the div that I'm specifying, but rather straddles the lower border. I don't see any styling conflicts in looking over the elements with Firebug. I'll also throw out that my CSS position skills are not anywhere near where I would like them.
I want to place the image to the left of the text. So what am I doing wrong?
My html:
...
<div id="container">
<div class="header">
<h1 id="mgtitle">Pierce County, Washington<br/>
Master Gardener Foundation</h1>
<img src="images/flower-1.jpg" height="75" id="hdr-img" />
</div>
<div class="mainbody">
<div id="menu">
<ul> ...
My CSS:
#container {
width: 900px;
// max-height: 750px;
margin: 10px auto;
border: 1px solid #fff;
background-color: #ffffff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.header {
height: 130px;
border: 1px solid black;;
background-color: #ffffff;
background-image: url("http://www.pc-wa-mg-conf.org/images/Flower-Backgrounds-8- scaled.jpg");
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align:center;
}
#hdr-img {
position: relative;
display: block;
margin-top: 0%;
margin-left: 0;
/* margin-right: auto; */
/*z-index: 1;*/
}
#mgtitle {
font-family: 'Great Vibes', cursive;
font-size: 2.5em;
}
First, you need to move the image above the <h1> in the code in order to place it on the left:
<div class="header">
<img src="images/flower-1.jpg" height="75" id="hdr-img" />
<h1 id="mgtitle">Pierce County, Washington<br/>
Master Gardener Foundation</h1>
</div>
Then, change display: block of #hdr-img to display: inline-block.
Finally, add display: inline-block to a new h1 CSS class:
h1 {
display: inline-block;
}
Fiddle: http://jsfiddle.net/hxX6u/1/
You need to change the image to display:inline-block because if it is display:block it will be pushed onto its own line. Also, you need to put the image inside the <h1> tag, since the <h1> is set to display:block otherwise it will push the image to its own line. After those changes, the only problem is the height you have set on the header. You can shrink the contents and make them fit in the header, by changing the line-height or shrinking the image, etc. I took the height off of the header to allow it to adjust according to the height of its contents.
CSS:
#container {
width: 900px;
// max-height: 750px;
margin: 10px auto;
border: 1px solid #fff;
background-color: #ffffff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.header {
border: 1px solid black;;
background-color: #ffffff;
background-image: url("http://www.pc-wa-mg-conf.org/images/Flower-Backgrounds-8- scaled.jpg");
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align:center;
}
#hdr-img {
position: relative;
display: inline-block;
margin-top: 0%;
margin-left: 0;
/* margin-right: auto; */
/*z-index: 1;*/
}
#mgtitle {
font-family: 'Great Vibes', cursive;
font-size: 2.5em;
}
http://jsfiddle.net/NABjE/
I have got problem with positioning 2 divs inside a div. I want to have 2 divs next to each other but I dont know how. Here is my html
<div id="game">
<div id="choice" onmouseover="npcRoll()">
<p>Chosse your weapon!</p>
<button id="rock" onClick="choose(1)">Rock</button>
<button id="paper" onClick="choose(2)">Paper</button>
<button id="scissors" onClick="choose(3)">Scissors</button>
<p>You chose <span id="userChoice">none</span>!</p>
</div>
<div id="confirm">
</div>
</div>
And this is my CSS:
#choice {
border: 2px solid #87231C;
border-radius: 12px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
background-color: #FF5A51;
width: 350px;
}
#game {
border: 2px solid #fff;
border-radius: 15px;
background-color: white;
width: 500px;
margin: 0 auto;
}
#confirm {
border: 2px solid #00008B;
border-radius: 12px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #1E90FF;
width: 142px;
height: 100px;
}
body {
background-color: #DFEFF0;
text-align: center;
}
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
padding-top: 36px;
}
button:active {
font-size: 22px;
border: 2px solid #328505;
color: #32A505;
border-radius: 100px;
width: 100px;
height: 100px;
padding-top: 36px;
}
You can check it out here how it looks. http://jsfiddle.net/VcU7J/
Thank you for any help!
EDIT: I also tried to add float elements into to the CSS but it screwed it more. :/
There are several ways to do this. The most traditional being to use CSS' float property your two divs:
CSS
#choice {
border: 2px solid #87231C;
border-radius: 12px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
background-color: #FF5A51;
width: 350px;
float:left;
}
#game {
border: 2px solid #fff;
border-radius: 15px;
background-color: white;
width: 500px;
margin: 0 auto;
/* this is needed to make sure your container background
"contains" your floated divs */
overflow:auto;
}
#confirm {
border: 2px solid #00008B;
border-radius: 12px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #1E90FF;
width: 142px;
height: 100px;
float:left
}
fiddle
More on floats here
Use css floats to position divs next to each other, but do not forget to clear the floats after your done.
#game {
float:left;
}
#confirm {
float: right;
}
.clear {
clear: both;
}
and then the html would look like:
<div id="game">
<div id="choice" onmouseover="npcRoll()">
<p>Chosse your weapon!</p>
<button id="rock" onClick="choose(1)">Rock</button>
<button id="paper" onClick="choose(2)">Paper</button>
<button id="scissors" onClick="choose(3)">Scissors</button>
<p>You chose <span id="userChoice">none</span>!</p>
</div>
<div id="confirm">
</div>
<div class="clear"></div>
</div>