I was getting ready to create a gradient background for a new website in Photoshop when I came across this little jewel:
Would the code be better than a PS created background? Where would I place the CSS code generated in a FWP document to make this work?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
That’s a good tool, I’ve used it before. There are also several other standalone apps that perform a similar function.
Using code is more lightweight and faster. Graphics also require additional http requests. But some browsers don’t support CSS gradients.
Todd
RSS: http://xiiro.com/musings/feed.rss
Would the code be better than a PS created background?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 15 Mar 2013, 3:37 pm, Todd wrote:
Using code is more lightweight and faster. Graphics also require additional http requests. But some browsers don’t support CSS gradients.
Todd
Yes, I just read that some versions of IE have a problem with it. In that case, should I simply do a gradient the old fashioned way?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yes, I just read that some versions of IE have a problem with it. In that case, should I simply do a gradient the old fashioned way?
That would depend on the situation. How many of the visitors will be using IE, and how much would it effect the website’s usability? Also, see this: Cross-Browser CSS Gradient - Web Designer Wall
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Images are less fiddly and work everywhere (unless the user disable images which is beyond your control). But ask yourself if you’re concerned about those other browsers that don’t support gradients (I believe they would see a solid color instead) vs. the small performance hit of images.
Todd
RSS: http://xiiro.com/musings/feed.rss
In that case, should I simply do a gradient the old fashioned way?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
That depends on your site’s visitors – what versions of IE do they frequently use? Also, do you care if they see a gradient or a flat color in IE? Does it make a huge difference to their ability to use the site? Providing the exact same site to a lot of different (and older) browsers means either making it less efficient for those who bothered to upgrade, or creating a lowest-common-denominator appearance for modern and old browsers. On the other hand, making your site nicer for newer browsers, while making it usable but not fancy for older ones, is the essence of what’s called “Progressive Enhancement”.
But all religion aside, it’s very important to look at your server logs and decide if this is a problem you need to invest time in solving. If most visitors are using IE8, then just step away from the modern stuff quietly, cursing the installed base of Windows XP as you do. Freeway will automatically make the site they need, with no extra work on your part.
Walter
On Mar 15, 2013, at 11:46 AM, RavenManiac wrote:
On 15 Mar 2013, 3:37 pm, Todd wrote:
Using code is more lightweight and faster. Graphics also require additional http requests. But some browsers don’t support CSS gradients.
Todd
Yes, I just read that some versions of IE have a problem with it. In that case, should I simply do a gradient the old fashioned way?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 15 Mar 2013, 4:01 pm, Caleb Grove wrote:
Yes, I just read that some versions of IE have a problem with it. In that case, should I simply do a gradient the old fashioned way?
That would depend on the situation. How many of the visitors will be using IE, and how much would it effect the website’s usability? Also, see this: Cross-Browser CSS Gradient - Web Designer Wall
Caleb,
If i want to use a Vertical Gradient background in a Backdraft based site where would i put this CSS Code please?
Thx
John
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
where would i put this CSS Code please?
Same place as any other site ie either on the body or the PageDiv
Example
body {
background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,255,255,0.9)),to(rgba(255,0,255,0.9))); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* Saf5.1+, Chrome 10+ */
background-image: -moz-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* FF3.6 */
background-image: -ms-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* IE10 */
background-image: -o-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* Opera 11.10+ */
background-image: linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* Standard CSS3 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e600FFFF', endColorstr='#e6FF00FF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e600FFFF', endColorstr='#e6FF00FF')"; /* IE8,IE9 */
}
or
#PageDiv {
background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,255,255,0.9)),to(rgba(255,0,255,0.9))); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* Saf5.1+, Chrome 10+ */
background-image: -moz-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* FF3.6 */
background-image: -ms-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* IE10 */
background-image: -o-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* Opera 11.10+ */
background-image: linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* Standard CSS3 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e600FFFF', endColorstr='#e6FF00FF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e600FFFF', endColorstr='#e6FF00FF')"; /* IE8,IE9 */
}
using Page>Html Markup in the before section (Dont forget to wrap it in style tags if doing it this way.)
or create a class (that contains the gradient style declaration) and add that class to your PageDiv
As usual in FW Pro there are many ways to add code/styles.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
For a visualisation in FW of a gradient you can create yourself you could ‘draw’ an html container and apply the CSS3 Gradient Background action and play with the settings until you were happy with the results.
If you did this on a blank page then it would be easy to see the style code that the action has generated when looking at the page source (especially if you make sure your html container has a memorable name/ID first)
This could then be copied and added to the page you wanted it to appear on.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi if anyones interested I was using this gradient generator a few days ago and it has some extra functionality
and if you want to use the code just use the freewayCSS Gradient Background Action but choose the optional checkbox Custom CSS Gradient style
then click on the Custom Gradient CSS button and paste the copied css that the generator has created.
all the best max
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 24 Jan 2014, 3:10 pm, DeltaDave wrote:
where would i put this CSS Code please?
Same place as any other site ie either on the body or the PageDiv
Example
body { background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,255,255,0.9)),to(rgba(255,0,255,0.9))); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* Saf5.1+, Chrome 10+ */ background-image: -moz-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* FF3.6 */ background-image: -ms-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* IE10 */ background-image: -o-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* Opera 11.10+ */ background-image: linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* Standard CSS3 */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e600FFFF', endColorstr='#e6FF00FF'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e600FFFF', endColorstr='#e6FF00FF')"; /* IE8,IE9 */ }or
#PageDiv { background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,255,255,0.9)),to(rgba(255,0,255,0.9))); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* Saf5.1+, Chrome 10+ */ background-image: -moz-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* FF3.6 */ background-image: -ms-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* IE10 */ background-image: -o-linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* Opera 11.10+ */ background-image: linear-gradient(top, rgba(0,255,255,0.9), rgba(255,0,255,0.9)); /* Standard CSS3 */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e600FFFF', endColorstr='#e6FF00FF'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e600FFFF', endColorstr='#e6FF00FF')"; /* IE8,IE9 */ }using Page>Html Markup in the before section (Dont forget to wrap it in style tags if doing it this way.)
or create a class (that contains the gradient style declaration) and add that class to your PageDiv
As usual in FW Pro there are many ways to add code/styles.
David
David,
Thank You
John
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options