I have a case where my design requires me to declare this class:
.panel {
position: fixed;
top: 100vh;
height: 90vh;
margin: 0px;
padding: 0px;
width: 100%;
transition-property: top;
transition-duration: 1s;
}
.panel:before {
background-color: inherit;
top: -1.5em;
width: 10em;
text-align: center;
font-weight: bold;
content: attr(id);
position: absolute;
border-bottom: none;
border: .5em solid black;
border-top-color: inherit;
border-left-color: inherit;
border-right-color: inherit;
border-bottom: none;
border-radius: 25%;
border-bottom-right-radius: 0%;
border-bottom-left-radius: 0%;
}
In short, panels are tabs that fly in when targeted via an foo style link.
In their default state panels sit just under the bottom of the screen,
This creates a row of hidden panel objects whose before's appear as tabs across the bottom of the screen.
HTML for these panels is <section id="about" class="panel color">...</section> (where the color classes are effectively presentational for the moment, but will be upgraded to reflect specific tab purposes.
So, the challenge I'm trying to solve is that status bars will block the panel tabs which feels wrong, and I believe the solution is to bump them up a little bit (3 or 4 VH) when any link is hovered. This preserves status bar integrity, link integrity and the look of the site; treating the status bar as if it were a window resize.
I had believed that a:hover ~ * .panel { top: 97vh; } was the correct solution to do this, but it doesn't seem to be firing.
Related
I want to implement a button. It is like this when it's not hovered:
the transparent rounded-bourder rectangle in the right is supposed to move left and cover the entire button in 1 second, when hovered. so, after hover, we'll have something like this:
My problem is that I don't know what to do. I found some code on the internet but either it comes from left to right or it pushes my arrow icon and text out of my button! I don't want my arrow icon or text change at all. I just want that the vright transparent rectangle move to right upon hover and then come back to it's original place.
My css code for my button withoug effect is this:
.btn {
color: white;
display: flex;
flex-direction: row-reverse;
Border: 2px solid white;
border-radius: 10px;
height: 80%;
padding-top: 10px;
width: 100%;
text-align: center;
margin-top: 0px;
padding-right: 0px;
vertical-align: middle;
text-decoration: none;
background-color: #fb815e;
font-size: 18px;
font-family: 'Vazir', sans-serif;
}
update:
The effect should also reverse with the same speed when there's no hover.
You'll want one element to be relative (wrapper) and the button / stretching part to be absolute. That way it will act as an overlay. You'll be relying on the transition for the one second, and width for the covering part.
This is, as far as I can tell, the exact button you want.
Edit: You asked for it to return, that's done by a second transition. One in the hover and a second one in the regular non-hover tag itself.
Disclaimer: I have no idea what the (Arabic?) text I used says.
.btn {
cursor: pointer;
height: 40px;
width: 200px;
color: white;
display: flex;
flex-direction: row-reverse;
border-radius: 10px;
vertical-align: middle;
text-decoration: none;
background-color: #fb815e;
font-size: 18px;
font-family: 'Vazir', sans-serif;
position: relative;
text-align: center;
line-height: 40px;
border: none;
margin: 0;
padding: 0;
}
.btn:hover .btn-inside {
width: 100%;
transition: width 1s ease;
}
.btn-inside {
opacity: 0.5;
border-radius: 10px;
background-color: #fc9c81;
width: 20%;
height: 40px;
line-height: 40px;
text-align: left;
position: absolute;
transition: width 1s ease;
}
.text {
margin: auto;
}
span {
display: inline-block;
}
<button class="btn">
<span class="text">العاشر ليونيكود</span>
<span class="btn-inside"> 🡠</span>
</button>
You can do something like
className:hover{
//do stuff here
}
and then play around with opacity or whatever you wish to :)
I'm using Contact Form 7 on a website of a client, and I styled the dropdown menu to this:
.wpcf7-form select {
-webkit-appearance: textfield;
color: #72858a;
font-size: 0.7777777778rem;
background-color: #e9edf0;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
}
Unfortunately the arrows are missing now. Is there anyway to add an down arrow at the right side of the dropdown menu in the same color as the text? I tried different css classes found on this website, but nothing seems to work.
Image of how it displays now:
And how it should be:
The arrow could also be another arrow.
Any help would be appreciated much!
Regards,
Vasco
Here's an option for you... now... I used the span.wpcf7-form-control-wrap that was specifically around the select I was styling. You could also (instead) wrap the selects in a custom div.
This produced this result for me
I also made the triangle using clip-path, so you can change the colors or anything else.
/* Using the menu-813 which for me was the span around the select.*/
span.wpcf7-form-control-wrap.menu-813 {
position: relative;
height: 60px;
background: #e9edf0;
display: inline-block;
}
span.wpcf7-form-control-wrap.menu-813:after {
content: '';
position:absolute;
width: 15px;
height: 15px;
background: #000;
right:8px;
top: 20px;
z-index: 0;
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.wpcf7-form select {
-webkit-appearance: none;
appearance: none;
color: #72858a;
font-size: 0.7777777778rem;
background-color: transparent;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
width: 300px;
z-index: 1;
position: relative;
padding-left: 2ch;
}
I've added a custom weather web part to my SharePoint page, but I want a hover message that displays additional info.
The pieces I've got worked out look great in Chrome, but not so great in IE 11. I need this to look the same in both - any tips?
.tooltip {
display:inline;
position: relative;
font-family:Arial,Helvetica,sans-serif;
font-size:9pt;
}
.tooltip:hover:after {
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
top: 6px;
color: #fff;
content: attr(title);
left: 5px;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
/*width: auto;*/
}
.tooltip:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 0 6px 6px 6px;
top: 40px;
content: "";
left: 25px;
position: absolute;
z-index: 99;
}
Here's my JSFiddle: http://jsfiddle.net/hcoa82wb/
The problem was the .tooltip tag using the display: inline When this is changed to display: inline-block both IE and Chrome began to show the messed up version of the tool-tip. From there it was just a matter of changing the top properties to display how you would want it. Here is your JS Fiddle updated. I left comments in the CSS code.
On the same note I would recommend using a different Class name other than .tooltip I would hate for you to run into issues in the future if someone adds a WebPart or a 3rd party SharePoint plug-in that uses the same class name. I've had issues with that in the past.
IE 10 and 11 hasn't disappointed me so much when it comes to css until today . .
The class base and triangle has about 1px gap in between in IE 9 - 11. The other 4 browsers are not showing the gap.
.base {
display: inline-block;
position: absolute;
bottom: 5px;
right: -8px;
background-color: #ffcc00;
color: #5A5A5A;
font-size: 12px;
font-weight: bold;
padding: 2px 5px;
text-decoration: none;
margin:0;
}
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 0 0 11px;
border-color: transparent transparent transparent #DBB004;
display: inline-block;
position: absolute;
bottom: 24px;
right: -8px;
margin:0;
z-index: -1;
}
Here's a FIDDLE
This is not a bug. This is the correct rendering of display: inline-block; elements by the browser. The browser spaces inline-block elements using a width equal to a single white space character of the font (therefore, the larger the font, the wider the gap).
You can read how to solve this issue at CSS Tricks here. However, generally a negative margin-left of -4px (if your body font size is 16px) will remove the white space. For example:
.element {
display: inline-block;
}
.element ~ .element {
margin-left: -4px;
}
Edit
A better way of handling the white-space is to set font-size: 0; on the parent element and reset the font-size: 18px; or whatever your body font-size is on each of the elements with display: inline-block; elements`. This will handle browser zooming and hires displays better than the method I described above. Obviously, this strategy sometimes require an additional parent element, which might break your layout styling.
Change the .triangle margin to -1px.
Another way of solving it, is by putting the triangle inside the base-element. Easiest would to replace it with an ::after pseduo-element.
.base::after {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 0 0 11px;
border-color: transparent transparent transparent #DBB004;
display: inline-block;
position: absolute;
top: -10px;
right: 0px;
margin:0;
z-index: -1;
}
http://jsfiddle.net/WrVYd/21/
The stack overflow community helped me figure out how to add two different sized lines behind my section title on my website. The method can be viewed in this JS Fiddle: http://jsfiddle.net/dCZR4/1/
It was working properly, until I included the Twitter Bootstrap 3.0 CSS in my layout. Now, the two lines appear right on top of each other, making one thick line behind the text. This can be seen here: http://onedirectionconnection.com/tester/
If anybody could advice me on what could be causing this hiccup, it would be greatly appreciated.
The CSS for the header is below:
.section-title{
font-family: 'Lato', 'Asap','Quicksand', 'Droid Sans', sans-serif;
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-transform: uppercase;
text-align: center;
}
.section-title:before, .section-title:after {
position: absolute;
top: 40%;
overflow: hidden;
width: 50%;
height: 4px;
content: '\a0';
border-bottom: 3px solid #DA5969;
border-top: 1px solid #DA5969;
}
.section-title:before {
margin-left: -52%;
text-align: right;
}
.section-title:after {
margin-left:2%;
text-align:left;
}
And the HTML is:
<div class="section-title">Title Goes Here</div>
(In the JSFiddle, it is simply defined as h1, but I changed it in my layout)
Thanks in advance for any help offered!
Bootstrap applies the box-sizing: border-box by default.
You would need to reset that to box-sizing:content-box for this particular requirement.
.section-title:before, .section-title:after {
position: absolute;
top: 40%;
overflow: hidden;
width: 50%;
height: 4px;
content: '\a0';
border-bottom: 3px solid #DA5969;
border-top: 1px solid #DA5969;
box-sizing: content-box; /* + vendor specific versions here */
}