Here is a screen grab and you can see a white line on top of icon as shown in red arrow?
I've checked on Illustrator and there is no white line? The icon size is 20x wide x 15px height.
The CSS3 code for the button:
.blue_small {
height: 40px;
width: 40px;
margin-left:16px;
margin-bottom:6px;
background-color:#003F5F;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 3px solid #fff;
-webkit-box-shadow: 0px 2px 6px rgba(64,80,85,0.8);
box-shadow: 0px 2px 6px rgba(64,80,85,0.8);}
UPDATED HTML5 of the section and I've included css/normalize.css but it doesn't make any difference:
<button class="blue_small"></button>
It is obviously a glitch that I don't know how to get rid of it?
SOLVED:
with background:url(../images/index_video_small2.svg) no-repeat left 5px top 7px;
(source: kerrydeaf.com)
Related
im trying to add a image that acts as a button and the image is a rounded square where the 4 corners are transparent. I add it to my webpage like this :
<input type="image"id = "LeftButton" src="graphics/leftarrow.png" >
and style it like this:
#LeftButton{
background-color: Transparent;
position:relative;
left:0px;
top:32.5px;
width: 45px;
box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
height: 45px;
}
I have coloured the background of the div its in red so you can see better in the image
thanks
the box shadow uses information from the box shape to generate the shadow in order to display as intended you will need to add a border-radius to your input
#LeftButton{
background-color: Transparent;
position:relative;
left:0px;
top:32.5px;
width: 45px;
box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
border: 0px solid #000000;
height: 45px;
}
<input type="image"id = "LeftButton" src="graphics/leftarrow.png" >
and style it like this:
I'd like a CSS div with an arched top and a square (or slightly rounded corners) bottom.
Here's my CSS:
#oval {
width: 200px;
height: 500px;
background: red;
border-radius: 80px/20px 5px;
}
I also tried 80px/20px 80px/20px 5px 5px with no luck, and a bunch of other combinations. I've been testing in Firefox.
Any help would rock!
You could try this:
border-radius: 80px 80px 5px 5px / 20px 20px 5px 5px;
Try building out each corner separately like this
.oval {
width: 200px;
height: 500px;
background: red;
border-top-left-radius:200px;
border-top-right-radius:200px;
border-bottom-right-radius:0;
border-bottom-left-radius:0;
//border-radius: 80px/20px 5px;
}
Okay, here's the rule: border-radius: 85% 85% 5px 5px / 15% 15% 5px 5px;
Apparently, you specify all the horizontal radii for four corners, then all the vertical radii
I'm trying to display an inset shadow on two elements and overlay them so they look like well with tab. Everything looks great except for one corner where I cannot figure out how to make it look smooth. (highlighted with yellow).
JsFiddle for test
this is my html:
<div class="container">
<div class="outerWell">
<div class="well" style="padding-top:15px">
text
</div>
</div>
<div class="well" style="margin-top:40px">
test
</div>
</div>
and then I have css that creates shadow and hides one side of shadow with overflow:hidden
(.well class is taken from bootstrap)
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
overflow:hidden;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: inset 0 0 5px 1px #888;
-webkit-box-shadow: inset 0 0 5px 1px #888;
box-shadow: inset 0 0 5px 1px #888;
}
.outerWell {
width: 200px;
overflow: hidden;
padding-bottom: 10px;
height: 35px;
margin-top: -40px;
position:absolute;
}
Is there an easy way to fix my issue, or maybe a better way to do what I'm trying to achieve?
You could probably pull this off with some creative use of pseudo elements. Have a look at this post on CSS-Tricks.
I am experiencing x-browser issues with the styling of a <hr> within a <span>. On FF the line is 2px high as expected and as declared in the CSS. However, when I look at it on Safari, Chrome or IE9 the line looks much thicker. Infact, when the <hr> is inspected with Safari's Firebug equivalent it sees it as 4px.
Is this an issue with the border-radius CSS attribute which is not apparent on Firefox? I want it to look like how I have built the markup and CSS and how it displays in Firefox, but i'm not sure what is wrong with the markup.
This is how it looks on Firefox:
This is how it looks on Safari (and IE9/Chrome):
My markup:
<span id="course_divider"><hr></span>
My CSS:
#course_divider {
left: 0;
padding-top: 40px;
position: absolute;
top: 27px;
width: 25px;
}
#course_divider hr {
background-color: #000000;
border: 1px solid black;
border-radius: 7px 7px 7px 7px;
height: 2px;
}
Remove the height from
#course_divider hr {
background-color: #000000;
border: 1px solid black;
border-radius: 7px 7px 7px 7px;
height: 2px;
}
you will get your solution :-)
demo http://jsfiddle.net/kMhEv/2/
It's simply an issue with your css in relation to the box model.
You have a height of 2px plus a border width of 1px.
So the box model is created with 1px at top/right/bottom/left.
So you 2px height plus 1px top+bottom for the border width = 4px height.
Remove the 2px height and it should be all good.
Your background color isn't required either.
#course_divider hr {
border: 1px solid black;
border-radius: 7px 7px 7px 7px;
}
Here is what i want to create using html5 and css if its possible:
Red object is the shape, everything else has to be transparent, so the background will be visible.
I guess that its doable with css masks or maybe round corners, but i couldnt make it work.
Edited: [suggested transparent background solution]
CSS:
.outer{
width: 240px;
background: rgba(0,0,0,0.0);
height:240px;
border-right: 120px solid red;
border-bottom: 30px solid red;
position: relative;
z-index:1;
}
.outer:after {
content: '';
width: 240px;
height:240px;
border-radius: 0px 0px 50px 0px;
-webkit-border-radius: 0px 0px 50px 0px;
-moz-border-radius: 0px 0px 50px 0px;
-o-border-radius: 0px 0px 50px 0px;
-khtml-border-radius: 0px 0px 50px 0px;
background: rgba(0,0,0,0.0);
position: absolute;
top: -30px;
left: -30px;
z-index:2;
border: 30px solid #ccc;
}
HTML
<div class="outer"></div>
A WORKING DEMO
Here is the working solution for this problem using css mask. Working example.
Click on Share or News on the lower left box to see it in action. Disable mask-image for #smallScaleHolder from element ispector to notice the difference.
Ok...here is the better explanation on this...
I made a mask like this...
And here is the css:
-webkit-mask-image: url(../img/sliders/mask.png);
-o-mask-image: url(../img/sliders/mask.png);
-moz-mask-image: url(../img/sliders/mask.png);
mask-image: url(../img/sliders/mask.png);
-webkit-mask-composite: copy;
overflow:hidden;
Now all its child elements are not visible outside of the black area.
Note: css masks are only supported in chrome , safari and ios.