(Sorry, i cant provide any code of what i am asking, because i dont really know where to start.)
About the Meaningful Transitions point in the Material design guidelines.
I m very interested in creating such smooth transition inside my web apps (especially the one where the profile picture goes from an activity to another), but i wonder how to do it using html?
Is CSS3 transition enough to do it (which style-property should i
use to move an element straightforward)?
Should i use JS/Dart to move the "shared view element" using the weird coordinates system?
Can it works on dynamic/scrolling layout or should i forget about it?
Is there any tips to move visually an node from a container to another in a smooth transition?
In a nutshell, Is HTML ready for such of stuff (any code/documentation would be appreciated)? Should we wait for some polymer tools to do this? Or should we simply dont do this in web?
Check out the Polymer core-animated-pages element https://elements.polymer-project.org/elements/neon-animation
They've got some great demos that are very similar to the meaningful transitions https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&active=neon-animated-pages
The "Icon to top bar" demo is probably the most similar to the one you referenced (you can just view the source to see the Polymer web components used, along w/ the necessary CSS & JS
You can import into your project via Bower:
bower install Polymer/core-animated-pages
And wrap your elements with and define transitions with an attribute like
Here's the code for that cross-fading example:
<style>
#hero1 {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: orange;
}
#hero2 {
position: absolute;
top: 200px;
left: 300px;
width: 300px;
height: 300px;
background-color: orange;
}
#bottom1, #bottom2 {
position: absolute;
bottom: 0;
top: 0;
left: 0;
height: 50px;
}
#bottom1 {
background-color: blue;
}
#bottom2 {
background-color: green;
}
</style>
// hero-transition and cross-fade are declared elsewhere
<core-animated-pages transitions="hero-transition cross-fade">
<section id="page1">
<div id="hero1" hero-id="hero" hero></div>
<div id="bottom1" cross-fade></div>
</section>
<section id="page2">
<div id="hero2" hero-id="hero" hero></div>
<div id="bottom2" cross-fade></div>
</section>
</core-animated-pages>
Polymer doesn't do anything of these things. This is all just HTML+CSS+JavaScript. And you can do all of this without Polymer.
All Polymer does, is it allows you to encapsulate these things in a custom element.
The core-elements and paper-elements are some examples. You can build such elements yourself or clone and modify/extend them.
As far as I know, polymer is supposed to be able to do all of this. If not yet, it should be able to soon.
The basic idea behind polymer is to allow you to make consistent interfaces across all devices (web, computer, android). So if Android L can do those transitions, then they most certainly mean for polymer to also have that capability.
Related
I am using HTML dividers like this
<div class="divider-90"></div>
<div class="divider-180"></div>
and
.divider-90 {
height: 90px;
width: 100%;
}
.divider-180 {
height: 180px;
width: 100%;
}
instead of margins on elements.
I want to create a function that generates the div height depending on the class name.
Thank you in advance.
Since SASS generates CSS, and with CSS you can't have dynamic class name, SASS won't be able to do it, but you so something like this (i personally don't like this solution):
#for $i from 1 through 1000{
.divider-#{$i} {
height: #{$i}px;
width: 100%;
}
}
I personally don't like this solution because it will blow your CSS file size, and so it will takes a lot longer to be loaded and parsed, so please, consider using some "chunk based" version, something like every 10px instead every 1px
If you really really need this functionality, i think the best solution will be to use some JS script do generate this height automatically when the page is loaded
I'm using in my AngularJS project md-tooltip.
I tried to set the position by CSS by this way:
<md-tooltip class="tooltip" hide-sm hide-xs show-gt-sm><span>{{item.title}}</span></md-tooltip>
and :
.tooltip {
position: relative;
right: 20px;
}
It doesn't work. Is it impossible to do it?
Thanks for help.
Is definitely not impossible. Seems is working on
Fiddle (example here)
just by setting the class.
.tooltip {
position: relative;
right: 20px;}
I would suggest you to use the props of the tooltip if you can ( mdTooltip ) tough.
If your code is still not working, probably something overwrite it. Or is just not working the way you expect it?
So I'm fairly new to coding and I set a task for myself, that being to recreate my WordPress site from the ground up using HTML, CSS and javaScript, now as I have looked for resources online for the best method ongoing about making a responsive navigation bar, of course, I came across an example on W3Schools.
Now the question I have is what is the best way to go about Adjoining Classes, my CSSLint picks it up as bad practice(At least that's what I'm taking away from it) so I'm met with a conundrum whether to stick with them and just make it incompatible for IE 6 (I believe) or to just learn the use the better standard.
#media screen and (max-width: 600px) {
.cMainNav.responsive {
position: relative;
}
.cMainNav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.cMainNav.responsive a {
float: none;
display: block;
text-align: left;
}
}
I think you're misunderstanding. Adjoined classes are not a standard. This is just one of the many parts of css specificity.
If you have an element with two classes:
<div class="square red"></div>
<div class="square green"></div>
You can target their combination like so:
.square.red {}
CSSLint may be warning you that making really long, complex selectors like this is less than ideal. You never want to end up with something like this:
.square.red.fixed.flex.button{}
If you need really specific targeting, you're better off assigning an id or a specific class altogether.
<div id="loginModal"></div>
In general, all of these are just tools at your disposal. Read more about specificity and keep in mind that there's really no "wrong" option here, but any of these options can be abused.
I have a angular project which use a library called smDateTimeRangePicker , it include the code below:
Link Here
.action {
height: 30px;
margin-bottom: 0;
position: absolute;
bottom: 0;
width: 100%; }
However, in my project, there is a code which also include action class
<div flex class="action cell">
And it is impacted by the CSS above, how to avoid it?
This question considered about these points below:
There is a way that can avoid the CSS impact between project and library.
The library uses a bad practice, it must avoid impacting project. It is a bug for the library and must be fixed.
This impact usually happens, so I need to change my project to avoid the conflict
Rename your project action class to something else is the cleanest way. Else you have to resort to fixes that are considered bad practice like !important, however these still get the job done.
this happens to me quite frequently, so to solved it I just add one parent class to my page or that particular section
<div class="my-unique-class">
---
<div class="action">
---
</div>
---
</div>
.my-unique-class .action {
height: 30px;
margin-bottom: 0;
position: absolute;
bottom: 0;
width: 100%;
}
You can avoid such kind of situation by increasing specificity of your css rules.
There are multiple ways to do so:
Include all third party CSS files before your custom file so that css rules with same priority (In Your Case) can override the rule in third party CSS file.
Above solution should work in most of the cases, but there are chances that Third party CSS might come with higher priority orders, so you can increase weight of your css by adding class at your parent tag as:
.parent > .action {
/ * Some CSS Code */
}
<section class="parent">
<div flex class="action cell"></div>
</section>
MDN has great article about CSS Specificity here
If you can't change your class name, you could make your styles unique to your element by doing:
.action.cell {
/*your styles here*/
}
By leaving out the space between action and cell you are saying that both classes are on the same element. Also, make sure you are loading your stylesheet after the 3rd party stylesheet so that your styles are being applied over theirs.
When you have a CSS rule, you can use !important before semicolon:
background: black !important ;
It marks your rule as "important" and it cannot be changed with any CSS file.
Only inline CSS can overwrite it:
style="background: blue !important"
At the moment, my usual approach to supporting right-to-left (RTL) languages in a template is to simply add a .rtl class to the body tag, then go through all my existing left-to-right CSS and add left/right overrides as appropriate.
For example, my site menu might be positioned like so by default as below:
.site-nav {
position: absolute;
left: 0;
top: 0;
}
...and then manually overridden for RTL languages this way (using some template logic at a CMS level to add the .rtl class to body):
.rtl .site-nav {
left: auto;
right: 0;
}
My issue is that this seems labour-intensive and not very effecient. I was wondering what solutions others might have come up with to make this simpler.
As an aside, I'm using a Compass environment to generate my CSS. But I don't know how to escape back from the current nesting to write a .rtl modifier adjacent to the current element's default styles. This in theory would be extremely useful, however, but I simply don't know if it's possible to perform a lookup all the way back to the body element or not whilst within a deeply-nested Sass rule.
Add your .rtl-class whereever you want to change the textflow. Even when you don't want to change it (for "normal" languages).
Don't use the class in your default css-file.
Add a css-file which only includes
.rtl {
left: auto;
right: 0;
}
whenever you have a rtl-language. In case you want all your divs to behave that you you could replace .rtl with div as well.