Here is a link to a set of navigation style:
http://tympanus.net/Development/ArrowNavigationStyles/
Please scroll down the page to the last style "Fill Path".
I want to change the position of the navigation arrows, pushing each of them more to the edge of the container.
In the line 924 of the component.css file, there is this rule:
.nav-fillpath a::before,
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
position: absolute;
left: 50%;
width: 3px;
height: 50%;
background: #566475;
content: '';
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
outline: 1px solid transparent; /* for FF */
}
Clearly, I should change the "left" property here for the arrows to move. But when I change it for instance to 80%, one arrow moves closer to the edge (which I want), while the other distances from its edge. How this rule should be edited for both arrow to be push closed to their adjacent edge?
Just decrease the width of .nav-fillpath a css class.
.nav-fillpath{
width: 100px; /* decrease this width */
/* other css properties */
}
To give the text some space from nav icons, give margin to sides to .nav-fillpath h3.
.nav-fillpath h3{
margin: 0px 30px; /* remove margin: 0px; */
}
You can chance right and left of .next and .prev:
nav a.next {
right: -35px;
}
nav a.prev {
left: -35px;
}
try this:
.nav-fillpath .prev { margin-left:-80px;}
Related
I decided to write a basic blackjack card game using HTML, CSS, and JS, and I'm having a problem where a card oscillates up and down because I'm changing the top margin of the card.
.card {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
border: 5px solid black;
width: 60px;
height: 100px;
background-color: #F0F0F0;
transition-duration: 0.3s;
transition-property: margin-top, border;
}
.card:hover {
margin-top: 0px;
border: 5px solid #3000A0;
z-index: 0 !important;
transition-duration: 0.3s;
transition-property: margin-top, border;
}
<div class="card">Card</div>
So when I hover over the card, the top margin of 50px is removed and the card slides up. However, if I hover over the bottom 50px of the card, the card will slide up (out of the selection of :hover, and the card starts to slide back down. The card will then become selected, slide up, become unselected, slide down... repeat.
I tried to fix this by adding
.card::after {
content: "";
width: 60px;
height: 50px;
}
but it didn't seem to do anything.
I considered a solution by adding <div>s before and after the card element and changing their heights, but I'd rather use a CSS solution before JS for this scenario. What could I do to fix this?
When animating elements based on mouse position it's best to delegate the location of the event to another element (in this case, a parent) and animate the transform property as it is only a visual transform (padding, margin, etc. affect the document flow).
For example:
.card-wrapper {
display: inline-block;
margin-top: 50px;
border: 1px solid #ccc;
padding: 5px;
}
.card-wrapper:hover .card {
z-index: 0 !important;
border: 5px solid #3000A0;
transform: translateY(-50px);
}
.card {
display: flex;
flex-direction: column;
align-items: center;
border: 5px solid black;
width: 60px;
height: 100px;
background-color: #F0F0F0;
transition: all 300ms ease;
}
<div class="card-wrapper">
<div class="card">Card</div>
</div>
I added a border and padding to the parent to show you the bounds of the parent. As the mouse enters/exits the parent the child card animates without affecting other elements.
Note that the bounds of the parent includes the child as it transforms to extend beyond the top of the parent.
You can use :after to make an extension of the :hover area on the card. Make the card relative and then absolute position the :after below the card. You can set a background-color on the :after to see where your psudo hover state covers.
.card {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
border: 5px solid black;
width: 60px;
height: 100px;
background-color: #F0F0F0;
transition-duration: 0.3s;
transition-property: margin-top, border;
position: relative;
}
.card:hover:after {
content: '';
height: 50px;
position: absolute;
top: 100%;
left: -5px;
right: -5px;
}
.card:hover {
margin-top: 0px;
border: 5px solid #3000A0;
z-index: 0 !important;
transition-duration: 0.3s;
transition-property: margin-top, border;
}
<div class="card"></div>
I'm currently running into this problem, that some elements like checkbox (label) and searchbutton (input) are always stacked above my navigation.
I tried a lot like setting opacity, positions, z-index (including a position which is not static), removed border backgrounds... but no success.
opacity: 1;
position: absolute;
z-index: 9998;
please check with position: relative; css
.search input {
border: 2px solid #ccc;
border-radius: 20px;
box-sizing: border-box;
font-family: "FontAwesome";
font-size: 16px;
padding: 12px 20px;
position: relative;
transition: width 0.4s ease-in-out 0s;
width: 100%;
z-index: 9999;
}
For those wich running on the same problem like me. It's because my nav-container was set to position: static !!
I changed it to position: relative now it's working fine !!
I have animated my navigation buttons that expand upon hover, but they keep on disrupting the flow of the rest of the page. I've tried using z-index to take them out of the flow, but that isn't working, either. Is there a way to do this with out the buttons shoving everything out of whack? Here's my relevant code so far:
.btn-group .button {
background-color: teal;
border: 2px solid orange;
color: orange;
padding: 2px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
font-size: 1em;
border-radius: 50%;
margin: 5px 0 5px 5px;
padding-left: 30px;
position: relative;
z-index: 1; }
.btn-group .button:hover {
background-color: cadetblue; }
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s; }
.button span:after {
content: '\00bb';
opacity: 0;
top: 0;
right: -20px;
transition: 0s;
padding-left: 10px; }
.button:hover span {
padding: 10px;
color: black;
font-size: 1.5em; }
.button:hover span:after {
opacity: 1;
right: 0;
color: black; }
Thanks for your help!
You have to limit your animations to properties that do not interfere with object's position and dimensions in the document flow.
Those are: transform, left, right, bottom and top. For the last 4, in order to work, you also need position:relative on the button. When using any of these, even though you see the element moving, its place is kept in the flow, just like it would still be there. Only its projected image is moved/transformed.
Example with transform:
.button {
margin: 1rem;
transition : transform .3s cubic-bezier(.4,0,.2,1);
display: inline-block;
border: 1px solid black;
padding: 1rem;
}
.button:hover {
transform: scale(1.1);
}
.red {
background-color: red;
padding: 1rem;
color: white;
}
<a class="button">Example with transform</a>
<div class="red">see? I'm not moving</div>
That's how the vast majority of web animations are done (using transforms).
As an alternative, if you really want to animate properties that would normally affect the rest of the document, you will need to remove your element from document flow. For that, you need to:
wrap your element in a wrapper (placeholder) of desired dimensions (which will never move and keep everything in place), and give the wrapper position:relative,
set position:absolute on the button.
Now you can animate anything on the button without affecting the rest of the document.
But remember, the wrapper needs to have proper dimensions, as the button, now being absolutely positioned, will no longer occupy any space in the document flow. Also, note that your button is now relative to its placeholder. If the placeholder moves, the button moves too.
Example with absolute positioning and wrapping:
.wrapper {
height: 5rem;
position: relative;
}
.button {
position: absolute;
top: 1rem;
padding: 1rem;
transition: all .3s cubic-bezier(.4,0,.2,1);
border: 1px solid black;
}
.button:hover {
top: .5rem;
padding: 1.5rem;
}
.red {
background-color: red;
padding: 1rem;
color: white;
}
<div class="wrapper">
<a class="button">Example with absolute positioning and wrapping</a>
</div>
<div class="red">see? I'm not moving</div>
That's the basics.
As a side note, best practices require you to limit animations to a very select and limited bunch or properties which do not hit browser performance: the bunch is made of exactly two items:
transforms
and opacity.
You animate anything else... boom!, your scroll begins to stagger on devices with limited resources. There is quite a lot to read on the subject, but here's a good one.
Setting a high z-index does not take the element out of the document flow, you need to use absolute positioning for your button.
i.e.
.btn-group{
position: relative;
}
.button{
position: absolute;
}
I want the triangle shaped pointer to leave enough space between the parent and dropdown menu.
What I want is as below:
What I have done is as below:
CSS for the triangle
.sf-menu ul li:first-child a:after {
content: '';
position: absolute;
left: 40px;
top:-0.01px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #072438;
}
js fiddle:
http://jsfiddle.net/2athcwe9/
you just need to adjust your top values on the ul and the arrow:
.sf-menu ul li:first-child a:after {
content: '';
position: absolute;
left: 40px;
top:-10px; <-------
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #072438;
}
.sf-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 63px; <---------------------
left: 0;
z-index: 99999;
background-color: #2D2D2D;
border-bottom:none;
/* background-image: linear-gradient(#444, #111); */
/*-moz-border-radius: 5px;*/
/*border-radius: 5px;*/
}
FIDDLE
Let me explain something about absoluted elements that must be placed as dropdowns:
.sf-menu ul {top: 100%}
.sf-menu li a {/*height: auto*/}
.sf-menu ul li:first-child a:after {top: auto; bottom: 100%}
Example here: jsfiddle
1) You have an ul (children with position absolute) inside another ul.sf-menu (parent with position relative).
Your code have your children ul with a top with a fixed value of 35px; it caused that the children ul were overlapping ul parent.
2) To make your children ul to be automatically under the area of your ul parent, you don't have to use a fixed value, you can use top: 100% to make it move from top to bottom outside the area of the ul parent.
3) But for your particular case, your parent relative element has a border-bottom, so using: top:100% makes it overlap that area. Well in this situation you can alter the rule and use a custom value as 108% or any custom px value.
4) Your anchors have a fixed height, you can delete the height. But if for some reason you can't, you can override it with height: auto.
5) Now the problem of the arrow. Your arrow have a top with fixed value (top: -0.01px), you can fix it with another custom fixed value like -10px, -20px; but you can apply the same rule applied to children ul and make it automatically be on top outside of your element.
6) You can reset the value of top using top: auto, and then you can add a bottom: 100%. It will position your arrow from bottom 0 to bottom 100% over the top of your div relative. When you find any top, bottom, left, right that doesn't work as you expected, you can override any of them with auto.
I am building a site for a friend (http://pasionesargentas.com/sm/) with the fullscreen gallery with thumbnail flip (http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with-thumbnail-flip/). I didn't quite like the idea of the flip thing so I simply preferred to disable it and add a menu instead. The menu div css is something like
#top {
position:fixed;
background: transparent;
display: block;
z-index: 99999;
}
It works fine in Chrome, Safari, Explorer and Opera. But for some reason she can't see the menu on her iPad. Since I don't have an ipad I downloaded the Ripple Mission Control and it works fine too so I have no clue what's going on.
Now, the question: Do I have to do css different for tablet browsers (iPad)? Or it is the gallery that's messing up with the menu and covering it?
Had the same problem, wanted to use an overlaying div with a transparent png on top of another div. Found out that z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative. Fixed my ipad z-index problem instantly.
.topbar {
display:block;
background: transparent;
height: 60px;
width: 1024px;
display: block;
margin: 0;
padding: 0;
z-index:6;
position:relative;
}
.middlebar {
display:block;
background: transparent;
height: 60px;
width: 1024px;
display: block;
margin: 0;
padding: 0;
z-index:5;
position:relative;
}
.bottom {
display:block;
background: transparent;
height: 758px;
width: 1024px;
display: block;
margin: 0;
padding: 0;
z-index:4;
position:relative;
}
.description {
position: fixed;
top: 5px;
left: 50px;
text-shadow: 1px 1px 1px black;
z-index: 5;
}
#nav:hover {
background: #829FB0;
opacity: 1.0;
filter: alpha(opacity=100);
z-index: 10;
}
#nav {
align: center;
background: #829FB0;
padding: 3px 7px;
display: inline;
opacity: 1.0; //change this later
filter: alpha(opacity=65);
-moz-border-radius: 9px;
border-radius: 9px;
z-index: 10;
}
The problem could be transparent overlying divs, so first replace your code with this code, where the divs/nodes that have to be placed higher are not transparent and then see, also use z-indexes that I have given, you do not need too much high values
When checking for errors in css make sure you make nodes visible and remove their opacity and never give too high values for z-indexes. Try this, if it does not work I will look closely.