jquery - Gradient text cross browser -

-

i'm trying make menu bar horizontal gradient. i've had success using -webkit-background-clip won't work in firefox.

i found jquery plugin pxgradient that's cross browser compatible can't span gradient on several li elements. see following jsfiddle:

http://jsfiddle.net/vnv4nyhj/10/

function gradient1() {     $(".test").pxgradient({         step: 10,         colors: ["#ff0066", "#2850ff"],         dir: "x"     }); };

i want gradient more top one. ideally i'd border-bottom include same gradient on hover can possibly live in world without that.

ps- font-awesome icon there because gave me problems earlier included make sure works.

update: possible idea playing read number of elements, divide colours per element , use nth-child() selector assign each color.

<script> //get number of list items var menuitems = $("li").children().length;  //convert colors hex hexstring1 = '2850ff'; hexstring2 = 'ff0066'; color1 = parseint(hexstring1, 16); color2 = parseint(hexstring2, 16);  //calculate difference in colors , color step colordifference = color2 - color1; colorstep = colordifference / (menuitems - 1); colorstep = parseint(colorstep);  //loop through elements , apply gradients (i = 0; < menuitems; i++) {     newcolor1 = color1 + (i * colorstep);     newcolor2 = color1 color2 -1;     gradientstart = newcolor1.tostring(16);     gradientend = newcolor2.tostring(16);      //use gradientstart , gradientend colors in function, not sure on part yet  }  </script>

it's seems overkill though, there must simpler solution? element many characters have relatively slow gradient compared 1 few characters. possibly fixed counting numbers of characters per element, seems rather inefficient.

an easy solution, work in ff, chrome, , safari, using blend modes.

the trick gradient set under a, in ul .

setting mix-blend-mode: screen, colors show on black places (the text, , border when hovered)

ul {      display: inline-block;      padding: 0;      font-size: 30px;      font-weight: bolder;      background: linear-gradient(90deg, red, blue);  }  li {      mix-blend-mode: screen;      background-color: white;        box-shadow: 8px 0px 0px white;  }  li, li {      display: inline-block;      text-decoration: none;      border-bottom: 3px solid white;  }  li:hover {      border-bottom: 3px solid black;      text-shadow: 0px 0px 2px gray;  }
<div class="navigation">  	<ul>  		<li><a href="#">nav 1</a></li>  		<li><a href="#">nav 2</a></li>  		<li><a href="#">nav 3</a></li>  		<li><a href="#">nav 4</a></li>  		<li><a href="#">nav 5</a></li>  	</ul>  </div>


Comments

Post a Comment

Popular posts from this blog

python - How to create jsonb index using GIN on SQLAlchemy? -

-
here's current code creating index jsonb. index("mytable_data_idx_id_key", mytable.data['id'].astext, postgresql_using='gin') but got error. sqlalchemy.exc.programmingerror: (psycopg2.programmingerror) data type text has no default operator class access method "gin" hint: must specify operator class index or define default operator class data type. [sql: "create index event_data_idx_id_key on event using gin ((data ->> 'id'))"] is there way create index on sqlalchemy? the postgresql specific sqlalchemy docs @ http://docs.sqlalchemy.org/en/latest/dialects/postgresql.html#operator-classes mention postgresql_ops dictionary provide "operator class" used postgresql, , provide example illustrating use: index('my_index', my_table.c.id, my_table.c.data, postgresql_ops={ 'data': 'text_pattern_ops', ...
Read more

PHP DOM loadHTML() method unusual warning -

-
i had following code works fine on localhost: $document = new domdocument(); $document->loadhtml($p_result); $form = $document->getelementsbytagname('form')->item(0); // code continues using $form variable after same code updated on outside server, loadhtml() failed , issued warning. warning: domdocument::loadhtml() expects parameter 1 valid path, string given in path/name/to/script.php returned null instead of object code pretty gets fatal error. note contents of $p_result absolutely same on outside server , on localhost. but why displays kind of warning , why not work? doesn't loadhtml() expects argument 1 string in first place? why method expects parameter 1 valid path ? just make clear i'm not calling loadhtmlfile() , i'm calling loadhtml() . thanks. you're affected one of php bugs . issue present in php 5.6.8 , 5.6.9. have affected php version on server, , bug-free version on localhost. the bug forbids null ...
Read more

c# - TransactionScope not rolling back although no complete() is called -

-
i'm using transactionscope rollback transaction fail bool errorreported = false; action<importerrorlog> newerrorcallback = e => { errorreported = true; errorcallback(e); }; using (var transaction = new transactionscope()) { foreach (importtaskdefinition task in taskdefinition) { loader.load(streamfile, newerrorcallback, task.destinationtable, processingtaskid); } if (!errorreported) transaction.complete(); } i'm sure there no transactionscope started ahead or after code. i'm using entity framework insert in db. regardless state of errorreported transaction never rolled in case of error. what missing ? transactionscope sets transaction.current . that's does. wants transacted must @ property. i believe ef each time connection opened reason. probably, connection open when scope installed. open connection inside of scope or enlist manually. ef has nasty "design decision": default opens ...
Read more