1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Online gradient text & background maker, review please

Discussion in 'Reviews' started by JEET, Apr 10, 2020.

  1. #1
    Online gradient text & background maker, review please

    Hi,
    I just completed coding this:
    https://vagMineTech.com/imageMake/gradientImage.php

    It generates gradient backgrounds, or gradient text, or both together.
    A sample of both together is seen by default when you click the link above.
    My choice of color combinations might get you going LMAO, so please excuse the default color combination.
    Change those to something of your choice.
    Both RGB and HEX are supported.

    Normally the solutions I have found online break the string into characters and change the color character by character.
    They do not generate a smooth photoshop like gradient effect on text.

    The online gradient tool at VagMineTech.com tries to do what photoshop does in their text gradient effect.
    Not sure how much I succeeded in getting this right...
    You will see much better gradient effect on larger font sizes and longer strings.

    By the way, vertical gradient means top to bottom, not a vertical line in the middle.
    Likewise, horizontal gradient means left to right, or vice versa, not a flat horizontal line in the middle.
    SEMrush
    Repeat gradient means a gradient pattern repeating itself over and over again for entire width/height.
    Stretch gradient means 2 colors, one fading into another for the entire width/height.
    Can reverse the direction of stretch gradient, can skew it too.

    Let me know your thoughts.
     
    JEET, Apr 10, 2020 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,529
    Likes Received:
    1,933
    Best Answers:
    247
    Trophy Points:
    515
    #2
    It has a lot of aliasing bleed, likely from trying to flood fill as a raster. Makes it look a bit wonky. Likewise the gradients seem to have specular issues almost as if you're making it restrict to 8 bit color, hence it seeming almost dithered.

    The interface could use some formatting so that it doesn't look like all the label and input are tossed in there willy-nilly.

    Though these days given what it's making I'm not sure this is something I'd even waste images on. I could probably implement something like this where the result is HTML+CSS that would look far better, thanks to the CSS background-clip property and how it interacts with color:transparent.

    
    <h1>
    	<a href="/">
    		<span>Domain</span>
    		<small>Small Caption Line</small>
    	</a>
    </h1>
    
    Code (markup):
    Then for the CSS:

    h1 {
    	display:inline-block;
    	text-align:right;
    	padding:0.35em 1em;
    	font:normal 8em/1.5em tahoma,helvetica,sans-serif;
    	background:#004;
    	background:linear-gradient(
    		170deg,
    		#FFF 0%,
    		#004 40%
    	);
    }
    
    h1 a {
    	display:inline-block;
    	text-decoration:none;
    }
    
    h1 span,
    h1 small {
    	display:block;
    	background-clip:text;
    	-webkit-background-clip:text;
    	color:transparent;
    	vertical-align:bottom;
    }
    
    h1 span {
    	margin-top:-0.4em; /*compensate for tahoma's crap X-height alignment */
    	background-image:linear-gradient(
    		180deg,
    		#600 0%,
    		#B77 60%,
    		#FFF 61%
    	);
    	-webkit-text-stroke:0.016em #006;
    }
    
    h1 small {
    	font-size:0.2em;
    	line-height:1.2em;
    	font-weight:normal;
    	text-align:right;
    	background-image:linear-gradient(
    		90deg,
    		#999 0%,
    		#FFF 100%
    	);
    }
    
    @media all and (-ms-high-contrast:none) {
    	/* make this at least show text in IE10 */
    	h1 span,
    	h1 small {
    		background:transparent;
    		color:#FFF;
    	}
    }
    
    Code (markup):
    Around 1k of code, most of it in the stylesheet where it can be cached... replacing an image that would be around what, 20 or 30k?

    Just beware it goes bits-up face-down in IE9/earlier... and it won't be styled in IE 10-11 (you get white text with no stroke). If you really care about IE9/earlier at least showing the text, a separate sheet in a IE CC is likely the best course of action.

    Live demo here:
    https://cutcodedown.com/for_others/Jeet/gradient/

    You can see the significant difference in quality using CSS instead of images brings to the table.

    Basically, if this tool is for websites, it's not an image's job anymore. Be fun if you rewrote it to spit out the proper CSS though.
     
    deathshadow, Apr 14, 2020 IP
    Ayoub benali01 and JEET like this.
  3. JEET

    JEET Notable Member

    Messages:
    3,722
    Likes Received:
    476
    Best Answers:
    19
    Trophy Points:
    235
    #3
    Thanks for the input. Will try to improve this.
     
    JEET, Apr 14, 2020 IP
  4. JEET

    JEET Notable Member

    Messages:
    3,722
    Likes Received:
    476
    Best Answers:
    19
    Trophy Points:
    235
    #4
    Added an option for text gradients (not background yet), "Smooth transformation gradient".
    Its the last checkbox in text style area, ticked by default.
    Results:
    http://vagminetech.com/imageMake/gradientImage.php

    This must look close to what you showed with CSS. The image generated has a stroke color for text "DOMAIN", you can remove it.

    Uncheck the smooth checkbox, and you can see the previous style, one color fades into another.
    This one is - one color transforms into another.
     
    JEET, Apr 14, 2020 IP
  5. pratik

    pratik Notable Member

    Messages:
    2,287
    Likes Received:
    112
    Best Answers:
    0
    Trophy Points:
    200
    #5
    Hello there

    I am not a coder, so won't be sharing feedback about the technology :)
    Being a designer, this definitely helps a lot. This would be such a helpful tool for small designers!
     
    pratik, Apr 15, 2020 IP
    JEET likes this.
  6. JEET

    JEET Notable Member

    Messages:
    3,722
    Likes Received:
    476
    Best Answers:
    19
    Trophy Points:
    235
    #6
    Thanks Pratik
    I am glad you found it useful :)
     
    JEET, Apr 15, 2020 IP
  7. Ayoub benali01

    Ayoub benali01 Active Member

    Messages:
    190
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    63
    Digital Goods:
    1
    Articles:
    2
    #7
    It's working just fine! Designers need these kind of stuff, it's easy to use it'll be beneficial to us!
    Nice work!
     

    Attached Files:

    Ayoub benali01, Jul 26, 2020 IP
    JEET likes this.
  8. JEET

    JEET Notable Member

    Messages:
    3,722
    Likes Received:
    476
    Best Answers:
    19
    Trophy Points:
    235
    #8
    Ayoub benali01
    Thanks, glad you liked it
     
    JEET, Jul 26, 2020 IP
    Ayoub benali01 likes this.