I am using border-image property to create styled components with 9-slice. Also I am using css transform: scale(x) property to scale down/up my elements based on screen sizes. The issue I am running into is that my 9-slice component looks fine when scale is set to a whole number like 1, 2, 3... but if its a float then the border shows 9-slice lines/gaps and I am having hard time fixing it.
I have tried setting different values for border-image-slice as well as the scale. Initially thought that it was causing this issue when the number after decimal point is odd but that was an odd thought anyway.
<div class="Primary-Back-Button" style="transform: scale(1.2);">
<button class="Primary-Button" id="">
<div class="Primary-Button-Content">Button</div>
</button>
</div>
Expected result would be to show no lines/gaps on the border when using scale or I would be willing to change how we scale the things too. I basically want to keep the same layout on a desktop app no matter what the screen size is. This is for a desktop game that I am working on and it uses JS on UI side.
Expected result when scale is a whole number which is set to 6 in this case:
Notice the lines when I set scale to 6.25
If anyone ever run into the same issue which is very unlikely but I did figure out a solution so I am gonna put it out there.
You will need to add perspective: 1px; to the root styles() and then wherever you are using transform: scale(x); make it transform: translateZ(0) scale(x);
I am still trying to understand why that works but at least works. And its CSS so there could be some magic involved.
Related
So I have something like this :
return (
//set mushroom forest background, make it fill screen
<div className="App" style={ {
backgroundImage: `url(${pools})`,
backgroundPosition: 'center',
backgroundSize: 'contain, cover',
backgroundRepeat: 'no-repeat'
}}>
I want to use both cover and contain for my background image, but it seems to choose 1 and render with it rather than applying both.
But when I render it with react, the image isn't stretched to the page. It only seems to pick up the first of either contain or cover, and use that for rendering the image. Anyone know how to make a background image do both contain and cover in react? The syntax I have there works just fine in its CSS equivalent.
I'm really trying to assign two values to a CSS style in react, using the syntax and have it work. Right now it either fills the whole page, but cuts off part of the image, or leaves white space on the sides but displays the whole image. I've found CSS tutorials using both cover and contain at the same time, is there some special syntax I need to use in react or JavaScript to make this work?
I've tried putting two styles into an array, using two strings such as ['contains', 'cover'] but that doesn't seem to work either.
Edit: Figured out a way around it, not sure if you can do this double value assignment thing is css at all, think I was mostly misreading a guide to doing something.
"A stackblitz is worth a thousand words": https://stackblitz.com/edit/angular-zoom-crop-marker
Basically what I'm trying to do is to have a square drawn above a certain position in an image (<img>), and have that dynamically adjust to the image while being zoomed in / out and cropped. The stackblitz link has 3 views, the basic view which is a plain image, a zoomable view (which I got working as well) and a view where the imaged is "zoomed in and cropped" while being zoomable - This is where I need your help.
Should I crop using object-fit in some way? Is it better if I use a canvas to handle this? I've been at this for a whole day I and I feel my css knowledge is too limited to pull this of.
Bonus question: How would I go about to have the zoom-in zoom-out buttons add/remove one image per row using only css flex-box? (ie: not statically adding x pixles in height and width, but rather increase or decrease the size of each image so that another image is removed or added (per row) while always filling up all the available space)
Thank you in advance!
Managed to solve it myself. stackblitz updated with a working solution.
In first excuse me for my bad english, I'm French. I'll do the best ! I'm here today because for the first time i don't find an answer to my problem. Monday i need to show a demo of a website and i start to panic !
So, I have a div with a rotate (45deg). Within this div, I have two div other div in inline-block (with a css rotate (-45deg). On the left i have a slider and on the right text and shortcuts. Today I joined the slider to the left position (I work on joomla). It works well but I have a problem with the slide transition. If I click "next" or "previous", the global div (the main container) becomes blurred for the duration of transition. I did screenshots of the text on the right position (best seen the difference).
Fiddle for example :
http://jsfiddle.net/asakuras/8Pk3S/11/
Pics for example :
Before click and just after the click, during the transition :
http://www.morgann-c.com/tools/js/bug.jpg
Explanations :
I tested many possibility to clean that but no solution at this time. In the script (responsiveslides.js) the transition's are reduction by the opacity. At the line 71 of the script there's the configuration of the opacity :
visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2},
hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1, }
If I change the opacity of the hidden class to 0 there's no transition but the bug disappears ! I think this is a problem with the CSS's opacity transition. If I delete the rotate on all the div's the bug also disappears. I tested all the CSS transform but no result ...
I'm working on this bug for 3 days and it's very important for me to find a solution quickly ...
I implore you, if someone has already had this problem i take !
Have a good week end and thank you by advance ...
EDIT //// :
Firefox 30 : "Blur" on click
Chrome 35.0.1916.153 : "Blur" everywhere on page load
IE 11 : No problems, no "blur", everything works perfectly !
First off, you were missing a - in -ms-transform (this is likely the reason why there is no blur in IE - it wasn't using transform)
Secondly, removing -webkit-backface-visibility made it so Chrome only blurs on the transition (I have no idea why you added it given nothing rotates at all).
Thirdly unless you're serving IE8- or something like that you don't need filter for the rotation and -o-transform and -moz-transform are not needed, so remove them
Lastly, the reason why it's blurry is because it's being rendered by the GPU. Though this does always happen when things are generated by the GPU, but I'm thinking that it is simply being overworked by the fact that there are two rotations and in addition to the opacity transition.
Thus, as a solution you have a few options. You can either remove the opacity transition, opting for something like margin-left:-600px (this requires changing the plugin to suit), you could move the header and paragraph outside of <div id="global"> but position it so that it's in the same position as it currently is (making sure none goes outside of the rotated square), or, my personal favorite choose another plugin! The one you're using is quite outdated and there are a lot better free ones just one Google search away
Im browsing the net for more than a day now and still can't find a working solution to the followin problem.
A div should grow from nothing to 100% from the bottom up then
text should fade in
then a timeout
then text should fade-out
then div should schrink towards the bottom of the div and vanish.
.max{
max-height:100%;height:100%;color:#fff;
-moz-transition-property:max-height,height, color;
-moz-transition-duration:3s,3s,1s;
-moz-transition-delay:0s,0s,2s;
}
.min{
max-height:0%;height:0%;color:transparent;
-moz-transition-property:max-height,height, color;
-moz-transition-duration:3s,3s,1s;
-moz-transition-delay:1s,1s,0s;
}
how can I serialize max & min into one CssClass
If that's not possible how to do it in another way.
But that doesn't fly.
Anyone a nice idea or experience with this?
The transition can only work, if your start values and your end values differ.
Because your start values and end values don't differ ('you come from nothing and you go to nothing' (Always look on the bright side of life)) it is not possible in one CSS class.
What maybe possible is that you have two classes say appear and disappear and switch between them after a certain amount of time with javascript (setTimeout function)
Alright, so here is the situation...
Say I have a navbar for a site, and I allow users to change the number of links they want on this navbar. This means they could have 3, 5, 10, etc.
What I want to do is make it so that if one link is up, it only takes up, say, 1/5th of the space on the navbar. If I weren't using borders, I might do something like:
width: 18%;
padding: 0 1%;
However, I have two problems with this:
1) For 4 buttons, that's fine that it doesn't fill up the whole row. It would look ugly if the links were too wide... but when I have 6 or 7 buttons, it's got huge overflow!
2) Since I have borders, I can't use a percentage value for the borders or the widths, because I can't properly estimate how much of the percentage it will be.
Now, I know I don't have to use percentage values, but what I would ideally prefer is that the first button is the smallest possible size necessary for all the other buttons to fit properly, meaning that if I have 950px and 6 links, the first link can be about 150px while the others are 160px... that's fine. I want all the other buttons on the navbar to be equally sized, regardless of how many links there are.
I also need for it to accept a border... I figure the way to do this is to put a border in the nested div, so that way it doesn't effect the overall width of the button? This is all well and good, but I'm still plagued by the issue of not being able to design a dynamic site using the style I want if I can't get all the nav buttons to fit the width properly.
Are there some js tricks I could use? I don't even know...
Thanks
Edit: Here is my demo fiddle
A pure CSS solution, based on justification of the links, though still as semantic list items:
See demo fiddle.
Tested on W7 in IE7, IE8, IE9, Chrome 12, SafariWin 5, Opera 11, FF 4.
Update:
Concerning the width: Since you dynamically inject the navigation links into the HTML page, it likely is also possible to classify the navigation bar style.
See updated fiddle.
Here's a solution with jQuery
http://jsfiddle.net/pxfunc/kKJcr/
The menu is dynamically sized based on number of menu items and the width of the nav ul
var $nav = $('#nav');
var formatNav = function() {
var menuItemCount = $nav.children().length,
// base width
menuItemWidth = $nav.children().width(),
// border + padding + margin + base width of the menu item
menuItemOuterWidth = $nav.children().outerWidth(true),
// border + padding + margin only for the menuItem
menuItemDiff = menuItemOuterWidth - menuItemWidth,
// menu item container width (the <ul>)
navWidth = $nav.width();
$nav.children().width(Math.round(navWidth / menuItemCount) - menuItemDiff);
};
I did something like this at a previous job, but it did require a blend of JS and CSS.
One way to do it with JS - you need to simply take the total width of the navbar (minus padding, borders, etc, of course) and divide the number of buttons shown - then dump that out as the css width:width/numbOfbuttons%; on each button.
Just be careful not to hit exactly 100% cause this may cause wrap.
However - ideally (and the way we did it) this is much easier if you have a known number of potential buttons, or combinations.
Then, the solution is to set up a series of css classes designed to each scenario:
.oneButt a{width:widthThatLooksNotStupid%;}
.twoButt a{width:49%;}
/* etc */
And then just have the JS evaluate and set the specially designed class on the parent. Yeah..this requires a bit more CSS writing, and requires that you don't have an infinite number of potentials...
.ninehundredsevetyfiveButt a {width:FFFF;}
.ninehundredsevetysixButt a {width:UUUUU;}
...right. BUT - you get to set up a nice styling that actually fits various scenarios.
UPDATE from my comment below. Use general uh...classes...of situations, and apply these via JS:
.notEnoughToFillSpaceCruizer {width:wide;}
.enoughToFillSpaceCruizer {width:notAsWide;}
.jekPorkins {color:fuschia; font-size:99em; content:"You've got a problem..."; /* the user has failed, administer punishment*/}
Maybe you should question your design of trying to fit a dynamic number of buttons onto single row. I think the best design for you is a drop down navigator (like a window menu). That way it doesn't matter how many nav options the users adds, the design is still useable.
If you simply must have a nav bar with no drop downs, the short answer is to use a <table> if you need to support older browsers. At least a table will not wrap, but at some point the design of your site will look awful if it's squashed too much.
I'm sure there could CSS3 answers but I dont know them.