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:
Related
I have the following code in my CSS and HTML files:
.test {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 60px 0px white, inset 200px 0px blue;
}
<div class="test"></div>
The shape this code produces is exactly what I want; however, I do not want the blue outline around the white part - is there anyway I can remove that?
To further clarify: here is what the shape currently looks like on a white background, and here is how I would like it to look like.
All help is greatly appreciated!
Perhaps a trick, to overlay a 2px white border over it is acceptable.
.test {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 60px 0px 0px 0 white, inset 200px 0px 5px blue;
position:relative;
}
.test:before{
content:'';
position:absolute;
border-radius:50%;
border:2px solid white;
z-index:1;
top:-1px;
right:-1px;
bottom:-1px;
left:-1px;
pointer-events:none;
}
<div class="test"></div>
Tell us what you want to achieve so we can know how to help you achieve it.
This little change made the blue outline go away and left you circle looking like eclipse
.test {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 60px 0px white, inset 10px 0px blue;
}
I would like to create a well area on my page that makes the area look like it is a little bit below the page by a few pixels. My page currently has a white background and a #F5F5F5 well area.
I looked at the well for twitter bootstrap:
http://getbootstrap.com/components/#wells
For me at least this does not look like well at all. Maybe it is because I know the focus of the later version is to create a flat effect.
Does anyone have any examples of how I could add a working well effect?
You can simply inspect bootstrap well example and copy ".well" rule set
Demo:
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
<div class="well">
Some Text
</div>
Using a combination of box shadows, and a sensible colour choice, you can make things look like wells quite easily:
Demo:
div {
height: 100px;
width: 200px;
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
box-shadow: inset 0 0 10px black, 0 0 10px black;
padding: 10px;
display: inline-block;
margin: 15px;
vertical-align: top;
text-align: center;
}
html,
body {
background: gray;
}
.second {
box-shadow: inset 1px 1px 10px black, 0 0 30px black;
}
.third {
box-shadow: inset 0px 0px 10px black, 0 0 20px black;
}
.forth {
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 0 30px black;
}
<div>this is deep</div>
<div class="second">I'm slightly different. But still look deep</div>
<div class="third">Don't fall down me!</div>
<div class="forth">Do you, like, wells?</div>
change the boxshadow of the bootstrap well to:
box-shadow: inset 2px 2px 1px rgba(0,0,0,.05);
see example here: http://jsfiddle.net/swm53ran/199/
the first two inset parameters are the shadow on the sides and then top and bottom
Well I want to place a caption on the border of my images for a image gallery I am developing.
Basically my images use borders and margins to create a effect around them to make them look like Polaroid photos. I would like to place a caption on top of the border. here is my css.
.column img {
position:relative;
display:inline-block;
width:130px;
height:100px;
margin: auto;
padding:10px;
background:#fff;
box-shadow:0 0 5px rgba(0,0,0,.35);
-webkit-box-shadow: 1px 3px 3px rgba(0,0,0,.8);
-moz-box-shadow: 1px 3px 3px rgba(0,0,0,.8);
box-shadow: 1px 3px 3px rgba(0,0,0,.8);
border: 1px solid #fff;
padding: 5px 5px 35px 5px;
}
.column div {
max-width: 100%;
max-height: 100%;
float: left;
margin: 0 15px 5px 0;
margin-left: 5px;
border-radius: 2px;
overflow:hidden;
}
The border works fine and looks fine but the caption does not display on top of the border any help would greatly be appreciated.
Try using the <fieldset> and <legend> tags to draw a captioned box around the images.
<fieldset>
<legend>Caption Here</legend>
<!-- Image here -->
</fieldset>
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.
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)