I need to do a circle in HTML and a part of another circle that is located on this circle. Here is an example:
I need to do green and yellow areas. Without red area. Tell me please how should I do that. I could do green area with border-radius property and yellow area with clip-path property or there is a better way?
As far as I understand you want something like this.
Js fiddle
<div class="circle circle-green">
<div class="circle circle-red"></div>
</div>
.circle{
width:250px;
height:250px;
border-radius:50%;
}
.circle-green{
background:green;
overflow:hidden;
position:relative;
}
.circle-red{
background:red;
right:-60%;
position:absolute;
}
Related
I have an image which has and inner border with opacity set to .7 and round corners, which works great. The only problem is i need to add a hover state to image. I have tried :hover but nothing seems to work.
The border needs to go blue and with a png overlay.
HTML:
<div class="box" >
<div class="imgWrap">
<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/6/19/1371640593241/Morris-the-cat-009.jpg" alt="product1" >
</div>
</div>
CSS:
.box{
width:191px;
background:#FCFBDF;
margin: 0 auto;
}
img{
width:191px;
height:191px;
display:block;
border-radius:50%;
}
.imgWrap{
position:relative;
}
.imgWrap:after{
content:"";
position:absolute;
top:0; bottom:0; left:0; right:0;
opacity:0.5;
border: 10px solid rgba(248, 248, 255, 0.7);
border-radius:50%;
}
JS Fiddle here
http://jsfiddle.net/zangief007/52fFF/3/
I am guessing you tried to fire the hover state on the image like this :
img:hover{
.. your code ...
}
But as there is a pseudo element over it, you can never hover the image.
The workaround is to trigger the hover state on the pseudo element like this :
.imgWrap:hover:after{
border-color:blue;
background: url('PATH TO YOUR IMAGE');
}
DEMO
Add hover like this.
.imgWrap:hover{
width:250px;
}
PS : I am just adjusting the width based on hover. But you could do whatever you like in the hover.
Hope this helps.
Cheers!
EDIT : Assuming you don't need to modify the image with the cat, web-tiki's solutions seems better.
I think you may have to use some Javascript/Jquery, as long as you can't directly trigger a mouse hover on the image (because there is some element above).
Here is an example.
$(".imgWrap").hover(function(){
$('img').toggleClass("imgHover");
$('.imgWrap').toggleClass("imgHover");
$('.box').toggleClass("imgHover");
});
.imgHover{
width:300px;
height:300px;
}
try this in your JSFiddle. don't forget to add Jquery lib
http://jsfiddle.net/52fFF/11/
As example i just changed the size of the Box, the Circle and the image.
I was asked to code an unusual shape background color on some centered text.
The text should be centered and it's background color should continue all the way right of the parent element.
Here is the desired output :
I have never seen anything like this so I don't even know where to start. Thank you for your help!
You can use a pseudo element to make the black background continue on the right :
DEMO
HTML :
<div>
<span>Some text with</span><br/>
<span>unusual background</span><br/>
<span>color</span>
</div>
CSS :
div{
float:right;
padding-right:150px;
text-align:center;
position:relative;
}
span{
display:inline-block;
background:#000;
color:#fff;
line-height:1.4em;
margin:0;
}
span:after{
content:'';
position:absolute;
width:200px;
height:1.4em;
right:0;
background:inherit;
z-index:-1;
}
I don't understand well your problem, but try to mix these concepts:
HTML:
<div id="parent">
<p id="son">Some text with unusual background color</p>
</div>
JS:
<script type="text/javascript">
document.getElementsById("parent").style.background="red";
document.getElementsById("son").style.background="blue";
</script>
try to change the son and the parent colors.
I'm trying to make a custom splitter which is a <div> between page1 and page2, but some weird lines is showing which I don't know where they came from, or how to hide them!
spiltter.png
pattern1.png
Snippedshot
.zikzak, .splitter, .split-content
{
float:left;
width:100%;
}
.splitter
{
height:250px;
}
.split-content
{
margin-top:-50px;
height:250px;
background:url(img/pattern1.png) repeat;
}
.zikzak
{
position:relative;
height:50px;
}
HTML:
<div class="splitter">
<div class="zikzak" style="background:url(img/spiltter.png) repeat-x"></div>
<div class="split-content"></div>
<div class="zikzak" style="background:url(img/spiltter2.png) repeat-x"></div>
</div>
Problem with you image called spiltter.png As the image edges are transparent not solid, that's why you are getting strange behavior.
To solve this bug you have to filled image edges with solid color.
I cannot get this link to be clickable for the life of me. When I take it outside of the 'lb' div it functions. I've applied z-index values and it doesn't change anything. I'm about to rip my hair out. Some help, please.
<div id="lb">
<div id="cntct">
<div id="map">
This is a link
</div>
</div>
</div>
CSS
#lb
{
position:relative;
top:-50px;
z-index:-20;
background-image:url(../src/images/Lbkg.jpg);
background-repeat:no-repeat;
height:650px;
overflow:auto;
}
#cntct
{
position:relative;
top:70px;
background-image: url(../src/images/cntct.png);
background-repeat:no-repeat;
background-position:center;
height:400px;
width:1000px;
margin:auto;
z-index:-10;
}
#map
{
position:relative;
top:45px;
left:50px;
width:600px;
height:400;
z-index:5;
}
try taking the top style off it - hard to tell with only the code you have posted, but it may be pushing it out of the div, meaning that something else (that is transparent) is overlaying it, and intercepting the click.
If you're using firefox/chrome/etc, you can try to right-click on the link, and inspect element (or similar command) - should open the DOM browser with the element you clicked on selected. If the link isn't selected in the DOM (ie some other element is selected) then that element is on top of the link, intercepting clicks...
Please try it:
Remove z-index property for #lb and #cntct.
Here is my HTML:
<div id="leftMenuWrapper">
<div id="ramps" class="leftMenuHeaderButton"></div>
<div id="carServiceRamps" class="leftMenuSubButton"></div> <div class="clear"></div>
<div id="67RaceRampsXT" class="leftMenuProductButton"></div>
</div>
Here is my CSS:
#leftMenuWrapper{
background:url(../images/main_elements/leftMenu_BG.jpg) repeat-y;
border:#777777 thin solid;
width:160px;
margin-left:-19px;
position:absolute;
padding-bottom:5px;
}
.leftMenuHeaderButton{
width:175px;
height:35px;
position:relative;
top:-16px;
left:-11px;
}
#ramps{
background:url(../images/main_elements/leftMenu/Ramps.png) no-repeat;
}
.leftMenuSubButton{
width:169px;
height:21px;
position:relative;
float:right;
left:1px;
}
#carServiceRamps{
background:url(../images/main_elements/leftMenu/car-service-ramps.png) no-repeat;
}
.leftMenuProductButton{
width:160px;
height:20px;
clear:both
}
#67RaceRampsXT{
background:url(../images/main_elements/leftMenu/67-Race-Ramp-XTs.jpg) no-repeat;
width:160px;
height:20px;
}
.clear{clear:both}
Everything works, except <div id="67RaceRampsXT" class="leftMenuProductButton"></div> won't display it's BG image (it won't even display a BG color). The element is there, because if I adjust the sizes, it adjusts accordingly, but it won't display images in FF or Chrome.
I can put an <IMG> in it no problem, and I can even assign a BG to .leftMenuProductButton but not to #67RaceRampsXT
I don't think ids can start with number. Try to change your id to something like RaceRamps67XT and test it that way - in both HTML and CSS and see what it does.
Pretty sure only class identifiers can start with a number. For IDs you want [A-Za-z_]. Try changing your ID to #sixtySevenRaceRampsXT. Check out this question on valid IDs for more information:
What are valid values for the id attribute in HTML?