Strange gradient behaviour in css with angularjs [duplicate] - javascript

This question already has answers here:
CSS3 gradient background set on body doesn't stretch but instead repeats?
(13 answers)
Closed 6 years ago.
Here is the css that i am using
html .body-dark{
background: #242A3F;
background: -webkit-linear-gradient(left top, #242A3F, #333C55);
background: -o-linear-gradient(bottom right, #242A3F, #333C55);
background: -moz-linear-gradient(bottom right, #242A3F, #333C55);
background: linear-gradient(to bottom right, #242A3F, #333C55);
background: -moz-linear-gradient(-90deg, red, yellow);
}
And the jade related
doctype
html.no-js
head
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
base(href='/')
title Travel
meta(name='description', content='')
meta(name='viewport', content='width=device-width, initial-scale=1')
link(rel='stylesheet',href='main.css',async)
body.body-dark(ng-app='application')
div(ng-view)
<!-- build:js inline app.min.js -->
script(src='app.min.js')
<!-- /build -->
script(src='//localhost:35729/livereload.js')
So as you can see the gradient class is attached to the body and i assume that there should be only one gradient. But on the other hand here is the output i am getting
Another important information might be that the page is made of two components, the nav template and form template both of which are called using ng-include Although i am not sure if the error is because of that.
Also here is a copy of DOM from browser
As you can see the body is only till the form ends, how can i extend it out to whole page. Also why are there two gradient elements under that ?

Set
html, body, .body-dark{
background: #242A3F;
background: -webkit-linear-gradient(left top, #242A3F, #333C55);
background: -o-linear-gradient(bottom right, #242A3F, #333C55);
background: -moz-linear-gradient(bottom right, #242A3F, #333C55);
background: linear-gradient(to bottom right, #242A3F, #333C55);
background: -moz-linear-gradient(-90deg, red, yellow);
height: 100%;
}

Related

How to disable linear-gradient when scroll to the bottom

I am using the answer from Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div to achieve fading text at bottom
and a snippet of my code is below
<div className={styles.description}>
{description}
</div>
.description {
position: relative;
overflow: auto;
width: 640px;
height: 495px;
padding-right: 17px;
text-align: justify;
-webkit-mask-image: linear-gradient(to bottom, black 46%, transparent 100%);
mask-image: linear-gradient(to bottom, black 46%, transparent 100%);
}
and the effect is like this
however, the fading effect is fix, so when I scroll to the bottom, it still exist, therefore, some lines in the end of text would eventually unclear.
A simple way to solve this puzzle is add a extra transparent space in the end which large enough to expand the scrollbar, so that the text can get rid of fading out area. However, in my opinion, it seems not very elegant to me, so I wonder if there have methods can disable linear-gradient when scroll to the bottom.
Really appreciate your help, many thanks

How to visually show padding and margin in visual editor

I am designing a tool in which when you hover over an element, it gets highlighted (I do it by applying box-shadow with large radius so that it tints the element). I would now like to also visually show the padding and margin, but I don't know how to accomplish this and show it like in the inspector. Does anyone have any experience with this?
My tool description: I'm building a tool similar to WebFlow that allows to open up a page, perform modifications (change text, some CSS rules etc) there and share the updated page among colleagues.
Thanks in advance!
You can try wrapping the div inside another for coloured margins.
Refering the link coloured padding for adding coloured padding.
Note: for margins I have used the property "display:flow-root", I am not sure if this is the best property, it may have cross browser issues.
this is with HTML and CSS alone, if you use javascript you can just get the properties of the element and add styling automatically.
.tester{
padding:15px;
margin:15px;
background-image: linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%);
background-clip: content-box, padding-box;
}
.wrapper{
background-color:gray;
display: flow-root;
}
<div class="wrapper">
<div class="tester">
gray is for margin and red is for padding
</div>
</div>

Making my background images load faster

http://www.leona-anderson.com
body {
background: url(http://leona-anderson.com/wp-content/uploads/2014/10/finalbackgroundMain.png) fixed;
background-size:100% auto;
}
I have a different Background images on each site an since they are 1080p they take a bit to load.
I use wordpress 4.0.5 with minamaze theme.
I have found out that my use a preload javascript function, but in my case on the frontpage I do not have information about the background image of the other sites so I am hoping someone could provide me with a different solution.
My images are .pngs with round about 1mb size, maybe I also could try to compress them some more?
Thanks in advance
You shouldn't use .png for such an image. As a general rule, photographs should be .jpg and graphics (eg. logos) should be indexed .png
I reduced the file size by ~93% down to 89KB from 1.3MB and the visual difference is barely noticeable.
Here's the optimized image: Optimized
And here's yours: Original
You can cut down the time which your website takes while loading by a huge margin if you use CSS3 background-gradients instead of the large background-images. Talking about your homepage background-image for instance, you can create a background=gradient like this and use the image of the lady as the background-image and position it to the right:
#content {
display: block;
height: 1500px;
}
body {
background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -webkit-linear-gradient(left, #ba53a0, #fff);
background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -o-linear-gradient(right, #ba53a0, #fff);
background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -moz-linear-gradient(right, #ba53a0, #fff);
background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, linear-gradient(to right, #ba53a0, #fff);
}
<body>
<div id="content"></div>
</body>
I think the way to go is compress to JPEG files. You can choose the degree of compression in most software (I use GIMP). 1 Mb is by all practical means way too big for a background image.
Since you only use a gradient and the woman, you could realize the Color gradient with css3 and only load the woman as an image:
CSS:
body {
background: -webkit-linear-gradient(left, #B200FF , white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #B200FF, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #B200FF, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #B200FF , white); /* Standard syntax */
}
Fiddle: http://jsfiddle.net/n4anrzk8/1/
Or you try to use https://tinypng.com/ to get smaller png files, if it has to be an image.
Another, pretty bad method, would be loading ALL images with width 0 at the first page. They are not visible, but the browser will save them in the Cache (if the visitor using the Cache of his browser). I don't recommend this method, it's just for completeness.
Compress your image using https://tinyjpg.com or https://tinypng.com.
Always make sure your image is as losslessly compressed as possible, it will create a huge difference in loading time.

User picking image and hover state image for menu, ends up flickering

in a project we are working on we let the user choose the pictures for his menu as well as the hover state picture for each menu. Right now the menu consists from x amount of div tags, based on the user selection we set the style of the div in order to apply the image as background and on mouseover and onmouseout we change the style attribute.
However this results in image flickering which is not ideal. What I would like is a result like a sprite hover with css, but in this case I don't know how to achieve or approach something like this. If I'm not mistaken the image is being requested again and again hence the flickering ?
current source code:
<div class="help-context-box" style="background-image: url(http://domain.com/c/document_library/get_file?uuid=db77cbf4-6ae8-42ec-bb07-36cbde8ab82a&groupId=10180); background-color: rgb(255, 255, 255); background-position: 0% 0%; background-repeat: no-repeat no-repeat;"
onmouseover="this.style.background='#fff url(/c/document_library/get_file?uuid=bd77adc5-54c7-42c8-b39d-f07f1d611ac0&groupId=10180) no-repeat left top'" onmouseout="this.style.background='#fff url(/c/document_library/get_file?uuid=db77cbf4-6ae8-42ec-bb07-36cbde8ab82a&groupId=10180) no-repeat left top'"></div>
To achieve that, I think you must use GD from php or other graphic libraries in order to append both images in a sprite then use
<div class="help-context-box"
style="background-image: url(...); background-color: rgb(255, 255, 255); background-position: 0% 0%; background-repeat: no-repeat no-repeat;"
onmouseover="this.style.backgroundPosition='50% 0'" onmouseout="this.style.backgroundPosition='50% 0'"></div>
Or without using inline nor javascript:
HTML
<div class="help-context-box"></div>
CSS
.help-context-box{
background:url(path/to/usersprit.png) no-repeat;
background-color: rgb(255, 255, 255);
background-position:0% 0%;
}
.help-context-box:hover{
background-position:-100% 0%;
}
fiddle

Background-position not working when classname changed in IE7

I have an element which I am adding a class to.
the style is:
.bg{ background: url(/images/background.png) no-repeat top center #000; }
When I add the class with javascript the background image show up, and the color show up, but the positioning does not.
This works fine in everything except IE
You have defined a vertical value (top), and one that doesn't exist (middle).
The vertical values are top, center and bottom, while the horisontal are left, center and right.
When using both, the first is the horisontal and the second is the vertical, so you got them backwards.
Use:
.bg{ background: #000 url(/images/background.png) no-repeat center top; }
You're not using the CSS background: shorthand properly - you're missing the background-repeat part. It should be something like this:
.bg {
background: #000000 url(/images/background.png) no-repeat scroll center top;
} /* ^ ^ ^ ^ ^
color image repeat attachment position */
http://www.w3schools.com/css/css_background.asp

Categories

Resources