A few awesome html selectors to style up those links. More info here: http://nicovanzyl.com/tools/chameleon/
A Pen by Saminou yengue kizidi on CodePen.
Created
October 14, 2013 08:20
-
-
Save Saminou24/6972577 to your computer and use it in GitHub Desktop.
A Pen by Saminou yengue kizidi.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <p class="light">Lorem <a href="http://adobe.com">adobe</a> dolor sit amet, consectetur <a href="http://aim.com/hkhku/">AIM</a> elit, set <a href="http://about.me/bob">about.me</a> eiusmod tempor incidunt <a href="http://amazon.com/item/789/">amazon</a> labore et dolore magna aliquam. Ut enim ad minim<a href="http://android.apptainment.com"> android</a> veniam, quis nostrud exerc. Irure dolor in reprehend <a href="http://aol.com/eihfiue/efheio/">AOL</a> incididunt ut labore et dolore magna <a href="http://behance.com">behance</a> aliqua. Ut enim ad minim veniam, quis <a href="http://example.blogger.com">blogger</a> nostrud exercitation <a href="http://carbonmade.com/example/">carbonmade</a> ullamco laboris nisi ut aliquip <a href="http://delicio.us">delicious</a> ex ea commodo consequat. Duis aute <a href="http://designmoo.com">designmoo</a> irure dolor in reprehenderit in voluptate <a href="http://deviantart.com/example/example">deviantart</a> velit esse molestaie cillum. Tia non ob ea <a href="http://disqus/709754354354/">disqus</a> soluad incommod quae egen <a href="http://dribbble.com/explore/p=89/">dribbble</a> ium improb fugiend. Officia deserunt mollit anim <a href="http://dropbox.com/example/7897894/image.jpg">dropbox</a> id est laborum Et harumd dereud facilis <a href="http://m.ebay.com/electronics/tv/32-lcd/">ebay</a> est er expedit distinct. Nam liber te conscient <a href="http://engadget.com/2012/07/12/example/">engadget</a> to factor tum poen legum odioque civiuda et tam. <a href="http://tutorials.envato.com/example/">envato</a> Neque pecun modut est neque nonor et imper <a href="http://etsy.com">etsy</a> ned libidig met, consectetur adipiscing elit <a href="http://evernote.com/download/">evernote</a>, sed ut labore et dolore magna <a href="http://facebook.com/example/254245/79070987/">facebook</a> aliquam is nostrud exercitation ullam mmodo <a href="http://flickr.com/image/example.jpg">flickr</a> consequet. Duis aute in voluptate <a href="http://forrst.com/">forrst</a> velit esse cillum dolore eu fugiat <a href="http://foursquare.com">foursquare</a> nulla pariatur. At vver eos et accusam dignissum qui <a href="http://example.github.com/project/">github</a> blandit est praesent. Trenz pruca beynocguon doas nog <a href="http://google.com/">google</a> apoply su trenz ucu hugh rasoluguon monugor <a href="http://grooveshark.com/">grooveshark</a> or trenz ucugwo jag scannar. Wa hava <a href="http://imdb.com/actors/example">IMDB</a> laasad trenzsa gwo producgs su IdfoBraid, yop quiel <a href="http://instagr.am/udygfiusdy/3252">instagram</a> geg ba solaly rasponsubla rof <a href="http://kickstarter.com/startups/example">kickstarter</a> trenzur sala ent dusgrubuguon. Offoctivo <a href="http://last.fm">last.fm</a> immoriatoly, hawrgasi pwicos asi sirucor. Thas <a href="http://linkedin.com/example">linkedin</a> sirutciun applios tyu thuso itoms ghuso <a href="http://meetup.com">meetup</a> pwicos gosi sirucor in mixent gosi <a href="http://path.com/325235/">path</a> sirucor ic mixent ples cak ontisi sowios uf Zerm hawr <a href="https://paypal.com/example">paypal</a> rwivos. Unte af phen neige pheings atoot <a href="http://pinterest.com/pins/70974098/">pinterest</a> Prexs eis phat eit sakem eit vory gast <a href="http://rss.example.com/news">RSS feed</a> te Plok peish ba useing phen roxas. Eslo <a href="http://skype.com/example/">skype</a> idaffacgad gef trenz beynocguon <a href="http://soundcloud.com/example/example/">soundcloud</a> quiel ba trenz Spraadshaag ent <a href="http://spotify.com">spotify</a> trenz dreek wirc procassidt program. Pwico vux <a href="http://stumbleupon.com/example/57234095/">StumbleUpon</a> bolug incluros all uf cak sirucor hawrgasi itoms alung gith cakiw <a href="http://technorati.com/2012/example">technorati</a> nog pwicos. Plloaso mako nuto uf cakso dodtos anr koop <a href="http://thenextweb.com/apple/2012/09/21/iphone5">The next web</a> cupy uf cak vux noaw yerw phuno. Whag schengos, <a href="http://example.tumblr.com/">tumblr</a> uf efed, quiel ba mada su otrenzr <a href="http://twitter.com/example">twitter</a> swipontgwook proudgs hus yag su ba dagarmidad. <a href="http://vimeo.com/436436/">vimeo</a> Plasa maku noga wipont trenzsa <a href="http://example.wordpress.com/">wordpress(.com)</a> schengos ent kaap zux copy wipont trenz <a href="http://yahoo.com/">yahoo</a> kipg naar mixent phona. Cak pwico <a href="http://yelp.com/375092387509/">yelp</a> siructiun ruos nust apoply tyu cak sisulutiun <a href="http://youtube.com/example/957982375/">youtube</a> munityuw uw cak jot scannow. Plasa maku noga wipont <a href="http://zerp.ly/example/">zerply</a> trenzsa schengos ent kaap zux copy wipont trenz kipg naar mixent phona.</p> | |
| <p class="dark">Lorem <a href="http://adobe.com">adobe</a> dolor sit amet, consectetur <a href="http://aim.com/hkhku/">AIM</a> elit, set <a href="http://about.me/bob">about.me</a> eiusmod tempor incidunt <a href="http://amazon.com/item/789/">amazon</a> labore et dolore magna aliquam. Ut enim ad minim<a href="http://android.apptainment.com"> android</a> veniam, quis nostrud exerc. Irure dolor in reprehend <a href="http://aol.com/eihfiue/efheio/">AOL</a> incididunt ut labore et dolore magna <a href="http://behance.com">behance</a> aliqua. Ut enim ad minim veniam, quis <a href="http://example.blogger.com">blogger</a> nostrud exercitation <a href="http://carbonmade.com/example/">carbonmade</a> ullamco laboris nisi ut aliquip <a href="http://delicio.us">delicious</a> ex ea commodo consequat. Duis aute <a href="http://designmoo.com">designmoo</a> irure dolor in reprehenderit in voluptate <a href="http://deviantart.com/example/example">deviantart</a> velit esse molestaie cillum. Tia non ob ea <a href="http://disqus/709754354354/">disqus</a> soluad incommod quae egen <a href="http://dribbble.com/explore/p=89/">dribbble</a> ium improb fugiend. Officia deserunt mollit anim <a href="http://dropbox.com/example/7897894/image.jpg">dropbox</a> id est laborum Et harumd dereud facilis <a href="http://m.ebay.com/electronics/tv/32-lcd/">ebay</a> est er expedit distinct. Nam liber te conscient <a href="http://engadget.com/2012/07/12/example/">engadget</a> to factor tum poen legum odioque civiuda et tam. <a href="http://tutorials.envato.com/example/">envato</a> Neque pecun modut est neque nonor et imper <a href="http://etsy.com">etsy</a> ned libidig met, consectetur adipiscing elit <a href="http://evernote.com/download/">evernote</a>, sed ut labore et dolore magna <a href="http://facebook.com/example/254245/79070987/">facebook</a> aliquam is nostrud exercitation ullam mmodo <a href="http://flickr.com/image/example.jpg">flickr</a> consequet. Duis aute in voluptate <a href="http://forrst.com/">forrst</a> velit esse cillum dolore eu fugiat <a href="http://foursquare.com">foursquare</a> nulla pariatur. At vver eos et accusam dignissum qui <a href="http://example.github.com/project/">github</a> blandit est praesent. Trenz pruca beynocguon doas nog <a href="http://google.com/">google</a> apoply su trenz ucu hugh rasoluguon monugor <a href="http://grooveshark.com/">grooveshark</a> or trenz ucugwo jag scannar. Wa hava <a href="http://imdb.com/actors/example">IMDB</a> laasad trenzsa gwo producgs su IdfoBraid, yop quiel <a href="http://instagr.am/udygfiusdy/3252">instagram</a> geg ba solaly rasponsubla rof <a href="http://kickstarter.com/startups/example">kickstarter</a> trenzur sala ent dusgrubuguon. Offoctivo <a href="http://last.fm">last.fm</a> immoriatoly, hawrgasi pwicos asi sirucor. Thas <a href="http://linkedin.com/example">linkedin</a> sirutciun applios tyu thuso itoms ghuso <a href="http://meetup.com">meetup</a> pwicos gosi sirucor in mixent gosi <a href="http://path.com/325235/">path</a> sirucor ic mixent ples cak ontisi sowios uf Zerm hawr <a href="https://paypal.com/example">paypal</a> rwivos. Unte af phen neige pheings atoot <a href="http://pinterest.com/pins/70974098/">pinterest</a> Prexs eis phat eit sakem eit vory gast <a href="http://rss.example.com/news">RSS feed</a> te Plok peish ba useing phen roxas. Eslo <a href="http://skype.com/example/">skype</a> idaffacgad gef trenz beynocguon <a href="http://soundcloud.com/example/example/">soundcloud</a> quiel ba trenz Spraadshaag ent <a href="http://spotify.com">spotify</a> trenz dreek wirc procassidt program. Pwico vux <a href="http://stumbleupon.com/example/57234095/">StumbleUpon</a> bolug incluros all uf cak sirucor hawrgasi itoms alung gith cakiw <a href="http://technorati.com/2012/example">technorati</a> nog pwicos. Plloaso mako nuto uf cakso dodtos anr koop <a href="http://thenextweb.com/apple/2012/09/21/iphone5">The next web</a> cupy uf cak vux noaw yerw phuno. Whag schengos, <a href="http://example.tumblr.com/">tumblr</a> uf efed, quiel ba mada su otrenzr <a href="http://twitter.com/example">twitter</a> swipontgwook proudgs hus yag su ba dagarmidad. <a href="http://vimeo.com/436436/">vimeo</a> Plasa maku noga wipont trenzsa <a href="http://example.wordpress.com/">wordpress(.com)</a> schengos ent kaap zux copy wipont trenz <a href="http://yahoo.com/">yahoo</a> kipg naar mixent phona. Cak pwico <a href="http://yelp.com/375092387509/">yelp</a> siructiun ruos nust apoply tyu cak sisulutiun <a href="http://youtube.com/example/957982375/">youtube</a> munityuw uw cak jot scannow. Plasa maku noga wipont <a href="http://zerp.ly/example/">zerply</a> trenzsa schengos ent kaap zux copy wipont trenz kipg naar mixent phona.</p> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*styles just for demo*/ | |
| *{ padding:0; margin:0;} | |
| body{ font-family: 'helvetica', arial, serif; line-height: 1.6em; font-size: 1.08em;} | |
| p{padding: 5% 20%; text-align: justify;} | |
| p.light{ background: #ccc; color: rgba(34, 34, 34, 0.5);} | |
| p.dark{background: rgba(34, 34, 34, 1); color: rgba(255, 255, 255, 0.5);} | |
| /*---end---*/ | |
| /*THE-LINK-COLORS------------*/ | |
| /*ABOUT.ME*/ | |
| a[href*="about.me"]{color: #00405d;} | |
| /*ADOBE*/ | |
| a[href*="adobe"]{color: #ff0000;} | |
| /*AIM*/ | |
| a[href*="aim"]{color: #fcd20b;} | |
| /*AMAZON*/ | |
| a[href*="amazon"]{color: #e47911;} | |
| /*ANDROID*/ | |
| a[href*="android"]{color: #a4c639;} | |
| /*AOL*/ | |
| a[href*="aol"]{color: #0060A3;} | |
| /*BEHANCE*/ | |
| a[href*="behance"]{color: #053eff;} | |
| /*BLOGGER*/ | |
| a[href*="blogger"]{color: #fc4f08;} | |
| /*CARBONMADE*/ | |
| a[href*="carbonmade"]{color: #613854;} | |
| /*DELICIOUS*/ | |
| a[href*="delicious"], a[href*="delicio"]{color: #205cc0;} | |
| /*DESIGNMOO*/ | |
| a[href*="designmoo"]{color: #e54a4f;} | |
| /*DEVIANTART*/ | |
| a[href*="deviantart"]{color: #4e6252;} | |
| /*DISQUS*/ | |
| a[href*="disqus"]{color: #db7132;} | |
| /*DRIBBBLE*/ | |
| a[href*="dribbble"]{color: #ea4c89;} | |
| /*DROPBOX*/ | |
| a[href*="dropbox"]{color: #3d9ae8;} | |
| /*DRUPAL*/ | |
| a[href*="drupal"]{color: #0c76ab;} | |
| /*EBAY*/ | |
| a[href*="ebay"]{color: #89c507;} | |
| /*ENGADGET*/ | |
| a[href*="engadget"]{color: #00bdf6;} | |
| /*ENVATO*/ | |
| a[href*="envato"]{color: #528036} | |
| /*ETSY*/ | |
| a[href*="etsy"]{color: #eb6d20;} | |
| /*EVERNOTE*/ | |
| a[href*="evernote"]{color: #5ba525;} | |
| /*FACEBOOK*/ | |
| a[href*="facebook"]{color: #3b5998;} | |
| /*FLICKR*/ | |
| a[href*="flickr"]{color: #ff0084;} | |
| /*FORRST*/ | |
| a[href*="forrst"]{color: #5b9a68;} | |
| /*FOURSQUARE*/ | |
| a[href*="foursquare"]{color: #25a0ca;} | |
| /*GETGLUE*/ | |
| a[href*="getglue"]{color: #2d75a2;} | |
| /*GITHUB*/ | |
| a[href*="github"]{color: #4183c4;} | |
| /*GOOGLE+*/ | |
| a[href*="plus.google"]{color: #db4a39;} | |
| /*GOOGLE*/ | |
| a[href*="google"]{color: #0266c8;} | |
| /*GROOVESHARK*/ | |
| a[href*="grooveshark"]{color: #f77f00;} | |
| /*IMDB*/ | |
| a[href*="imdb"]{color: #f3ce13;} | |
| /*INSTAGRAM*/ | |
| a[href*="instagram"],a[href*="instagr"]{color: #634d40;} | |
| /*KICKSTARTER*/ | |
| a[href*="kickstarter"]{color: #87c442;} | |
| /*LASTFM*/ | |
| a[href*="last"]{color: #c3000d;} | |
| /*LINKEDIN*/ | |
| a[href*="linkedin"]{color: #0e76a8;} | |
| /*MEETUP*/ | |
| a[href*="meetup"]{color: #e51937;} | |
| /*NICOVANZYL*/ | |
| a[href*="nicovanzyl"]{color: #ff6000;} | |
| /*PATH*/ | |
| a[href*="path"]{color: #e41f11;} | |
| /*PAYPAL*/ | |
| a[href*="paypal"]{color: #3b7bbf;} | |
| /*PINTEREST*/ | |
| a[href*="pinterest"]{color: #910101;} | |
| /*READABILITY*/ | |
| a[href*="readability"]{color: #9c0000;} | |
| /*RSS*/ | |
| a[href*="rss"]{color: #ee802f;} | |
| /*SKYPE*/ | |
| a[href*="skype"]{color: #00aff0;} | |
| /*SOUNDCLOUD*/ | |
| a[href*="soundcloud"]{color: #ff7700;} | |
| /*SPOTIFY*/ | |
| a[href*="spotify"]{color: #64b41a;} | |
| /*STUMBLEUPON*/ | |
| a[href*="stumbleupon"]{color: #f74425;} | |
| /*TECHNORATI*/ | |
| a[href*="technorati"]{color: #40a800;} | |
| /*THENEXTWEB*/ | |
| a[href*="thenextweb"]{color: #ef4423;} | |
| /*TUMBLR*/ | |
| a[href*="tumblr"]{color: #34526f;} | |
| /*TWITTER*/ | |
| a[href*="twitter"]{color: #00a0d1;} | |
| /*VIMEO*/ | |
| a[href*="vimeo"]{color: #86c9ef;} | |
| /*WORDPRESS*/ | |
| a[href*="wordpress"]{color: #21759b;} | |
| /*YAHOO*/ | |
| a[href*="yahoo"]{color: #720e9e;} | |
| /*YELP*/ | |
| a[href*="yelp"]{color: #c41200;} | |
| /*YOUTUBE*/ | |
| a[href*="youtube"]{color: #c4302b;} | |
| /*ZERPLY*/ | |
| a[href*="zerp"],a[href*="zerply"]{color: #9dcc7a;} | |
| /*other-*/ | |
| a{ | |
| -webkit-transition:color 0.20s ease-in-out; | |
| -moz-transition:color 0.20s ease-in-out; | |
| -o-transition:color 0.20s ease-in-out; | |
| transition:color 0.20s ease-in-out; | |
| text-decoration: none; | |
| } | |
| a:hover{ color: rgba(70, 83, 164, 1);} | |
| /*-------------------------------------------------------------------------------------------------------------------*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment