I am struggling to remove the line from my vertical menu of my website http://propertypricesearch.com/ (there is a vertical line)
I tried to inspect element and it seems to be .vertical_area_background class
.vertical_area_background{
position: fixed;
width: 290px;
height: 100%;
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
border-right-width: 0px !important;
top: 0px;
left: 0px;
right: 0px;
border-style: none;
z-index: 0;
-webkit-transition: opacity 0.5s ease, background-color 0.5s ease;
-moz-transition: opacity 0.5s ease, background-color 0.5s ease;
-o-transition: opacity 0.5s ease, background-color 0.5s ease;
-ms-transition: opacity 0.5s ease, background-color 0.5s ease;
transition: opacity 0.5s ease, background-color 0.5s ease;
opacity: 1;
background-color: #1d2022;
}
There i put lines like
right: 0px;
border-right-width: 0px !important;
but still its showing the line
Inspected with Chrome and found the rule causing the line. Override it like this:
body.vertical_menu_background_opacity_over_slider_on .vertical_menu_area {
border-right: 0 !important;
}
Alternatively, you can also put a border: none or border-right: none on that particular div holder, instead using the !important
<aside class="vertical_menu_area with_scroll " tabindex="5000" style="overflow-y: hidden; outline: none; border-right: none;">
Problem
You have a border on this element,
body.vertical_menu_background_opacity_over_slider_on .vertical_menu_area
Solutions
Change this,
body.vertical_menu_background_opacity_over_slider_on .vertical_menu_area {
border-right: 1px solid rgba(255,255,255,0.5);
}
1.
body.vertical_menu_background_opacity_over_slider_on .vertical_menu_area {
border-right: 1px solid rgba(255,255,255,0.5);
border-right: none !important;
}
2.
body.vertical_menu_background_opacity_over_slider_on .vertical_menu_area {
border-right: 1px solid rgba(255,255,255,0.5);
border-right: 0 !important;
}
3.
body.vertical_menu_background_opacity_over_slider_on .vertical_menu_area {
border-right: 1px solid rgba(255,255,255,0.5);
}
Basically each one of those options is either removing the rule or overriding it with !important
If you have access I would just delete the rule. If you must override it then I would add a new rule to my css that looked like this,
body.vertical_menu_background_opacity_over_slider_on .vertical_menu_area {
border-right: none !important;
}
The difference between using border-right: 0; and border-right: none;
border: none; However, the line-style value of none will cause
the color and width values to be ignored as stated in the CSS
Specification: 'none' No border. Color and width are ignored (i.e.,
the border has width 0
Related
I would like to make a timed border draw animation once my page is loaded. I basically want the border of the div container to be hidden and then have the container border drawn through a transition, triggered by the page being loaded (without hovering). I was able to find how to do this upon hovering, but I can't figure out how to do it upon page load. How would I implement that into the following code?
<div id="profile-content">
Insert Content Here
</div>
#profile-content
{
border: 3px solid;
border-color: #FFFFFF;
padding: 4em 4em 4em 14em;
margin: 0 0 0 4em;
}
There are many ways to look into the border transition, I just showed a couple.
Source
There is a property transition and it accepts the seconds as parameters to give you the effect.
#profile-content {
outline: solid 5px #FC5185;
transition: outline 0.6s linear;
margin: 0.5em;
}
#profile-content:hover {
outline-width: 10px;
}
<div id="profile-content">
Insert Content Here
</div>
OR
Div border transition:
div {
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
width: auto;
}
div::before,
div::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
#profile-content {
-webkit-transition: color 0.25s;
transition: color 0.25s;
}
#profile-content::before,
#profile-content::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
#profile-content::before {
top: 0;
left: 0;
}
#profile-content::after {
bottom: 0;
right: 0;
}
#profile-content:hover {
color: Teal;
}
#profile-content:hover::before,
#profile-content:hover::after {
width: 100%;
height: 100%;
}
#profile-content:hover::before {
border-top-color: black;
border-right-color: black;
-webkit-transition: width 1s ease-out, height 0.25s ease-out 0.25s;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
#profile-content:hover::after {
border-bottom-color: black;
border-left-color: black;
-webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
<div id="profile-content">
Insert Content Here
</div>
hey guys i build here a nice hover effect on a profile card, but i would like to have the border that i have on the hover effect more inside the content. padding didnt worked for me, any clue how to fix it.
i have here a demo code of it on bootply
thats what im looking fore
.model-card {
display: inline-block;
position: relative;
margin: 0em 0.7em 1.4em 0.7em;
background-color: #fff;
transition: box-shadow .25s;
width: 15em;
padding: 0px;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
-webkit-transition: transform 0.3s ease-out;
-moz-transition: transform 0.3s ease-out;
-o-transition: transform 0.3s ease-out;
}
span.hover-content {
background: rgba(135,211,183,0.7);
color: white;
border: 1px solid #fff;
cursor: pointer;
display: table;
padding: 10px;
height: 21em;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
Please try this css:
span.hover-content span {
border: 1px solid;
display: table-cell;
text-align: center;
vertical-align: middle;
}
Try to use box-shadow
span.hover-content span {
box-shadow: inset 1px 1px #777, 1px 1px #777;
display: table-cell;
text-align: center;
vertical-align: middle;
}
EDIT: Hoping someone will see this one. I'm stuck and have tried several things since posting it, but to no avail.
I'm trying to display a textarea with a border shadow. For some weird reason, while other regular text input boxes on the page are displaying their inner shadows correctly, textareas do not show any inner shadows at all. How do I force textarea to display the shadow as the other input boxes do?
Here is the HTML I'm using.
<textarea class="form-control upladfieldset notes-field" rows="6"></textarea>
Note that when I remove the entire class attribute of
class="form-control upladfieldset notes-field"
the inner border shadow appears, but then of course all my other styling is gone which is not ideal. So I also tried commenting out individual lines of CSS in those classes to see which line is causing a conflict, but the only thing that gets the inner shadow to appear is if I remove the class attribute declaration altogether.
Here is the CSS I'm using.
.form-control
{
color: #34495e;
border-color: transparent;
border: none !important;
border-bottom-width: 0px;
border-bottom: none;
font-size: 16px;
line-height: 1.467;
padding: 8px 12px 8px 66px;
height: 54px;
-webkit-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
background-repeat: no-repeat;
}
.uploadfieldset
{
border: none;
border-radius: 0;
padding: 0;
}
.notes-field
{
background-clip: border-box;
background-size: contain
border-radius:0;
height: 54px;
width: 680px;
font-family: 'gotham_htfbook';
font-size: 18px;
color: #000000;
text-transform: none;
text-align: left;
font-weight: normal;
}
input[type=text], textarea
{
-webkit-appearance: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
box-shadow: 0 0 5px rgba(89, 89, 89, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1);
}
input[type=text]:focus, textarea:focus
{
box-shadow: 0 0 5px rgba(89, 89, 89, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1);
}
Well... you have a lot of things going on here, but I believe I may have achieved your desired result (I'm not 100% sure I understand what you want, but I'm operating under the assumption that you want your textarea to include a border and box-shadow identical to your input field). I believe the main problem here is mainly to do with hierarchy fundamentals. Because of that, I feel like there's a few things that should be said before we tackle our actual code here. In principle, you should have more general rules towards the top of your stylesheet and more specific ones as you go down. Resets (the raw elements like textarea, input, etc.) should be at the top--or at the very least, above the classes you wish to apply to those elements.
Also, I strongly encourage you to avoid using !imporant. If you find yourself needing to use !imporant, that generally means that your real problem lies elsewhere. It shows that you're now trying to work against the natural flow of CSS to force it to cover up something else. And what happens when you need to override that rule? You're going to have to write an even more specific rule, and the whole thing can very quickly turn into a mess.
So with that said, for the sake of familiarity, I have taken your code and commented out the problematic lines and have included explanations as to why they're preventing you from achieving what you want.
.form-control
{
color: #34495e;
/*border-color: transparent; Because of this, even if you had a border, you wouldn't be able to see it (assuming you didn't override it later). */
/*border: none !important; 1. Use of !important. 2. Your border isn't showing because this is explicitly telling it not to. */
/*border-bottom-width: 0px; You're getting rid of the bottom border. */
/*border-bottom: none; You're getting rid of the bottom border. */
font-size: 16px;
line-height: 1.467;
padding: 8px 12px 8px 66px;
height: 54px;
-webkit-appearance: none;
/*-webkit-box-shadow: none; Explicitly telling it not to have a box-shadow */
/* box-shadow: none; Explicitly telling it not to have a box-shadow */
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
background-repeat: no-repeat;
}
.uploadfieldset
{
/*border: none; Explicitly telling it not to have a border */
border-radius: 0;
padding: 0;
}
.notes-field
{
background-clip: border-box;
background-size: contain
border-radius:0;
height: 54px;
width: 680px;
font-family: 'gotham_htfbook';
font-size: 18px;
color: #000000;
text-transform: none;
text-align: left;
font-weight: normal;
}
input[type=text], textarea
{
-webkit-appearance: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
box-shadow: 0 0 5px rgba(89, 89, 89, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1);
}
input[type=text]:focus, textarea:focus
{
box-shadow: 0 0 5px rgba(89, 89, 89, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1);
}
However, here, I have re-ordered some of your lines in order to implement some of the principles I mentioned earlier. Because I don't know what you're going to use this for, I tried not to tamper with things when it was not directly necessary. I also did not delete any of your lines. Instead, I simply commented them out so you can follow along and see what I actually did. You can delete them yourself if you so wish to.
input[type=text], textarea /* Moved to the top of your stylesheet */
{
-webkit-appearance: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
box-shadow: 0 0 5px rgba(89, 89, 89, 1); /* Reminder: You're defining your box-shadow here */
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(204, 204, 204, 1); /* Reminder: You're defining your border here */
}
input[type=text]:focus, textarea:focus /* Moved to the top of your stylesheet */
{
/*box-shadow: 0 0 5px rgba(89, 89, 89, 1); No need to redefine in :focus. It will be in inherited. */
padding: 3px 0px 3px 3px; /* See: padding in .uploadfieldset (below) */
/*margin: 5px 1px 3px 0px; No need to redefine in :focus. It will be in inherited. */
/*border: 1px solid rgba(204, 204, 204, 1); No need to redefine in :focus. It will be in inherited. */
}
.form-control
{
color: #34495e;
/*border-color: transparent; This will hide previously defined border. */
/*border: none !important; This will override previously defined border. Remember, don't use !important.*/
/*border-bottom-width: 0px; This will get rid of the bottom border. */
/*border-bottom: none; This will get rid of the bottom border. */
font-size: 16px;
line-height: 1.467;
padding: 8px 12px 8px 66px;
height: 54px;
-webkit-appearance: none;
/*-webkit-box-shadow: none; This will override previously defined box-shadows. */
/* box-shadow: none; This will override previously defined box-shadows. */
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;
background-repeat: no-repeat;
}
.uploadfieldset
{
/*border: none; This will override previously defined borders. */
border-radius: 0;
padding: 0; /* This tells your text field to not have any padding. However, when you click on your textarea, the padding set by textarea:focus will override THIS. */
}
.notes-field
{
background-clip: border-box;
background-size: contain
border-radius:0;
height: 54px;
width: 680px;
font-family: 'gotham_htfbook';
font-size: 18px;
color: #000000;
text-transform: none;
text-align: left;
font-weight: normal;
}
If you try either of those with this markup:
<textarea class="form-control upladfieldset notes-field" rows="6"></textarea>
<input type="text">
You can see that both fields are stylized likewise. I hope this helps.
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 6 years ago.
I have been trying to use css to show a Hidden Div fade in whenever I hover its parent element.
So far all I have managed to do was to get the hidden div to show, but there are no easing transitions what so ever.
Here is my Code on JSfiddle http://jsfiddle.net/9dsGP/
Here is my Code:
HTML:
<div id="header">
<div id="button">This is a Button
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
CSS:
#header #button {width:200px; background:#eee}
#header #button:hover > .content {display:block; opacity:1;}
#header #button .content:hover { display:block;}
#header #button .content {
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
opacity:0;
clear: both;
display: none;
top: -1px;
left:-160px;
padding: 8px;
min-height: 150px;
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
-webkit-border-radius: 0px 7px 7px 7px;
-moz-border-radius: 0px 7px 7px 7px;
-khtml-border-radius: 0px 7px 7px 7px;
border-radius: 0px 7px 7px 7px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
background: #FFF;
}
Any clue as to what Im doing wrong? Just trying to get a smooth effect for the hidden content when I hover over the button. Thanks in advance!
display:none; removes a block from the page as if it were never there.
A block cannot be partially displayed; it’s either there or it’s not.
The same is true for visibility; you can’t expect a block to be half
hidden which, by definition, would be visible! Fortunately, you can
use opacity for fading effects instead.
- reference
As an alternatiive CSS solution, you could play with opacity, height and padding properties to achieve the desirable effect:
#header #button:hover > .content {
opacity:1;
height: 150px;
padding: 8px;
}
#header #button .content {
opacity:0;
height: 0;
padding: 0 8px;
overflow: hidden;
transition: all .3s ease .15s;
}
(Vendor prefixes omitted due to brevity.)
Here is a working demo. Also here is a similar topic on SO.
#header #button {
width:200px;
background:#ddd;
transition: border-radius .3s ease .15s;
}
#header #button:hover, #header #button > .content {
border-radius: 0px 0px 7px 7px;
}
#header #button:hover > .content {
opacity: 1;
height: 150px;
padding: 8px;
}
#header #button > .content {
opacity:0;
clear: both;
height: 0;
padding: 0 8px;
overflow: hidden;
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
border: 1px solid #ddd;
-webkit-box-shadow: 0px 2px 2px #ddd;
-moz-box-shadow: 0px 2px 2px #ddd;
box-shadow: 0px 2px 2px #ddd;
background: #FFF;
}
#button > span { display: inline-block; padding: .5em 1em }
<div id="header">
<div id="button"> <span>This is a Button</span>
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
You cannot use height: 0 and height: auto to transition the height. auto is always relative and cannot be transitioned towards. You could however use max-height: 0 and transition that to max-height: 9999px for example.
Sorry I couldn't comment, my rep isn't high enough...
I found a solution while tinkering around.
People who directly wanna see the results:
With click: https://jsfiddle.net/dt52jazg/
With Hover: https://jsfiddle.net/7gkufLsh/1/
Below is the code:
HTML
<ul class="list">
<li>Hey</li>
<li>This</li>
<li>is</li>
<li>just</li>
<li>a</li>
<li>test</li>
</ul>
<button class="click-me">
Click me
</button>
CSS
.list li {
min-height: 0;
max-height: 0;
opacity: 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.active li {
min-height: 20px;
opacity: 1;
}
JS
(function() {
$('.click-me').on('click', function() {
$('.list').toggleClass('active');
});
})();
Please let me know whether there is any problem with this solution 'coz I feel there would be no restriction of max-height with this solution.
I faced the problem with display:none
I have several horizontal bars with transition effects but I wanted to show only part of that container and fold the rest while maintaining the effects. I reproduced a small demo here
The obvious was to wrap those hidden animated bars in a div then toggle that element's height and opacity
.hide{
opacity: 0;
height: 0;
}
.bars-wrapper.expanded > .hide{
opacity: 1;
height: auto;
}
The animation works well but the issue was that these hidden bars were still consuming space on my page and overlapping other elements
so adding display:none to the hidden wrapper .hide solves the margin issue but not the transition, neither applying display:none or height:0;opacity:0 works on the children elements.
So my final workaround was to give those hidden bars a negative and absolute position and it worked well with CSS transitions.
Jsfiddle
Made some changes, but I think I got the effect you want using visibility. http://jsfiddle.net/9dsGP/49/
I also made these changes:
position: absolute; /* so it doesn't expand the button background */
top: calc(1em + 8px); /* so it's under the "button" */
left:8px; /* so it's shifted by padding-left */
width: 182px; /* so it fits nicely under the button, width - padding-left - padding-right - border-left-width - border-right-width, 200 - 8 - 8 - 1 - 1 = 182 */
Alternatively, you could put .content as a sibling of .button, but I didn't make an example for this.
max-height
.PrimaryNav-container {
...
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
...
}
.PrimaryNav.PrimaryNav--isOpen .PrimaryNav-container {
max-height: 300px;
}
https://www.codehive.io/boards/bUoLvRg
When you need to toggle an element away, and you don't need to animate the margin property. You could try margin-top: -999999em. Just don't transition all.
I'm trying to fade in border-bottom and I can't quite seem to get it to work. Here's what I've tried:
#navBar a:hover {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
border-bottom: 1px solid #fff;
}
It just keeps appearing with no transition. What am I doing wrong?
The problem is that you are trying to transition by adding a border, which does not work. You can, however, have the color of the border transition from transparent to #FFF:
HTML:
<div id="navBar">
<a>Link</a>
</div>
CSS:
#navBar a {
border-bottom: 1px solid transparent;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
#navBar a:hover {
border-bottom: 1px solid #FFF;
}
Fiddle: Fiddle
If you want to go from no border to white you should still write default attribute because transition won't do this for you.
http://jsfiddle.net/ZmUAw/3/
#navBar a {
text-decoration: none;
border-bottom: 1px solid transparent;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
And after that you can change it to white with transition
#navBar a:hover {
border-bottom: 1px solid #000;
}