html - Background and transparent effect -

-

http://codepen.io/alemarch/pen/yyeowx

<div id="back">   bla bla bla bla bla   bla bla bla bla bla   bla bla bla bla bla   bla bla bla bla bla   bla bla bla bla bla   bla bla bla bla bla  </div> <div id="front">g</div>

and css

 #back {   white-space: pre;   background-color: #000;   color:  }  #front {   margin-top:-170px;   padding-left: 20px;   font-size: 150px;   color: transparent;   background-color: rgb(255,255,0);   -webkit-background-clip: text;   -moz-background-clip: text;   background-clip: text;    //position: relative; }

this code work chrome.. ask

  1. how run in firefox? must use svg?
  2. in chrome, how change color of bla bla bla (now if use forecolor of bla bla different of background color transparent effect lost)?
  3. why, in chrome, if change position (ex relative) transparent effect lost too?

thanks.


Comments

Post a Comment

Popular posts from this blog

javascript - ScrollTo Effect (href to div) -

-
i can't seem find working simple scrollto effect. want basic, it's when click on link in nav bar, must take me selected div id scrollto effect. this code have. <nav> <ul> <li><a href="#home">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> </nav> <section id="home"> content </section> <section id="about"> content </section> <section id="contact"> content </section> js: <!----- navegación slide ---> $(document).ready(function() {   $('a[href*=#]').each(function() {     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')     && location.hostname == this.hostname     && this.hash.replace(/#/,'') ) {       var $targetid = $(this.hash), $targetancho...
Read more

javascript - ng-class not responding to change in model in Angular? -

-
having searched extensively, got a ternary in templates , getting partially functional results, i'm 99% sure i'm doing 99% right, but...obviously not completely, i'm here. the basic html structure: <ul> <li class="week-row" ng-repeat="week in weeks" id="{{$index}}"> <ul class="tiles" ng-class="{ 'expanded': week.isopen, 'hidden': !week.isopen }"> <li class="day-tile" ng-class="{'active': (activeday == $parent.$index + '-' + $index) }" id="{{$parent.$index + '-' + $index}}" ng-repeat="day in week.days" ng-click="fn2({ week: $parent.$index, day: $index })"> <!-- moved ng-class here, , works? --> <div>some stuff in here</div> </li> </ul...
Read more

javascript - document.registerElement extending HTMLInputElement prototype while using custom tag name to avoid implicit browser style -

-
my goal two-fold: display html element keeps track of 'checked' state , triggers 'change' events without having manually implement code myself. not fight browser's implicit styling of element -webkit-appearance: none , more fussing. i need support current, stable channel of google chrome. such, not have concern compatibility non-modern browsers. i've approached problem using document.registerelement . method, register new tag, custom-checkbox , , inform browser tag inherit input. from there, need setup fact input's type checkbox. so, set type in createdcallback method ran when html element created. this code has issues: it works when not use custom tag , instead leverage is property inform browser input 'is' custom-checkbox . however, using <input> tag causes browser take on styling element. not wish have happen. when using custom tag, createdcallback method not ran. such, element not setup fact checkbox , not fire ...
Read more