when on any page at: https://www.worldwideholidays.co.uk/, when scrolling down, only the bottom half of the nav bar follows. The top part (contact details) does not follow. How can I make it so that the whole half follows?
I tried adding in different elements such as .navbar-extra-top and have no luck.
Example code on the homepage:
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
When scrolled:
body #MainMenu.navbar.scrolled {
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
background: #363c48;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
Related
I've tried to create a button that animates to the left, and then back ti the right again, to it's normal state. Animation doesn't work with this code:
.fortnite-wrapper .btn.btn-display:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2em;
background-color: #ff0;
-webkit-transition: background-color .3s ease-in-out;
-o-transition: background-color .3s ease-in-out;
transition: background-color .3s ease-in-out;
-webkit-box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
-webkit-animation: jelly 6s ease-in-out infinite;
animation: jelly 6s ease-in-out infinite;
-webkit-transform-origin: 50% 50% 20px;
-ms-transform-origin: 50% 50% 20px;
transform-origin: 50% 50% 20px;
}
Left side of the button should expand to the left for 20 px and then go back, animation is infinite.
HTML for button:
<div class="fortnite-wrapper">
<button class="btn download-button btn-primary btn-display play-free">
<span>Fortnite</span></button>
</div>
First off, you didn't define the animation jelly, which is needed to tell the element which properties to animate.
Secondly, animation-direction: alternate makes the animation reverse itself after completion. This is neccessary in order to keep the element from jumping back to the start. In this snippet I put it into animation: jelly 2s ease-in-out infinite alternate;.
.fortnite-wrapper {
position: relative;
width: 200px;
}
.fortnite-wrapper .btn.btn-display:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 2em;
background-color: #ff0;
-webkit-transition: background-color .3s ease-in-out;
-o-transition: background-color .3s ease-in-out;
transition: background-color .3s ease-in-out;
-webkit-box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
-webkit-animation: jelly 2s ease-in-out infinite alternate;
animation: jelly 2s ease-in-out infinite alternate;
-webkit-transform-origin: 50% 50% 20px;
-ms-transform-origin: 50% 50% 20px;
transform-origin: 50% 50% 20px;
}
#keyframes jelly {
0 {
width: 100%;
}
100% {
width: calc(100% - 20px);
}
}
<div class="fortnite-wrapper">
<button class="btn download-button btn-primary btn-display play-free">
<span>Fortnite</span></button>
</div>
Edit: In order for the animation to only affect the left side of the block without changing the rest of it, I recommend animating the property width instead. If you use it in combination with position: absolute and right: 0 the element will in- and decrease in size on the left side.
.outer {
margin: 50px;
}
.button {
border: 1px solid black;
border-radius: 3px;
width: 100px;
height: 30px;
display: block;
background: linear-gradient(to right, black 50%, white 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all .5s ease-out;
}
.button:hover {
background-position: left bottom;
}
.text {
text-align: center;
font-size: 16px;
line-height: 30px;
color: black;
transition: all .6s ease-out;
display: block;
}
.text:hover {
color: white;
}
<div class="outer">
<div class="button">
<div class="text">button</div>
</div>
</div>
I created a button. This button is defined by these CSS properties:
#button {
width: 50px;
height: 50px;
border: 3px solid #F1F2F0;
text-align:center;
background-color: #02BFC1;
display: table;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right:0;
-webkit-transition: all 0.5s ease;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
animation: blinker 2s ease infinite;
}
This button blinks using the animation blinker that smoothly changes the background-color from a darker to a lighter blue, defined like this:
#keyframes blinker {
50% { background-color: #03FCFF; }
}
It also has a hover animation:
#button:hover {
background-color: #F37C2B;
transform: scale(1.1);
box-shadow: 0px 0px 70px rgba(0,0,0,0.4);
animation-name: none;
}
My problem is this: the hover animation used to be completely smooth before I added the blinker animation. Now, it just instantly changes background-colorto the orange, while the transform: scale(1.1) still changes smoothly.
How can I make it so that hovering the button pauses the blinker animation and smoothly changes background-color, and that the animation resumes by mouse-leaving the button? If possible, I would like to use only CSS for this and no js.
If you prefer, you can modify this JSFiddle to respond.
EDIT: This doesn't work only on chrome, how can I make it so it does?
You have too many things going on in your CSS. As a general rule try to keep things as simple as possible if you want your code to be fast and efficient.
Here is your working code with some explanations:
button {
width: 50px;
height: 50px;
display: block;
border: 3px solid #F1F2F0;
background-color: #02BFC1;
margin: 30px auto;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
animation: 2s ease infinite blinker;
transition: background-color .5s ease, transform .5s ease, box-shadow .5s ease; /* it is best to select the properties you want to transition instead of using 'all' */
}
#keyframes blinker {
50% {
background-color: #03FCFF;
}
}
button:hover {
background-color: #F37C2B;
box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.4);
animation: none;
transform: scale(1.1);
}
<button></button>
Don't forget to use the prefixes needed for your project.
I have this bar graph made with html/css/jquery, when you hover a bar you get more info. This "pop up" only gets on top of the previous bars but no the following ones?
Why?
HTML
<li>
<div style='height:87%' class='graphs'>
<span class='info'>2014-05-07 downloads: 461</span>
</div>
</li>
CSS
#bars li {
display: table-cell;
vertical-align: bottom;
z-index:1;
position:relative;
}
#bars li .graphs{
border-radius: 5px 0px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 1px 1px;
box-shadow: rgba(0, 0, 0, 0.8) 0 1px 1px;
background-image: linear-gradient(to bottom, #32CD32 0%, #228B22 100%);
background-clip: content-box;
width:100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
display:none;
opacity: 0.8;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
z-index:1;
cursor:pointer;
position:relative;
}
#bars li .graphs:hover{
-webkit-transition: margin-bottom 1s,opacity 1s ease-out, -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
transition: margin-bottom 1s, opacity 1s ease-out, transform 1s;
margin-bottom: 20px;
filter: alpha(opacity=100);
opacity: 1;
}
#bars li .graphs span.info{
display:none;
padding: 5px;
border-radius: 3px 3px 3px 3px;
background-color:rgba(240, 232, 232, 0.9);
position:absolute;
top:0px;
left:-100px;
z-index:3;
width: 100px;
box-shadow: rgba(0, 0, 0, 0.8) 0 1px 3px;
}
More info here:
http://jsfiddle.net/4PNmD/2/
All of #bar's li children share the same z-index. So as they're being added in the DOM, they're seemingly stacking on top of one another semantically. You could add
#bars li:hover {
z-index: 10;
}
to get it function properly.
The issue is due to each one of your li's establishing its own stacking context. z-index only is used for elements within the same context.
The reason that the box appears above bars to the left of its own bar, and is hidden under bars to the right, is because ordering comes into play. The li's are in the same stacking context - the children across li's are not! And since the li's all have the same z-index, the specification indicates that the order of the elements determine which element gets stacked over the other.
ref: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Please, how can I get an effect like the one in the upper right menu, with just CSS3? (mouse over -> circle shrinks and fades in, mouse out -> circle expands and fades out)
http://wpkuzen.com/html/architex/
I tried to look at the code and it's messy, nand couldn' find a tutorial that explain this...
Thanks in advance!
Take a look at this article and demo. They have very similar transitions/animations to the one which you need.
Here's an example:
FIDDLE
Markup:
CSS
.hi-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 30px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: green;
box-shadow: 0 0 0 4px #FFF;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.hi-icon:before {
content: "X"; /* place image here */
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}
.hi-icon:hover:after {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
.hi-icon:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
left: -2px;
width: 100%;
height: 100%;
border-radius: 50%;
padding: 2px;
z-index: -1;
background: #FFF;
-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
-moz-transition: -moz-transform 0.2s, opacity 0.3s;
transition: transform 0.2s, opacity 0.3s;
}
This effect is done by using the CSS transition. You have one property and instead of change that property instantly (on hover or fadeout) you change that property over time.
Here you have a nice link helping you to hopefully achive your goals. :)
link to transition
I really don't understand your comment "I tried to look at the code and it's messy".
You have a fully indented CSS with comments !
directly copy-pasted from your link:
/* Positioning the icons and preparing for the animation*/
.nav i {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0.4em;
border-radius: 50%;
font-size: 2.2em;
box-shadow: 0 0 0 30px transparent;
background: rgba(255,255,255,0.1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: box-shadow .6s ease-in-out;
-moz-transition: box-shadow .6s ease-in-out;
-o-transition: box-shadow .6s ease-in-out;
-ms-transition: box-shadow .6s ease-in-out;
transition: box-shadow .6s ease-in-out;
width:1.1em !important;
}
/* Animate the box-shadow to create the effect */
.navbar .nav a:hover i,
.navbar .nav a:active i,
.navbar .nav a:focus i {
box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
-webkit-transition: box-shadow .4s ease-in-out;
-moz-transition: box-shadow .4s ease-in-out;
-o-transition: box-shadow .4s ease-in-out;
-ms-transition: box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out;
}
James here. I have a quick question. I want to add a similar image hover affect like on http://themaxdavis.com , but for some reason I can't quite get it. I want to add to my code when you hover over the picture post (.pic), a black overlay with a 0.5 opacity to fade in over the image itself. Also, if anyone could help me figure out a way to put text inside that black overlay also like Max Davis, that would be AWESOME. Here is the code to the .pic element.
.pic { position:relative; overflow: hidden; float: left;
{block:IndexPage}width:250px;{block:IndexPage}
{block:PermalinkPage}width:500px; margin-top: 39px; margin-bottom:
15px;{/block:PermalinkPage} {block:IndexPage}margin: 15px 15px 0px
0px;{/block:IndexPage} background-color: #FFF; z-index: 1;
{block:IndexPage}box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
-webkit-transition: box-shadow 0.3s ease-out;
-moz-transition: box-shadow 0.3s ease-out; transition: box-shadow 0.3s
ease-out;
-o-transition: box-shadow 0.3s ease-out;{block:IndexPage} }
My website URL is http://-respawn.tumblr.com
PS I'm on my way out the door now, so I will not accept the answers right away, but I will accept them and read them all as soon as I get home.
Cleaned up code:
Assuming that .pic will contain the picture as background or will be an img element.
.pic
{
position:relative;
overflow: hidden;
float: left;
width:250px;
width:500px;
margin-top: 39px;
margin-bottom: 15px;
margin: 15px 15px 0px 0px;
background-color: #FFF;
z-index: 1;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
}
Create an empty div element inside .pic and give it this style.
#emptyDiv
{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: transparent;
-webkit-transition: box-shadow 0.3s ease-out;
-moz-transition: box-shadow 0.3s ease-out;
transition: box-shadow 0.3s ease-out;
-o-transition: box-shadow 0.3s ease-out;
}
#emptyDiv:hover
{
background-color: rgba(0, 0, 0, 0.5);
}