i'm trying to migrate my code from css to velocity for better look and feel :)
can some one please advice on what is the best way to accomplish this?
when user hovers an menu item its transforms (scale) in size, basically its a transition from one image to other
this is the pure css:
.site nav li a.active-page {
background-image: url('../images/img/menu-1-hover.png');
height: 94px;
right: -8px;
width: 94px;
-webkit-transition: all 0.09s easy;
-moz-transition: all 0.09s easy;
-ms-transition: all 0.09s easy;
-o-transition: all 0.09s easy;
transition: all 0.09s easy;
}
.site #menu-2 {background-image: url('../images/img/menu-2.png');
}
.site #menu-2.active-page {background-image: url('../images/img/menu-2-hover.png');
}
Thanks
There's no way on the web platform to animate from one image to another. You could animate between 2 divs with different backgrounds by animating opacity, or you could animate background-position.
Nevertheless, if scale is what you want to animate, you could use Velocity to animate scaleX and scaleY of an element with an image.
Related
Example
import styled from 'styled-components';
import { ReactComponent as SvgLogoUnstyled } from 'src/assets/svg/logo.svg';
const SvgLogo = styled(SvgLogoUnstyled)`
height: 40px;
width: 40px;
#media (max-width:1427px){
width: 17px;
height: 17px;
}
`;
export default SvgLogo;
When changing screen size, the svg viewBox remains at 40px, but gets cropped at 17px.
In html css this does not happen. Both the viewBox and dimensions get updated.
Can anyone advise a fix?
Note: Using transform scale - does not resolve this problem, because it keeps the width at 40px which adds unnecessary margin, when I do actually need the logo to be at 17px width.
transform: scale(0.42); /*17 / .4*/
I have managed to hack it a little but its ugly
#media (max-width:1427px){
transform: scale(0.42); /* transform: scale(0.42); /*17 / .4*/
margin: 0 -12px 0 4px; /* added minus margin to reset ( (40 - 17) / 2)*/
box-sizing: content-box; /* enable expansion without cropping if additional margin top/bottom*/
}
Ok it turned out to be simple.
I was using css to set the width and height and change it on mediaquery, but the actual svg itself had a width,height on it. Simply removing the width, height from the svg, but keeping the viewBox, ensured the svg retained its aspect ratio.
Answer here: https://css-tricks.com/scale-svg/
Point going forward, when creating svgs, remove the width, height attributes from them before inserting into html and always use css to set the dimensions.
I'm currently developing a site which requires headings as such:
My initial idea was to do this with border-bottom, but how would I limit the width of the border so that it doesn't go all the way across? The border needs to stop when it gets to the text.
Is this possible?
h1 {
background-color: #fff;
line-height: 1;
margin: 0;
display: inline;
position:relative;
z-index: 1;
}
h1:after {
content: '';
display: block;
border-bottom: 2px solid;
position: relative;
z-index: 0;
margin-top: -7px;
}
The length of the border is decided by the size of the element it is bordering. You could create another <div> inline with the text with border-bottom: 1px; and the other borders set to 0. You could then change the margin or width of the <div> to alter the length of the line. Note that you'd have to set a width, because an empty <div> has a width of 0 by default, so won't display.
Another possible (but not recommended) way to do it would be to use a <hr> but these are not well supported in HTML 5, so I would choose the first method personally.
A solution I can come up with is to give the title the same background-color as the page's background, and then to either transform: scale() the title up so that it overflows with the border of its parent, either scale the parent down so that its border hides behind the title's background.
See here for an example:
http://jsfiddle.net/WjRqC/1/
Oh, also, scaling can be replaced by making the title position: relative and moving it downwards a few pixels (and giving it a bit more vertical padding if you don't want the text too close to the line). Actually this is probably a better idea than scaling, because it's not CSS3, so it's more compatible.
Lookie here:
http://jsfiddle.net/7affw/1/
What is the preferred / cleanest method to draw a 1px border between two Susy grid items, in the center of the gutter?
Susy creates a gutter by adding a margin-right to a grid item, so I can't simply add a border-right (like, for instance, you can do with Zen Grids, which creates gutters by applying half a gutter-width of padding on both sides).
I guess it can be done using the with-grid-settings() mixin to define an alternative grid without gutters, but that feels like a messy solution.
There isn't a great solution at the moment, but I hope to have one in the next major release. What you can do, is create your own math using the Susy functions (really the most powerful part of Susy). Something like this:
.left-column {
#include box-sizing(border-box);
float: left;
width: columns(2) + gutter()/2;
padding-right: gutter()/2;
margin-right: gutter()/2;
border-right: 1px solid;
}
I have a node in JavaFx-application that has an ImageView, which has the size 200,200.
In CSS-file for that node I define an inset for background and border:
.my-item {
-fx-background-insets: -15;
-fx-border-color: #ccc;
-fx-border-style: solid;
-fx-border-insets: -15;
}
This leads to an ImageView with a border that has 15px of space. Alright. Later in code I want to get the bounds for this item including this 15px for the border.
But the methods getBoundsInParent().getWidth() or getBoundsInLocal().getWidth() return 200px. So how can I get the size that I see on the screen?
ImageView doesn't have an -fx-border-insets and -fx-background-insets properties. Thats why its width doesn't change. If you try the same with button method getBoundsInParent().getWidth() will return width with borders.
I'm working on a resizable page with a sidemenu to the right, and it almost works as supposed on this simple example:
http://pastehtml.com/view/1do8cy9.html
The problem though is that position auto and min-width dont react as expected. If you drag the browserwindow smaller than 500px (as the min-width is set to), the red sidemenu continues over the green content..
How do I make the sidebar stop when it reaches the min-width, fx 500px?
The absolute positioned div should be inside the min width div which should have position relative
Edit, better explanation:
For the sidebar: add top: 0 to the red sidebar and place it inside the min-width container.
For the container: replace the margin-right property with padding-right and add position:relative
I have a fix !
It's weird though:
body{
position:absolute;
top:0;
left:0;
bottom:0;
min-width:1300px;
width:100%;
overflow:auto;
padding:0;
margin:0;
}