I want to create a colored thick border with rounded corners around an image.It would look like this:
How do I do this using HTML and CSS?
You can use this, it will definitely work as you requested.
img {
border: 13px solid blue;
border-radius: 10px;
}
How to do this in CSS and HTML:
CSS:
.ImageBorder
{
border-width: 5px;
border-color: Blue;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
HTML:
<img src="MyImage.gif" class="ImageBorder" />
you can put img inside a wrapper div and then give a border-radius value to make a rounded border. by this technique image will also appear as a rounded.
.image-wrap {
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
}
.image-wrap:after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 3px #1b1b1b;
-wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.image-wrap img {
vertical-align: bottom;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
Here is the working Demo. http://jsbin.com/jicikalo/1/edit
Something like the following...
img {
border:2px solid black;
border-radius:10px;
}
Modify it to what looks best for you.
Related
Is it possible to add an even shadow to a div that is not a regular rectangle? Adding box-shadow doesn't work the way it works with a normal div. This is the div I'm talking about:
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
yes you can. Here is the example:
.circle {
width:150px;
height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
<div class="circle">
</div>
I was trying to add a CSS style in my Coppermine Gallery but It doesn't work. Here's the code I want to apply to the gallery thumbnails.
.image-wrap {
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
}
.image-wrap:after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 1px #1b1b1b;
-wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.image-wrap img {
vertical-align: bottom;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
The pseudo-classes for image links are a little bit weird to apply the image-wrap:after stylesheet and I went a little bit messy trying to figure out how to apply it. Here's the code I ended up writing for a:link .image{
/* pseudo-classes for image links */
a:link .image{
vertical-align: bottom;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
a:after .image{
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 1px #1b1b1b;
-wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
Here's my gallery. How can I do to make the CSS style work? THANK YOU SO MUCH! I love coding but sometimes it turns a little bit hard.
I'll gladly help, but i don't understand what you're trying to do here. Can we have an image of the result you want to get ?
Anyway, some general advices :
you don't need prefixes on border-radius and box-shadow anymore
you don't need to specify :link on a link tag.
consider using "top: 0; bottom: 0; left: 0; right: 0;" rather than width and height 100%.
Edit: Okay, now with your picture i understand.
So, the problem is here :
a:after .image {...}
Doing so, you don't target the :after pseudo-element, but a .image element wich would be child of it. So it's nonsense. What you should do is add a class on the link itself (if possible) or target it more precisely using selectors, and just work on this :after pseudo-element.
I'll make you an example if this isn't enough to help you. :)
Edit: Okay, i made an example anyway: http://jsfiddle.net/Manumanu/gon7kooa/
And if you wish to use it with hover: http://jsfiddle.net/Manumanu/gon7kooa/2/
I am trying to make a custom button with a border radius and box shadow. Here is my html and css
.selectOptionButton{
display: block;
-webkit-box-shadow: inset 1px 1px 15px 2px #e7e6e0;
-moz-box-shadow: inset 1px 1px 15px 2px #e7e6e0;
box-shadow: inset 1px 1px 15px 2px #e7e6e0;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
height: 50px;
width: 100px;
background-color: #e7e6e0;
}
<div class="selectOptionButton text-center">Test</div>
For some reason when i inspect the element i see this :
.selectOptionButton {
background-color: #E7E6E0;
border-radius: 100px 100px 100px 100px;
display: block;
height: 50px;
width: 100px;
}
it's an inset color that is the same as the background color
check out this Fiddle with
-webkit-box-shadow: inset 0px 0px 15px 2px #333aaa;
-moz-box-shadow: inset 0px 0px 15px 2px #333aaa;
box-shadow: inset 0px 0px 15px 2px #333aaa;
My problem is that for the div classes form-profile and form-profile-side, if I want 2 of those divs, they must be on the same line within the HTML:
<div class="span13">
<form class="form-profile-side"></form><form class="form-profile"></form>
</div>
if I put the second class on a new line, it messes up the layout (this is what I'm trying to do):
<div class="span13">
<form class="form-profile-side"></form>
<form class="form-profile"></form>
</div>
CSS:
.form-profile-side {
display: inline-block;
vertical-align: top;
width: 120px;
background-color: #fff;
border: 1px solid #d6d6d6;
border-right: 0;
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0x 0px 0px 0px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-profile {
display: inline-block;
width: 817px;
padding: 15px 15px 15px;
background-color: #fff;
border: 1px solid #d6d6d6;
-webkit-border-radius: 0px 5px 5px 5px;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
How do I make it so that I can create a new line in the HTML using the class, instead of having it all on one line?
JSFiddle: http://jsfiddle.net/VzTxM/4/
I believe the issue you're having (if i understand the question right) is that the display:inline-block; is adding a lil spacer when the HTML is on two seperate lines - you can fix this by flaoting the elements instead?
CSS
.form-profile-side,.form-profile {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
border: 1px solid #d6d6d6;
background-color: #fff;
float:left;
}
.form-profile-side {
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0x 0px 0px 0px;
vertical-align: top;
border-right: 0;
width: 120px;
}
.form-profile {
-webkit-border-radius: 0px 5px 5px 5px;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
padding: 15px 15px 15px;
width: 817px;
}
.clear {
clear:both;
}
HTML
<div class="span13">
<form class="form-profile-side"><br><br></form>
<form class="form-profile"><br><br></form>
<div class="clear"></div>
</div>
This is driving me nuts, I've seen it before but can't replicate it or find it or any resources for it. What I am doing is a vertical ribbon with a leather texture and a "stitched pattern". The way the stitches work is simple enough, inner divs with dashed borders, and even the ribbon shape is easy enough using the pseudo :after class, but combining the two is just not going to plan.
This is what I have for css that is working so far (it is all done with css minus the leather texture):
.wrapleather {
width:100px;
height:120px;
float: right;
margin-right:20px;
background-image : url("leather.png");
border-radius: 5px;
-webkit-box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
position:relative;
}
.wrapleather:after {
content: '';
display: block;
width: 0;
height: 105px;
position: absolute;
top: 0;
left: 0;
border-width: 0 50px 15px 50px;
border-style: solid;
border-color: transparent transparent #cdc0a8;
position:absolute;
top:0;
left:0;
}
.wrapleather .outside {
width:90px;
height:110px;
margin: 4px;
border-radius: 5px;
border: 1px dashed #aaa;
box-shadow: 0 0 0 1px #f5f5f5;
}
.wrapleather .inside {
width:90px;
height:110px;
border-radius: 5px;
}
<div class="wrapleather">
<div class="outside">
<div class="inside">
<p class="font">Leather</p>
</div>
</div>
</div>
Additionally the shadow is remaining in a "square" format and not taking the shape of everything. To clarify I am not asking anyone to debug or anything like that, I am simply asking for alternative or further methods to be shared that could achieve the desired results, css is still something I am in the process of learning so any advice or anything of that nature that you could give would be appreciated, and if you need any additional info please let me know. Thanks!
There is a way to do what you want with CSS only, but it won't work on all browsers. If you want the best browser support, you should probably use an image.
Here is a demo (you may have noticed I only use a single element, as you shouldn't introduce extra markup just for styling): http://jsfiddle.net/joshnh/eUje5/
HTML
<div class="ribbon"></div>
CSS
.ribbon {
background: #eee;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
border-radius: 5px 5px 0 0;
box-shadow: 5px 0 0 #eee,
-5px 0 0 #eee;
height: 120px;
margin: 0 5px;
position: relative;
width: 90px;
-webkit-filter: drop-shadow(0 2px 5px hsla(0,0%,0%,.5));
}
.ribbon:after,
.ribbon:before {
border-top: 15px solid #eee;
content: '';
height: 0;
position: absolute;
top: 100%;
width: 0;
}
.ribbon:after {
border-left: 50px solid transparent;
right: -6px;
}
.ribbon:before {
border-right: 50px solid transparent;
left: -6px;
}
So, I wanted to make sure that I wasn't losing my mind and that this ribbon effect is actually possible on modern browsers without relying on webkit specific filters. So here it is for all those who come across this later.
You just need to be more diligent with how you model your box-shadows.
Note that when increasing the width, you'll need to subsequently decrease the angle at which you're rotating and skewing the :before and :after elements.
Example:
.ribbon {
background: #eee;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
border-top: 1px dashed #aaa;
box-shadow: 5px 0 0 #eee,
-5px 0 0 #eee,
0 -5px 0 #eee,
5px -5px 0 #eee,
-5px -5px 0 #eee,
5px 1px 5px 5px #888;
height: 120px;
margin: 10px 5px 0 5px;
position: relative;
width: 90px;
z-index: 3;
}
.ribbon:after,
.ribbon:before {
content: '';
position: absolute;
top: calc(100% - 1px);
width: calc(50% + 1px);
border-bottom: 1px dashed #aaa;
}
.ribbon:after {
transform: rotateZ(20deg) skewX(20deg) translateY(-2px);
transform-origin: top right;
right: -1px;
height: 40px;
background-color: #eee;
border-right: 1px dashed #aaa;
box-shadow: 5px 0 0 #eee,
0 5px 0 #eee,
5px 5px 0 #eee,
15px 15px 5px -5px #888,
0 15px 5px -5px #888,
15px 0 5px -5px #888;
}
.ribbon:before {
transform: rotateZ(-20deg) skewX(-20deg);
transform-origin: top left;
left: -1px;
height: 40px;
background-color: #eee;
border-left: 1px dashed #aaa;
box-shadow: -5px 0 0 #eee,
0 5px 0 #eee,
5px 5px 0 #eee,
15px 15px 5px -5px #888,
0 15px 5px -5px #888;
}
<div class="ribbon"></div>