CSS animation help. Code explanation required [duplicate] - html

This question already has answers here:
How to select classes with spaces
(5 answers)
Closed 8 years ago.
I have been trying to figure out this piece of CSS animation . What I am not able to understand is how did the creator manage to elongate the toggle so smoothly , without any keyframe animation or transform property ? Also on the HTML side, what are the <b> tags doing ? If you notice the b tags have classes assigned to them as
<b class="b switch"></b>
but the same class is selected from CSS as
.switch{
}
How does that work without the "b" ?
Thanks in advance.

The animation is just a css transition with a very small delay. Look at the transition, transition-property and transition-delay calls in your codepen example that are like:
.check:checked ~ .switch {
right: 2px;
left: 22px;
transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
transition-property: left, right;
transition-delay: .05s, 0s;
}
And then there's also another cubic-brezier transition applied to the .track element when the checked element needs to return to its original css and position.
The cubic brezier is a curve type used in vector animations and this curve (and its parameters ilsted in brackets) combined with the transition delay is what accounts for the smoothness.
The basic idea behind our the above code block is:
The transition duration will be for a total of .35s (because transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);) and it will translate accross the css right and left values in accordance to its transition-property: left, right;. In addition, there will be a small delay time added to the elements transition values. The transition of the left value is passed a delay of .05s while the right property is given no delay by passing it a delay 0s.
For the cubic-bezier transition itself, it's a little more complex but don't worry not too much. You can think of each of the 4 values given in brackets as points on the x and y axis that control the velocity at which the element will transition at any given moment during its transition sequence of cubic-bezier(P0,P1,P2,P3); In other words, it smoothes out the animation by making the animation timing non-linear.
For more about cubic-brezier transitions see this tutorial and demo: http://www.hongkiat.com/blog/css-cubic-bezier/
The <b> tag can be used to denote bold text. Here it's not really doing that though. Often designers will use <i> (which is italics) or <b> tags as a place holder for some element which they've assigned a background img or other visual styling too because since the <b> tag only effects text they can be sure their css won't be effected by the html call.

Related

Is it possible to prevent the opacity of HTML elements from affecting the opacity of the TAB helpers? [duplicate]

This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 1 year ago.
(I wrote "tab helpers" in the title, which I guess is an invented terminology. Please, correct me.)
In the snippet below there's two checkboxes, one of which has opacity reduced to 20%.
.checkbox1 {
opacity: 100%;
}
.checkbox2 {
opacity: 20%;
}
<div class="checkbox1">
<input type="checkbox" id="myCheck1">
</div>
<div class="checkbox2">
<input type="checkbox" id="myCheck2">
</div>
If I tab-select the second one, I see this (well, not the stuff in blue):
Is there anyway to have that yellow thing retain 100% opacity even if the element's opacity is set via CSS to other than 100%?
I guess this might be all up to the browser, but I'm really not sure.
The yellow stroke is the outline and is notoriously hard to style since you're correct that it is browser-specific. User-defined styles can and often are disregarded wholesale by the browser.
As part of the element, it is affected by the value of the element's opacity property. This means you cannot set its opacity directly.
If you want to make the element semi-transparent without affecting the outline, you should style the other parts of the element with RGBA colors so you can set the transparency per-part. (see: I do not want to inherit the child opacity from the parent in CSS or #Rohit Azad Malik's answer to How to apply an opacity without affecting a child element with html/css?).
There are ways to style a checkbox (or other input types), but they're browser-specific.

Why does id not override class in bootstrap?

I am working on front-end web development and keep running into the same issue. I am using bootstrap styling rules (bootstrap.css) with a few modifications.
HTML
<div class="container">
<div class="jumbotron">
<button type="button" id="jnav">Restricted</button>
</div>
</div>
style.css
#jnav{
opacity: 1;
}
From bootstrap.css
.jumbotron {
opacity: 0.75;
}
Basically, I wanted to use ID to override the opacity, so that the button would have an opacity of 1 while the rest of the jumbotron would have an opacity of 0.75. The problem is that the button's opacity is remaining at 0.75 (so it is annoyingly the same as the jumbotron background)! Does anyone know what's up? Is there something basic that I am missing? I thought that id was a more specific attribute and would override class styles.
Opacity doesn't inherit in the same way as things like color or background. Setting the opacity of an element makes that element and everything it contains render at that opacity relative to whatever is behind it. The opacity property of chile element then compunds like #techfoobar said. You can read more here.
Basically, what you need to do is set the opacity for each child of .jumbotron separately while leaving the opacity of .jumbotron at 1.
It's hard to say given the limited information, but it sounds like you're trying to place a button (#jnav) inside the jumbotron which has an opacity. Since the jumbotron has an opacity of 0.75, everything inside of it will follow that same opacity regardless of any other rules. This is not a problem with class/ID specificity or bootstrap, more just a general styling nuance.
Basically what Jcubed just said above.
Typically the selectors used in Bootstrap.css are very specific. The selector might be something like body > div > .jumbotron which is very specific. In this case simply using the element Id won't override the css. You will need to match the specificity or be more specific. For example body > div > #jnav would effectively override the css as they are both equally specific.
This of course assumes that the css you want to use comes after the css you are replacing. Either after it in the same css file or a seperate css file included after the base Bootstrap.css.
If worst comes to absolutely worst, then you can use:
#jnav{
opacity: 1 !important;
}
But this shouldn't need to happen unless you are absolutely desperate.
They do not override each other. They both applied, but #jnav is within .jumbotron. So .jumbotron's opacity will apply on top of #jnav's opacity.
If you just want the effect, you should use rgba
Example:
#jnav{
background: rgba(111, 111, 111, 0.1);
}
The last index is the opacity of the background, and it will not overlap with your font.
#jnav does have an opacity of 1. But that would be, in a sense, relative to its parent .jumbotron with an opacity of 0.75.
As techfoobar mentions, opacity is compounded with the inherited value. And hence, #jnav's opacity will effectively be 1 * 0.75.
Here's what MDN has to say:
The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.
View this question, if you want to achieve a transparent background but not the content effect.

CSS3, HTML5, Javascript: How to make divs fade in? [duplicate]

This question already has an answer here:
Fading in and out divs with css
(1 answer)
Closed 8 years ago.
I have a small problem that I'm really scratching my head as to how to implement. I would like to know how to make a dynamically generated div fade in only. The div(s) are dynamically generated by Javascript code. How do I make it so that the div fades in onto the page? I cannot use jQuery or .innerHTML().
Create a rule in your stylesheet with a selector that matches the div and which sets a transition property.
Create another rule that matches the div if it is a member of an additional class and style it to be invisible (opacity is a good property to use for this).
Create the div
Add the class to the div
Add the div to the document
With a minimal setTimeout (to allow the browser to repaint the document with the div added), remove the class
CSS:
#fade-in-div{
transition: 1s;
-webkit-transition: 1s;
opacity: 0;
}
JS
//generate new div
document.write("<div id='fade-in-div'>New Div!</div>");
//make opacity = 1. This should take 1 second to make (1s fade).
document.getElementById("fade-in-div").style.opacity = 1; //this should take 1 second

CSS3 transition delay with easing

i'm having a weird issue which i can't figure out (searching for a solution for 2 hours now).
I'm using a slider, which when slide is selected shows a caption (H3 and p). Everything works fine except opacity ease-in-out on caption elements when using transition-delay property.
In jsfiddle i've setup a demo. When clicked next or previous, the caption elements show up with a delay, but opacity easing on them doesn't work for a smooth transition. Any help appriciated :)
Now, this might just be me misunderstanding what you are trying to do, but it seems like you are incorrectly assuming inheritance of the transitions, as well as using imprecise selectors. Basically, the line #test input:checked ~ #full > .caption selects the .caption if any of the checkboxes are checked, i.e always.
In the end, you never really tell the elements to actually animate their opacity.
By rewriting your code a bit, I came up with this which should work a bit better.
As a side note, you shouldn't use duplicate ids (#full), if anything because it will break Javascript if you try to access it. Use space separated classes instead.

how do I get this effect?

http://www.apple.com/why-mac/
has a cool little thing where you hover your cursor over the image and it scrolls upward to show hidden text.
I'm wanting to create a mockup with that same effect, where I have the mockup as one flat background image and then place the scrolling images on top of it.
Any ideas as to how I can do this?
You can do this with jQuery scrollable: http://flowplayer.org/tools/scrollable/
Looking into the source for the page (with Firefox/Firebug, by the way, which is awesome for this kind of reverse-engineering) I see that the javascript framework Scriptaculous is in use. Specifically, the BlindUp animation appears to be the one in use on that page.
Apple uses Scritaculous for that effect.
CSS Transitions?
(From the link above):
Transitions are specified using the following properties:
transition-property – What property should animate, e.g., opacity.
transition-duration – How long the transition should last.
transition-timing-function – The timing function for the transition
(e.g., linear vs. ease-in vs. a custom cubic bezier function).
transition – A shorthand for all three properties.
Here is a simple example:
div {
opacity: 1;
-webkit-transition: opacity 1s linear;
}
div:hover {
opacity: 0;
}