Shawson's Code Blog » CSS

New Adobe HTML5 Animation tool “Edge”- free tech preview

shawson — Mon, 01 Aug 2011 11:48:52 +0000

A real nail in the coffin for Flash, as it’s own parents (Adobe) release a free tech demo version of Edge- A new editor that lets you make flash style animations– without Flash! Instead the animations are scripted using standards html5, JavaScript and CSS3. Having been hand coding stuff like this over the past year (for 8week game and the like) I’m interested to see what kind of code this tool actually spits out! Check it out herel; http://t.co/I46QFYm

Overlapping arrow style menu, and CSS sprite sheets.

shawson — Tue, 26 Jul 2011 21:24:39 +0000

Bit of a weird post I guess… I was explaining to a friend how to implement a design they had in html/css and nocked together a reeeeally basic example, and figured I would post it incase it’s of any use to anyone else starting out in html/css. It’s a basic navigation bar where each button is shaped like an arrow, so the buttons all kind of overlap. There is an icon in each, which changes on mouse over, along with the background image of the button. Click the link below and check out the source- the sprite sheet can be viewed here http://codeblog.shawson.co.uk/storage/arrow-nav-bar-sprite-sheet/Sprite-sheet.png

The main example is here;
http://codeblog.shawson.co.uk/storage/arrow-nav-bar-sprite-sheet/

Adding minification and obfuscation of your Javascript and CSS to your ASP.net build process using Yahoo YUI Compressor

shawson — Fri, 22 Jul 2011 08:00:29 +0000

I’ve just finished integrating Yahoo’s YUI Compressor into the MSBuild process for a new web probject I’m working on, and I thought I would document the process as there doesn;t seem to be a start to finish guide about anywhere.

To start with, let me just explain the structure I use for new Solutions;

C:\_Dev\MyNewWebsite\
C:\_Dev\MyNewWebsite\Artwork\
C:\_Dev\MyNewWebsite\BuildTools\
C:\_Dev\MyNewWebsite\Docs\
C:\_Dev\MyNewWebsite\Source\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.sln
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Web\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Web\Controls\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Web\Images\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Web\Scripts\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Web\Services\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Web\Styles\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Web\MyNewWebsiteWeb.csproj
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Entities\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Entities\MyNewWebsiteEntities.csproj
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Interfaces\
C:\_Dev\MyNewWebsite\Source\MyNewWebsite.Interfaces\MyNewWebsiteInterfaces.csproj
C:\_Dev\MyNewWebsite\ThirdParty\

Firstly, download the dot net port of the YUI compressor from codeplex. I then extracted this into a new folder in the BuildTools folder. (there should be 2 dll files and one txt licence file.)

I then created a new MSBuild file called build-minify.xml, in the MyNewWebsite.Web project folder. That file looks like this;

You can create whatever ItemGroups you’d like- then just create a compressor task for each. For a rundown of the settings, check out the link in the comment at the top of the XML there. In the above file I had decided to compress all of my Javascript into a single file called chinook.rel.js, and my fonts and site css file rolled into one file, keeping the ie6 css separate, but still minifying it down.

The next step is to add it to the normal build. I opened the solution in Visual Studio, right clicked my web project and selected properties. Go to “Build Events” and add the following post-build event;

$(MSBuildBinPath)\msbuild.exe  $(ProjectDir)build-minify.xml /target:Minimize

Now you can test it out by building your project. The new minified files are dumped out, in my case to the Scripts folder. Now that the files are there, I need a way of telling my release version of the website to use these instead of the raw, human-readable versions; but I still want to continue using the human-readable versions for development.

To achieve this I use pre-processor directives. These are most commonly seen in the c# code behind files, but can also be used in the aspx files. I added the following lines at the bottom of my master page;

    <% #if (!DEBUG) %>
    
    <% #else %>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <% #endif %>

So if the project is NOT running in debug mode, I import my full chinook.rel.js include which has everything already included, otherwise I manually include all the human readable, separate files.

And that’s pretty much it. Make sure you thoroughly retest your site with your combined java script file, as sometimes minification can cause issues with some code.

Transparent CSS Sprites – Smashing Magazine

shawson — Sun, 31 Oct 2010 11:13:52 +0000

If you are familiar with CSS Sprites, you should be able to grasp this twist relativ via Transparent CSS Sprites – Smashing Magazine. Related posts:Mastering CSS, Part 1: Styling Design Elements | CSS | Smashing Magazine CSS Sprites and a flickering problem in IE6 Flash floating over the top of my div! Related posts:

Google Font API

shawson — Fri, 18 Jun 2010 10:54:19 +0000

Just stumbled across the Google Font API- it’s a (at the moment) small directory of open source fonts hosted by google which can be used on your website via their font API. Looking at the quick start it just seems to be a matter of adding an include to your page, then referencing the fonts in your css, like you would any other font. Clever stuff!

HTML5 & the Processing.js JavaScript library

shawson — Tue, 04 May 2010 20:11:29 +0000

Just reading up on html5 and the processing.js javascript library which takes advantage of the new canvas element to do some pretty cool stuff (check out their ‘exhibition’ section) – came across this site which has loads of useful stuff on it.. code.bocoup.com Related posts:Processingjs & Box2d Physics! Great HTML5 Canvas/ Chrome Demo sites Javascript [...] Related posts:

New site launch- natashahampshire.co.uk

shawson — Wed, 28 Apr 2010 21:04:44 +0000

Juts launched a new portfolio site for my girlfriend, www.natashahampshire.co.uk – This is just the first phase with a few more features and a bunch of extra contact to be added in the coming weeks, but we needed to get it up ASAP so she can apply for a design course in London!

Javascript & CSS Minification

shawson — Wed, 28 Apr 2010 19:14:48 +0000

Is that a real word?

Well anyway, I’m just finishing off a fairly jQuery heavy site I’m building for my girlfriend as an online portfolio site and figured I’d minify the css and jQuery to reduce loading times (as all of my javascript includes combined come to around 100k)- found a really good java app writen by Yahoo(!) called the YUI Compressor – I combined all my javascript into one combined.js file then minified it nocking 30k off the file size. Did the same with css only making a saving of 2-3 k, but every little helps! Very easy to use, but it means you do have to install the java runtime

Mastering CSS, Part 1: Styling Design Elements | CSS | Smashing Magazine

shawson — Mon, 03 Aug 2009 13:02:33 +0000

Excellent set of links to various cool technique and common CSS problems and their solutions, including the one that always gets me- verical centering! Mastering CSS, Part 1: Styling Design Elements | CSS | Smashing Magazine. Related posts:Transparent CSS Sprites – Smashing Magazine New site launch- natashahampshire.co.uk CSS Sprites and a flickering problem in IE6 Related posts:

A Handy CSS Debugging Snippet

shawson — Fri, 29 May 2009 09:21:23 +0000

Found a really handy bit of css for debugging from A Handy CSS Debugging Snippet.

* { outline: 2px dotted red }
 * * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

No related posts.