I believe it's possible to add css to pseudo elements in CSS even though it is a working draft currently.
However, upon trying in the latest version of Chrome I can't seem to get it working.
I want the :after element on my header to transition in instead of looking so blocky.
I have added the transition to my after element but it's still the same, have I specified the CSS as below;
#main-header:after {
height: 95px;
content: " ";
width: 100%;
left: 0;
position: absolute;
background: url(http://stbenedicts.justinternetdns.co.uk/wp-content/uploads/2016/07/waves-test-1.png) top center;
z-index: 1;
top: 144px;
}
#main-header.et-fixed-header:after {
-webkit-transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
-moz-transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
top: 54px;
}
So that when scrolled, the after element should ease in and not be one solid movement.
Any advice?
EDIT: http://stbenedicts.justinternetdns.co.uk/ <- playground
I'm working on the assumption that the transition(s) are supposed to take place when the .et-fixed-header is added.
But what are you transitioning?
transition:
background-color 0.4s,
color 0.4s,
transform 0.4s,
opacity 0.4s ease-in-out;
But from what to what?
You aren't setting initial values for those properties or end values.
The only thing you are changing (except the background, kinda) is the top value and you aren't transitioning that at all.
So you would need to set actual values on your #main-header rule to start with and new different values on your #main-header.et-fixed-header rule
Try setting the transition properties (-webkit-transition, -moz-transition, transition) on the base class (#main-header:after).
#main-header:after {
height: 95px;
content: " ";
width: 100%;
left: 0;
position: absolute;
background: url(http://stbenedicts.justinternetdns.co.uk/wp-content/uploads/2016/07/waves-test-1.png) top center;
z-index: 1;
top: 144px;
-webkit-transition: all 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
-moz-transition: all 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
transition: all 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
}
#main-header.et-fixed-header:after {
top: 54px;
}
By defining the transition on the base class the browser knows to transition when the modified condition — the addition, presumably, of et-fixed-header in your example — occurs. Otherwise, it only applies the transition properties to the class when that condition is present; meaning that you would only see the transition if/when that modifier is removed. This article does a far better job of explaining it.
EDIT: I hadn't noticed you were only specifying background-color for your transition property. In addition to moving the transition properties to the base class, you'll have to either add the other properties (the syntax is explained here, or broadly transition all properties
I am still new in dreamweaver and still trying to learn new things.
I currently can do an hover image then an image will fade in.
Like below.
#home1 {
background-image:url(bestseller.jpg);
background-size:100%;
background-position:center;
background-attachment:fixed;
margin-top:84px;
background-color:#F9C;
width:98%;
height:500px;
}
#home1 {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#home1:hover{
background-image:url(bg.jpg);
}
But the thing is, what should the ":hover" be if I want it to "on click" ?
And what should I type if I wanted to fade an image in (for example home2) by clicking the home1 ?
Note : Without using an URL, so it will still in the same page. And I'm still new so I don't know any relation between javascript and dreamweaver.
I'm attempting to create a CSS transition when an element receives a certain class. So far the toggle change works (which means that ng-class is working properly), but the animation doesn't happen.
Here's my code:
.intro-text{
height:auto;
-webkit-transition: height 200ms ease-out;
-moz-transition: height 200ms ease-out;
-o-transition: height 200ms ease-out;
transition: height 200ms ease-out;
}
.intro-text.hide{
height:0;
}
And the HTML:
<div class="intro-text" ng-class="{'hide':clicked}">
<h1>Howdy stranger!</h1>
<h3>Use the form below to search for an artist and start building your record collection!</h3>
</div>
What am I missing?
EDIT: I've narrowed the problem down to bootstrap. If I include the bootstrap.min.css, the animation doesn't work, without it, it works perfectly. Any idea why guys?
EDIT 2: Fixed it! The problem is that both .hide and .hidden are classes defined in Bootstrap, so it was overriding my styles, parsing a display:none; before the animation was visible. When changed the class to another name, it got fixed : )
Actually your issue is not about Angular + ng-class, but about a css3 transition between height: auto and height: 0.
Here is a SO question about this: http://jsfiddle.net/Y3uxy/
The solution is to do the transition on max-height instead of height, and to set max-height to something big enough.
.intro-text{
max-height:999px;
overflow: hidden;
-webkit-transition: max-height 200ms ease-out;
-moz-transition: max-height 200ms ease-out;
-o-transition: max-height 200ms ease-out;
transition: max-height 200ms ease-out;
}
.intro-text.hide{
max-height:0;
}
Here is a demonstration: http://jsfiddle.net/Y3uxy/
I'm trying to add an accessibility option to a website, where you can click some buttons ' A A A ' and these would change the size of the text on the whole site, using HTML5 and CSS3 only. I don't want to use jQuery or Javascript to do it.
Based on this idea: http://www.dynamicdrive.com/dynamicindex9/textsizer.htm
Any help would be great!
Maybe you can do it like this:
#element{
font-size:12px;
}
#element:click{
font-size:14px;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
The title may seem little bit confusing so I draw a sketch, so you can understand more what I want to achieve: https://www.dropbox.com/s/luoiz4erg4jfk8y/howitshouldwork.png
The tab function is based on liquidslider
I've start on the transition part, but I need some help...
CSS:
li a:onClick + .bottom {
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
bottom: 400px;
}
http://jsfiddle.net/ea9VT/1/
It should not be a scroll.
Can anybody explain how this should be done?
My Suggestion is you can use Jquery for this Animation. I hope this done very simple by using JQuery animate function.