Untitled @iamhtml-blog - Tumblr Blog

Posts

Manchester Game Jam : Feb

#my entry #manchester #gamejam #trap #2d #impact #js #javascript

Barclays, PINsentry APP

#app #banking #mobile #barclays #english

Kraddy: Shirt

Shirt i design for Kraddy is finally on sale. http://merch.kraddy.com/

#kraddy #tshirt #design #Illustration

Codebox

right, im finally buying this, it has cloud support. http://www.shpakovski.com/codebox/

#codebox #snippets #code

Workflow: Addy Osmani

Great presentation by Addy Osmani on the present/future of workflows. http://vimeo.com/52450814

#addy osmani #coding #frontend #programming #workflow #sublime #google

JSLint

He wasnt lying. (link)

#jslint #javascript #programming

UIWebView browser / PhoneGap

UIWebView browser i developed for the iPad, Download it here. Run it on the iOS Simulator or upload it to your iPad. It lets you enter the host url and/or refresh the page. Its saved me alot of tears. You can easily change the code so it runs on the iPhone. So get testing your phonegap apps !

#UIWebView #browser #peeping tom #phone gap #ipad #iphone #test #webview

iOS5 native like scrolling with CSS

Scrolling of block level elements without iScroll etc source

.scrolling-element-class { overflow: auto; -webkit-overflow-scrolling: touch; } .scrolling-element-class .child-element { position: relative; -webkit-transform: translate3d(0,0,0); }

#scrolling #webkit #overflow #ios5 #iscroll

Astrophotography animation test

Trying to replicate some Astrophotography into animation, fullscreen seems processing heavy so Test Case 1: repeated background-image, rotating using jquery [see here] Test Case 2: particles spread with jquery over Canvas and rotated with jquery [w.i.p] See concept here

#html #css #astrophotography #jquery #rotate

Coda 2, book catalogue

#books #coda #panic #css #html #jquery #javascript #git

Coda 2 out May 24th

Coda 2 out May 24th for only $49, lots of amazing new features including a full GUI for MySQL management. No multiple display support still though ! Click image above for click through for full list of features.

#coda 2 #html #css #editor #panic

jQuery knobs [holy smokes !!]

http://anthonyterrien.com/knob/

#jquery #knobs #form #elements #ui #ux #html

new Nike plus +

#nike #plus #design #badges #rewards

nice Radio selectors

Select boxes at http://workfu.com/ are quite nice, quick peek at the html/css

<input id="Group" type="radio" value="False" style="display: none; "> <span class="styledCheck checked"></span> <label><span class="title">I'm an Individual</span></label> input { padding: 12px; border: 1px solid #CFCDC4; border-radius: 4px; background: white; color: #353535; width: 100%; } span.styledCheck { display: inline-block; width: 42px; height: 42px; background: url(location-check.png) no-repeat 0 0; cursor: pointer; } span.styledCheck.checked { background-position: 0 -70px; } https://workfu.com/content/images/location-check.png

#check #select #box #ui #css #html #interface #radio

Text-shadow for Internet Explorer 9

Text shadow for all browsers except Internet Explorer (ie)

h1{ //text-shadow: horizontal-shadow vertical-shadow blur color; text-shadow: 1px 2px 2px #000; }

Text shadow for all Internet Explorer (ie) except ie9

h1{ zoom: 1; filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=2, Color=#000); }

Text shadow *hack* for Internet Explorer9 (ie9) (see demo here)

h1 { color: #B8B8B8; position: relative; z-index: 1; } h1:before { position: absolute; content: attr(data-content); color: #000; width: 100%; top: 3px; left: 3px; z-index: -1; } user in conjunction with  then target with lt-ie10 h1 { }

Don't forget, you can use negative values or multiple text-shadows to achieve an inset shadow (see demo here)

#css #text-shadow #type #effect #internet explorer #ie9 #drop shadow #inner shadow

last-child or first-child or adjacent selectors?

Scenario: using lists to tackle a menu. Obvious need to eliminate the margin on the last item. Adding an extra class to the last item for the sake of old browsers?

<ul> <li>one</li> <li>two</li> <li>three</li> </ul>

1) Use last-child- CSS 3 selector (not supported in IE6 IE7 IE8*) If you're using the html5 boiler plate, you can tackle this by adding '.last' class to the last <li>. The html5 boilerplate has a series of statements detecting the IE browser version and applying the relevant class to the html tag. The benefit of this is it allows CSS fixes for specific IE version without needing to use hacks.

ul li{ list-style:none; float:left; margin-right:30px; } ul li:last-child{ margin-right:0; } .ie6 .last, .ie7 .last, .ie8 .last{ margin-right:0; }

2) Use first-child instead-CSS 2.1 selector (not supported in IE6*) Add '.first' class to the first <li> so we can target IE6 browser.

ul li{ list-style:none; float:left; margin-left:30px; } ul li:first-child{ margin-left:0; } .ie6 .first{ margin-left:0; }

3) Uses adjacent sibling selector-CSS 2.1 selector (not supported in IE6*) Add '.first' class to the first <li> so we can target IE6 browser.

ul li{ list-style:none; float:left; margin-left:30px; } ul li + li{ margin-left:0; } .ie6 .first{ margin-left:0; }

4)Use Selectivizr-javascript CSS3 selectors for IE http://selectivizr.com/ OR just simply use '.last' because the client cant wait for you to make up your mind ! Also note, that if you are using modenizr you can inherently 'detect' and tackle older browsers, i.e if your list has css3 gradients then, a graceful fallback would be (more here)

.no-cssgradients li.last{ background: url("bg.png"); }

#css #last-child #first-child #adjacent selectors #html

Adding and 'controlling'image in via css

If you're looking to add in an image wrapped around your text just via CSS, i.e for mobile users, where you cant alter the image size, you can do so by assigning it as a background and changing the size for that

.yourClass:before{ content:""; background:url('images/potrait.png'); background-repeat:no-repeat; background-size:237px 311px; display:block; float:right; width:237px; height:311px; }

#css #content #image #background #rwd #mobile

Trending Blogs

Recently Viewed Blogs

Untitled