Develop Reference

Making border-image work with gradients

I'm working on a webapp that uses react.js and sass for styles (so all my style files are .scss). I have a textbox with the current style:
input[type=text] {
text-align: center;
font: inherit;
border: 6px solid #999999;
padding: 5px 5px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 223px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
}
At some point, my app wants to change the border colour. This is what I have for that:
var borderStyle;
if (gradient) {
borderStyle = {
'borderImage': '-webkit-linear-gradient(left, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
};
}
Later, the input component:
<input type="text" style={borderStyle} onChange={this.handleChange} />
Currently what I see is a white border with a tiny image of the red-blue gradient in each corner of the border. I've tried using borderColor, which doesn't work with gradients at all, apparently. Am I missing something obvious, or is it not possible to do a simple border gradient?
The desired result is a left-to-right gradient (so the left border is entirely blue, the right is entirely red, and the top and bottom borders feature the blue-to-red transition).
In response to Harry's answer, I changed to the following code:
if (gradient) {
borderStyle = {
borderImage: 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
borderImageSlice: 1
};
}
as specified in the react docs for inline styles.
However when I inspect the element, the borderImageSlice property I've defined is missing; only the borderImage one is there, and I still only have tiny gradients in the corners of the border.

You need to add a border-image-slice property also while applying the border. Doing this would give the exact output as you need.
I have added it via CSS itself in the below snippet (without the JS) but you should be able to adapt it :)
input[type=text] {
text-align: center;
font: inherit;
border: 6px solid #999999;
padding: 5px 5px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 223px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
border-image: linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%);
border-image-slice: 1;
}
<input type="text" />
Note: I have also modified the gradient syntax to use the standard one so that it works in all browsers that support border-image property.
Below is a snippet which applies the border image when the text in the input box is changed.
var ip = document.getElementById("inp");
ip.addEventListener("change", function() {
this.style.borderImage = 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)';
this.style.borderImageSlice = '1';
});
input[type=text] {
text-align: center;
font: inherit;
border: 6px solid #999999;
padding: 5px 5px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 223px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
}
<input type="text" id="inp" />
It seems like ReactJS by default adds px as units to all numbers that are passed for inline styles and because of this the border-image-slice: 1 is wrongly getting set as border-image-slice: 1px. As this property is a unitless property in CSS, it is not getting applied properly. The solution is to wrap this value within quotes and also add a semi-colon within the quotes (like in the below code sample):
var borderStyle = {
borderImage: 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
borderImageSlice: '1;' // note the quotes and the semi-colon.
};
Big credits for finding out this problem goes to Henrik Andersson.
JSBin Demo with ReactJS

I managed to fix such problem by adding 1 / 1 / 0 stretch by myself to the inline-style so it looks like this:
var borderImage = `linear-gradient(to right, #1A80AC 0%, #1A80AC ${position.x / 3}%,
#8798AD ${ position.x / 3 }%, #8798AD 100%) 1 / 1 / 0 stretch`

transition in javascript doesnt start

I have the strangest issue i have ever seen - hope you can help me guys.
I am making rainbow text transition in my chrome packaged app. You can see it
// script2.js
var box = document.getElementById('kalreg');
box.addEventListener('transitionend', loopTransition, false )
function loopTransition(e) {
if ( e.propertyName == 'color' ) {
console.log('aa');
if (box.className == "it-animate") {
console.log('bb');
$(box).removeClass("it-animate")
} else {
box.className = "it-animate";
console.log('cc');
}
}
}
box.className = ''
.it-wrapper{
padding: 30px;
text-align: center;
max-width: 1140px;
}
.it-wrapper h3{
font-size: 130px;
line-height: 150px;
padding: 30px 30px 40px;
color: rgba(255,255,255,0.1);
font-family: 'guanine', 'Arial Narrow', Arial, sans-serif;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
background: -webkit-linear-gradient(left, rgba(105,94,127,0.54) 0%,
rgba(255,92,92,0.57) 15%,
rgba(255,160,17,0.59) 27%,
rgba(252,236,93,0.61) 37%,
rgba(255,229,145,0.63) 46%,
rgba(111,196,173,0.65) 58%,
rgba(106,132,186,0.67) 69%,
rgba(209,119,195,0.69) 79%,
rgba(216,213,125,0.7) 89%,
rgba(216,213,125,0.72) 100%),
-webkit-repeating-linear-gradient(-45deg, rgba(255,255,255,0.9), transparent 20px, rgba(255,255,255,0.3) 40px);
background-size: 300% 100%;
background-position: center left, top left;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
transition: all 2s ease;
-moz-border-radius: 90px 15px;
-moz-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.4);
}
.it-wrapper h3.it-animate{
background-position: center right, top right;
color: rgba(255,137,149,0.7);
-moz-box-shadow: 0px 0px 0px 10px rgba(39,137,149, 0.9);
}
input {
width: 100%;
}
#font-face {
font-family: guanine;
src: local(guanine), url('fonts/guanine_.ttf') format('opentype');
}
<div class="it-wrapper">
<h3 class="it-animate" id="kalreg">text</h3>
</div>
working in jsfiddle here:
fiddle
If you press "run" rainbow would move. And here goes the strangest part. On my computer this animation doesnt start although files look identically except one small difference - i include script2.js (commented in html file in fiddle) instead of raw javascript in html file. But there is a way to start animation on ma computer. All I need to do is instead of last line in javascript that looks like this:
box.className = ''
put something like this:
setTimeout(function () { box.className = ''}, 0)
I have no idea what is going on here, especially everything worked fine yesterday. Any ideas ? I am sitting with this all evening and cant find any reason why it behaves like that.
Kalreg

Gradient text with css

Is there anyway that i can make a text gradient? I have this
<p>TEXT</p>
Can somehow make the text gradient from top to bottom with css?
I want the same result you get for
background: linear-gradient(#fbfbfb, #f2f2f2);
but only for text not the whole background. I am looking something like that:
color: linear-gradient(#fbfbfb, #f2f2f2);

For Webkit browsers, you can use background-clip and text-fill-color like so:
h1 {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
source
Unfortunately there is at present no way to do it in other browsers using pure CSS.

For gradient
background-color: #efefef;
background-image: -webkit-gradient(linear,left top,left bottom,from(#efefef),to(#ffffff));
background-image: -webkit-linear-gradient(top,#efefef,#ffffff);
background-image: -moz-linear-gradient(top,#efefef,#ffffff);
background-image: -ms-linear-gradient(top,#efefef,#ffffff);
background-image: -o-linear-gradient(top,#efefef,#ffffff);
background-image: linear-gradient(top,#efefef,#ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#efefef',EndColorStr='#ffffff');

Only works in Webkit from what I can see, though it does work - http://css-tricks.com/snippets/css/gradient-text/

I have the solution but it only works on chrome for me.
Here you are.
p {
background: linear-gradient(to bottom, #F00 0%,#630000 100%);
background: -moz-linear-gradient(top, #F00 0%,#630000 100%);
background: -webkit-gradient(linear, left top,left bottom, color-stop(0%,#F00 ), color-stop( 100%,#630000));
background: -webkit-linear-gradient(top, #F00 0%,#630000 100%);
background: -o-linear-gradient(top, #F00 0%,#630000 100%);
background: -ms-gradient(to bottom, #F00 0%,#630000 100%);
/*i.e */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F00', endColorstr='#630000', GradientType=0 );
/* gradient targets only on letter and not on the background*/
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;*/
Obviously
0% means that the gradient starts right from the top
100% means that the gradient ends at the end of the letter.
you can use something like that as well
background: linear-gradient(to bottom, #F00 33%,#630000 100%);
if you want to apply it to specific area.

As i wanted a solution to work in all browsers i eventually used a jQuery plugin. I used this one http://www.codefocus.ca/goodies/gradienttext
HTML:
<div id="example1">TODO write content</div>
JS:
$(document).ready(function(){
$('#example1').gradienttext({
colors: [
'#FF0000',
'#FF6600',
'#CCFF00',
'#00FF00',
'#0066FF',
'#FF00FF'
],
style: 'horizontal'
});
});
and included the appropiate js (jQuery and GradientText v0.1)
But there are so many other plugins to use. You can check:
-http://jquery-plugins.net/tag/gradient
-http://mrnix.ru/pxgradient/index_en.html
-https://github.com/Se7enSky/jquery-text-gradient
P.S. thank you for your answers that showed me that there is not a way to achieve what i wanted with pure css.

Meteor 0.6.5.1 and twitter typeahead.js - (How) does it work?

I switched from Twitter Bootstrap 2 to Bootstrap 3 and found myself without typeahead, it's recommended to use Twitter typeahead.js now. The corresponding meteor package seems to be up to date in terms of typeahead.js, but probably has been outdated by the latest updates of meteor. For me, it doesn't work correctly.
Does somebody know how to run typeahead.js in Meteor or confirm I'm just using it wrong?
From my code I get this messed up typahead formatting:
Thanks for any hint!
typeahead.html
<head>
<title>typeahead</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<form class="form-inline" role="form">
<div class="form-group">
<input class="form-control" type="text" id="typeahead">
</div>
</form>
</template>
typeahead.js
if (Meteor.isClient) {
Template.hello.rendered = function () {
$('input#typeahead').typeahead({
name: 'accounts',
local: ['timtrueman', 'JakeHarding', 'vskarich']
});
};
}

I was able to get this to work using the answer from here https://stackoverflow.com/a/18171568/1691147
In regards to how to do it in meteor. In your rendered function, fill up typeahead
var items = [],
finalItems,
tags = Tags.find({}, {fields: {name: 1, submitted: 0}});
tags.forEach(function(tag){
items.push(tag.name);
});
finalItems = _.uniq(items)
$('#search').typeahead({
local: finalItems
});
Then, on a keyup event, do
$('.tt-query').css('background-color','#fff');
$('#search').removeClass('tt-query');
And in your css, add
.twitter-typeahead{
width:100%;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
}
.tt-dropdown-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
It's pretty hacky, but it will work until they get Typeahead and Bootstrap 3 to play nicely with each other.

If you're after general free-text autocomplete, you may want to check out my autocomplete package for meteor, first released just a couple of days ago:
https://github.com/mizzao/meteor-autocomplete
You may also get some inspiration from there for what you are trying to do. I strongly recommend a Meteor collection-backed implementation rather than trying to cobble together something using existing asynchronous libraries, which is what I've done here. This allows the autocomplete to be completely reactive and client-side (the list contents can update while you're looking at them!) and much quicker.
Some pictures below...
Autocompleting users with #, where online users are shown in green:
In the same line, autocompleting something else with metadata and bootstrap icons:
Please fork, pull, and improve!

jQuery .animate() issues, <p> tags are moving

I am using jquery .animate() to change the width of an <li> tag. I have text in the <li> encased in <p> tags so that I can center it, however, when the animation happens the text is moved down by 50% of the <li> element, i do not know if the 50% is releated or just coincidence.
my HTML:
<div id="about_nav">
<ul>
<li id="button_welcome"<p>Welcome</p></li>
<li id="button_services"><p>Services</p></li>
<li id="button_naming"><p>Naming</p></li>
<li id="button_creating"><p>Creating Brands</p></li>
<li id="button_bizam"><p>Bizam What?</p></li>
</ul>
</div>
my jquery code is:
$('#button_welcome').click(function(){
if($(this)!=previous){ //checks if it was clicked last
if(previous!=null){ //checks if the previous element exists
previous.animate({width: 130},150); //resets previous
}
$(this).animate({width: 163},150); //animates current
previous = $(this); //assigns current to previous
$('#about_content').children().hide(); //resets tabs window
$('#tab_welcome').show(); //displays correct tab
}
});
And my css:
#about_nav{
float:left;
display:block;
margin-left:0px;
overflow:hidden;
padding-right:10px;
}
#about_nav ul{
list-style:none;
padding:0;
}
#about_nav li{
height:48px;
width:130px;
background: #613675; /* old browsers */
background: -moz-linear-gradient(top, #613675 0%, #9145B5 50%, #613675 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#613675), color-stop(50%,#9145B5), color-stop(100%,#613675)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#613675', endColorstr='#613675',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #613675 0%,#9145B5 50%,#613675 100%); /* opera */
text-align:middle;
margin-bottom:15px;
-moz-border-radius-bottomright: 6px 4px;
bottom-right-border-radius: 6px 4px;
-webkit-border-bottom-right-radius: 6px 4px;
-moz-border-radius-topright: 6px 4px;
top-right-border-radius: 6px 4px;
-webkit-border-top-right-radius: 6px 4px;
-moz-box-shadow: 0px 3px 8px 3px #444;
-webkit-box-shadow: 0px 3px 8px 3px #444;
box-shadow: 0px 3px 8px 3px #444;
}
#about_nav li p{
padding-top:19px;
padding-bottom:19px;
text-align:right;
margin-right:10px;
vertical-align:middle;
}
Also, my comparison of $(this)!=previous does not seem to work.
So, how can i stop my text moving and keep it centered in the <li> and can you help my with my comparison?
Cheers,
Fraser

P tags are rendered inline, whereas divs are rendered as blocks. Try settings the style of the p tags to display:block; and it should work.

First: close this li tag as others have said above.
<li id="button_welcome"><p>Welcome</p></li>
Second: change your p css to this.
#about_nav li p{
padding: 0;
margin: 0 10px 0 0;
height: 100%;
padding-top: 15px; /* change this to adjust height of the p tag */
text-align: right;
}
Also, with the code given you are not defining 'previous'. I would need to see the rest of your code to see why that is not working.
JsFiddle : http://jsfiddle.net/nXgSa/

One line easy fix:
$('#myDiv > p').css('display','block');
Also, I noticed in your example you put :
<li id="button_welcome"<p>Welcome</p></li>
You might have also forgot to close your < li > tag.

Ultimate fix :
Looking at the element in the development tools during the animation, it turns out that jQuery apply a style overflow: hidden; to the element during the whole transformation.
To fix this, just add the overflow: visible property to your .animate() function :
if(previous!=null) { //checks if the previous element exists
previous.animate({
overflow: 'visible',
width: 130
}, 150);
}
$(this).animate({
overflow: 'visible',
width: 163
}, 150); //animates current
Here is the JSFiddle to test that the <p> tags are not going down anymore : http://jsfiddle.net/jpreynat/28fmw4vy/1/