Today I was trying to create a card in HTML/CSS with hidden border which appears after hovering on a card. I came up with this code, which works fine for me:
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: 5px solid rgba(0,0,0,0);
background-color: red;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
I just want to know if there isn't any better way of doing this. This works fine since I don't need to animate it, but is this a proper way of hiding border or not? Thanks for Your answers.
EDIT: I think I should edit my question since I don't want to use box-sizing: border-box property. I'd like to hide my border with "content-box". And here border: none won't work.
Your solution is the right way to handle this problem.
Others have commented that to hide the border you should use border: 0px or border: none but with that method you have the problem that when the box is hovered, the width of the element changes making it, not only ugly to look at, but hard to predict what the width will be, and how it can affect adjacent elements.
I would use exactly the same method you have used.
You can also adjust the background-clip to avoid the border to overlap the background:
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: 5px solid rgba(0,0,0,0);
background-color: red;
background-clip:padding-box;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
To hide border use border:none instead border: 5px solid rgba(0,0,0,0);
When you use border: 5px solid rgba(0,0,0,0); means you apply border but with transparent color.
.card
{
width: 250px;
height: 300px;
border-radius: 10px;
overflow: hidden;
position: relative;
z-index: 1;
border: none;
background-color: red;
}
.card:hover
{
border: 5px solid black;
}
<div class="card">
</div>
.card{
border: 0px solid black;
}
.card:hover{
border: 5px solid black;
}
I think that is your solve
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
What should I do if I add border to image but I want edge of this border. Like this:
Green: Image
Dark blue: First border
Light blue: Second border
Using CSS box-shadow to achieve multiple borders. The , separated list values are used to separate multiple borders/shadows. 15px and 30px are values denoted for spread-radius of each border/shadow.
.image {
background: url('http://placehold.it/300x300');
width: 300px;
height: 300px;
margin: 50px;
box-shadow: 0 0 0 15px #3F48CC, 0 0 0 30px #00A2E8;
}
<div class="image"></div>
Outline
body {
text-align: center;
}
img {
display: inline-block;
margin: 15px;
border: 3px solid red;
}
.outline {
outline: 3px solid green;
}
<img class="outline" src="http://lorempixel.com/output/nightlife-q-c-100-100-7.jpg" alt="">
Bonus: You can offset the outline.
Note: Outline does not respond to border-radius.
body {
text-align: center;
background: lightblue;
}
img {
display: inline-block;
margin: 15px;
border: 3px solid red;
}
.outline {
outline: 3px solid green;
outline-offset: 3px;
}
.offset {
outline-offset: 3px;
}
<img class="outline offset" src="http://lorempixel.com/output/nightlife-q-c-100-100-7.jpg" alt="">
Box-shadow
body {
text-align: center;
}
img {
display: inline-block;
margin: 15px;
border: 3px solid red;
}
.shadow {
box-shadow: 0 0 0 3px blue;
}
<img class="shadow" src="http://lorempixel.com/output/nightlife-q-c-100-100-7.jpg" alt="">
Note: box-shadow does respond to border-radius but it's 'value' is to scaled up from that of the border.
JSfiddle Example
<div style="border:3px solid gray">
<img src="data:image/jpeg;base64,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" style="border:2px solid blue">
</div>
you would most likely want to do that using CSS, unless you wanted to use Inline styling (which is generally frowned upon) take a look at this website: http://www.w3schools.com/css/css3_borders.asp
There are a lot of different properties like Borther-width:, border-color:, Border-radius: (if using a circle border). I believe there is one for making to separate borders.
http://www.w3schools.com/css/css_border.asp
for your specific case I'd say something like
CSS:
#green image {
border: 10px, solid purple;
outline: 3px, solid blue;
}
Just add a background-color and padding to the image and a text-align:center to the wrapper div like this:
.box{
width: 260px;
height: 260px;
text-align: center;
}
.box img {
border: #4830D0 5px solid;
padding: 5px;
background-color: green;
}
Here's a jsfiddle with above codes: http://jsfiddle.net/AndrewL32/65sf2f66/37/
When I hover over an area on my testing website, I made it so a border is added. But because that happens, other elements move. I've looked up other posts, and they recommended adding padding, but that doesn't seem to work because it goes over other stuff.
This is where I add the border:
#logo:hover {
border: 2px solid cyan;
}
This is what it was added to:
#logo {
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
}
Does anyone know how to help me? Also about the way I asked my question.
#logo {
background-color: black;
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
}
#logo:hover {
border: 2px solid cyan;
}
<div id=logo></div>
Greetings,
TheWombatGuru
You also can use box shadow:
#logo{
box-shadow: inset 0 0 0 1px cyan;
}
#logo:hover {
box-shadow: inset 0 0 0 2px cyan;
}
You may add:
* { box-sizing: border-box;}
to your css sheet or maybe just to your #logo id.
you may find more info about this (for me at least amazing propertie ) here
(and just in case... the code marked applied the property to every html element in your web, which is exactly what I have been doing in my last many projects with absolutely no regret)
You should try adding this to your #logo :
border: 2px solid transparent;
which would make :
#logo {
width: 200px;
height: 200px;
position: relative;
top: 80px;
line-height: 12em;
border-radius: 200px;
margin: 0 10px 0 10px;
overflow: hidden;
border : 2px solid transparent;
}
Or using box-sizing: border-box
Hopes it helps !
Cheers !
box-sizing: border-box doesn't really make the 'circle' render correctly with the border in this case - although it is an amazing property. If it were me, I'd change your css to the following:
#logo:hover {
border-left: 3px solid cyan;
border-right: 3px solid cyan;
padding: 0;
margin: 0 6px 0 6px;
}
and adjust your #logo class margins to
{margin: 0 9px 0 9px;}
a little 'hackier', but I prefer the behaviour
You should add box-sizing: border-box to the pertinent element in your CSS. This will put the padding inside the width of the container.
Here is a codepen to demonstrate: http://codepen.io/himmel/pen/LVPPvg
Alternatively to box-sizing: border-box; you could also use the calc function to subtract a value.
#logo:hover {
width: calc(200px - 4px);
height: calc(200px - 4px);
border: 2px solid cyan;
}
This method might be helpful when you are dealing with percentages, anyway it's a cool trick i situations like this.
Try adding border:1px solid transparent; to non hover element.
Try using position: absolute; because elements with position absolute have no effect on other elements. Make sure that the parent element has a position relative. For example
`
#parent-element {
position:relative;
}
#logo {
position:absolute;
}`
The title says it all, I've just discovered that IE (9 - 11) automatically applies about 50% opacity to any element's border with border-style: dotted.
The weirdest thing is, it only happens on dotted in particular, solid and dashed are fine.
You can test it yourself: http://jsfiddle.net/ptv74f4q/1/
Any ideas?
This appears to be due to IE anti-aliasing the dotted border. If you make the border-width bigger than 1px (say 5px) the border will appear white again.
One way to get around this would be to overlay some pseudo elements with the same dotted border on top to counteract the opacity:
div {
width: 200px;
height: 200px;
background: #000;
}
span {
transform: rotate(0deg);
display: inline-block;
width: 180px;
height: 85px;
line-height: 85px;
text-align: center;
margin: 8px 8px 0 8px;
border: #fff 1px solid;
color: #fff;
position: relative;
}
span.dotted {
border-style: dotted;
}
span.dotted::before, span.dotted::after {
border: #fff 1px dotted;
content: "";
height: 100%;
left: -1px;
position: absolute;
top: -1px;
width: 100%;
}
<div>
<span>I'm with normal border</span>
<span class="dotted">I'm with dotted border</span>
</div>
JS Fiddle: http://jsfiddle.net/oyrbLyjc/1/
Alternative method
Alternatively you could try using border-image. There are online tools (e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-image_generator) that would be able to help you generate a similar border using this method.
Is it possible to somehow create a double border in CSS, with these 2 added customizations:
One line is slightly thicker than the other
There is a small gap between the two lines
This is the kind of border I need:
EDIT:
Guys, I cannot make any changes to my existing HTML code. I can only apply CSS for the existing HTML code. As far as you're concerned, consider I have a div named sampleDiv, and I want to apply the border on the top side of this div (see below).
Secondly, if you're using any technique other than border, please note that I only want to apply the this specialized border on the top side of my sampleDiv div.
pure CSS & Cross browser - the thickness and spacing can be customized
After your latest Edit: this is a Working Fiddle
without changing the markup, top border only.
your HTML:
<div class="sampleDiv">
some content
</div>
new CSS
.sampleDiv
{
border-top: 2px solid black;
padding-top: 1px;
}
.sampleDiv:before
{
content: '';
border-top: 1px solid black;
display: block;
width: 100%;
}
If you are allowed to change the DOM:
one line anywhere in the markup: Working Fiddle
HTML:
<div class="SpecialLine"></div>
CSS:
.SpecialLine
{
border-top: 2px solid black;
height: 2px;
border-bottom: 1px solid black;
}
full container border: Working Fiddle
HTML:
<div class="SpecialContainer">
<div class="Content">
here goes the content
<div>
</div>
CSS
.SpecialContainer
{
border: 2px solid black;
padding: 1px;
}
.Content
{
border: 1px solid black;
}
There are various ways you can have multiple borders. One way is to use box-shadow, you can specify multiple box shadows to create the effect you want.
Example
box-shadow: 0 0 0 5px black, 0 0 0 7px red;
Update
I have created a jsFiddle to show you how you can create your borders using box-shadow
Fiddle
There's not a specific property or something for this,but you can easily create one.Something like this:
html:
<div id="wrapper">
<div id="middle">put whatever you want here</div>
</div>
css:
#wrapper{
border: 3px solid black;
padding: 1px;
}
#middle{
border: 1px solid black;
}
here's a js fiddle link:
http://jsfiddle.net/roostaamir/GEqLJ/
UPDATE:
so I saw your edit,and here's the first thing that came to my mind(if you have the width of your sampleDiv this will work):
#sampleDiv
{
border-top: 3px solid black;
width: 500px; //this is an example
position: relative;
}
#sampleDiv:before
{
content: "";
display: block;
position: absolute;
top: 1px;
width: 500px;
height: 1px;
background-color: black;
}
Your div: <div class="framed" />
Simple CSS:
.framed {
border: solid 2px #ccc;
box-shadow: 0 0 0 14px #ccc;
outline: solid 8px #fff;
}
Demo Fiddle: http://jsfiddle.net/uRFsD/
The easiest way to do this would be wrapping the main div in a container div for the second line like so:
.inner {
border: 2px solid #000;
}
.outer {
border: 1px solid #000;
padding: 1px;
}
It's not particularly semantic but it's an easy way to get the job done. You could also use border-image if being semantic is important, but it's more complicated. I guess you could also use both border (inner) and outline (outer) on the same div, but that is not ideal since outline isn't technically part of the box model at all as far as I understand it.
HTML
<div></div>
<div></div>
CSS :
div{
display: block;
background-color: #000;
}
div:nth-child(1){
padding: 2px 0;
}
div:nth-child(2){
margin-top: 1px;
padding: 1px 0;
}
Check this fiddle
May be something like below:
div {
border-top: 3px solid #00f;
position: relative;
z-index: 10;
margin: 10px;
width: 200px;
}
div:before {
content: "";
border-top: 1px solid #f00;
position: absolute;
top: 0;
left: 0;
right:0;
z-index: -1;
}
http://jsbin.com/iWiGEzU/1/edit?html,css,output
Like
demo
css
.outline {
border-top: 2px solid #000;
border-bottom:1px solid #000;
height:3px;
}
CSS
.doubleBorder
{
border: 4px solid black;
padding: 2px;
}
.doubleBorder>div {
border: 2px solid black;
}
HTML
<div class="doubleBorder">
<div>
<p>Hello</p>
<p>World</p>
</div>
</div>
Working demo
Not in pure CSS as far as I know. Instead you could add in a div element to your HTML, set its width to the one below it and set it's border-top, thickness, margin properties to be meet your thicker border requirement.
hey there i wonder if any of you have come across a similar issue? i am working on an ad section of the webpage and its got a really cool background that i would like to carry on into sections of the elements so i have a box that hold a box for a rss feed into updates made on the website and then i have a box for adverts. here is my html:
<div class="side">
<div id="ad">
bla
</div>
<div id="rss_news">
double bla
</div>
</div>
and the css:
.side {
float: left;
background-color: black;
width: 300px;
min-height: 710px;
padding: 0 0 0 0px;
margin-top: 25px;
border: 1px solid white;
border-radius: 8px 8px 8px 8px;
opacity: 0.3;
}
#ad {
border: 1px solid blue;
height: 320px;
max-height: 350px;
margin: 15px;
opacity: 1;
}
#rss_news {
border: 1px solid yellow;
height: 320px;
max-height: 350px;
margin: 15px;
opacity: 1;
}
as you can see and as i was anticipating the side class immits his attributes on the ones nested within him. is there a way that i could somehow tell the other id tags to ignore that opacity?
thanks in advance :D
There is no way to make descendants ignore the parent's opacity.
You can use rgba/hsla colors to get a partially transparent background, without affecting the children's visibility. Example:
.side {
background-color: rgba(0,0,0, 0.3);
}
Demo: http://jsfiddle.net/ywQy5/
See also:
MDN: hsla colors
MDN: rgba colors
You can use css3 rgba property for this & for IE you can use IE filter.Write like this:
.side{
background-color: rgba(0,0,0, 0.5);
background: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE*/
zoom: 1;
}