background preloader

Posts

Posts
Once again, after reading somebody else's article, I felt inspired to put together an alternative example. In this case: Text Rotation. Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. It's like the top fell off the pepper shaker and you've suddenly got a large pile of pepper on your food. Thankfully, many of the popular browsers of today support the ability to rotate HTML elements. <div class="example-date"><span class="day">31</span><span class="month">July</span><span class="year">2009</span></div> Nice and clean without too many extras. The Magical CSS For Webkit and Firefox (as of 3.5), you can take advantage of the proposed transform property to handle the rotation. -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); In order to perform a transformation, the element has to be set to display:block. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Quick Tip: CSS 100% Height | TutWow I don’t know about you, but I always get frustrated trying to figure out how to get my layout to stretch vertically to 100% of the page. I have a div that I want to stretch, but it just doesn’t stretch. Now why wouldn’t it do that? Say you have coded an HTML file like this: <! And you have a CSS file like this: That gives you this example file. Let me give you a different way of thinking about HTML. When we put the “height: 100%;” style onto the <div id=”content”> box, what we are doing is telling it to stretch to the full height of the box that it is in. To fix this, we need to tell the <body> box to get bigger. So if we change our CSS file to this: And that’s it! Update: Thanks to some very helpful comments, I have updated the final CSS so that the #content div now has “min-height: 100%” instead of just “height: 100%”.

ServiceLocator and Unity – Be Careful - Jeremiah Clark's Blog Chris Tavarez has provided a handy adapter ( UnityServiceLocator ) for using ServiceLocator to resolve types from a Unity container. You can then use ServiceLocator.SetLocatorProvider() to register the UnityServiceLocator as the default provider for ServiceLocator. For this example, we will be using ServiceLocator and Unity to resolve the type IFoo to Foo using a singleton lifetime. Here are four different approaches to configuring ServiceLocator and Unity that I have found during my searches on the web: 1: static void Main( string [] args) 3: UnityServiceLocator locator = new UnityServiceLocator(ConfigureUnityContainer()); 4: ServiceLocator.SetLocatorProvider(() => locator); 6: var a = ServiceLocator.Current.GetInstance<IFoo>(); 7: var b = ServiceLocator.Current.GetInstance<IFoo>(); 9: Console.WriteLine(a.Equals(b)); 12: private static IUnityContainer ConfigureUnityContainer() 14: UnityContainer container = new UnityContainer(); 16: return container; 8: Console.WriteLine(a.Equals(b)); Pop quiz:

One Page Résumé Site A friend of mine recently sent me her résumé to look over. I'm definitely not a professional job hunter but I think in these situations any extra set of eyes can help fine tune the final product. As it was, the résumé was a Microsoft Word document, which in itself is fine, but it wasn't particularly well designed. I thought, we're going on 2010 here, we might as well take this thing to the web! I created a really simple design. Then I replaced all her content with good ol' C'thulu so I have a generic template I can give out to you folks. View Demo Download Files Really nothing too amazing here, just a clean layout. Contact information using microformatsMain resume area using what I think is the semantically correct definition list (<dl>)Literally one page (just an index.html file, with optional images)Prints nicely Print Preview Of course feel free to do whatever you want with it. Share On

.NET Junkie - Dependency Injection in ASP.NET Web Forms with the Common Service Locator When working with IoC frameworks, one should always try to minimize the amount of application code that takes a dependency on that framework. In an ideal world, there would only be a single place in the application were the container is queried for dependencies. ASP.NET Web Forms however, was never designed with these concepts in mind. It therefore is tempting to directly request for dependencies in the Page classes instead of looking for a workaround. This is what a Page could look like without such a workaround: public partial class _Default : System.Web.UI. public _Default () { this .userService = ServiceLocator .Current.GetInstance<IUserService>(); } } While this doesn’t look that bad, it creates a dependency on an particular implementation and even when your calling an abstraction (as I do with the Common Service Locator in the example) you might want to prevent this, because you’ve still got a dependency and a bit of plumbing in each and every page. protected _Default () { }

The CSS-Only Accordion Effect Update: I’ve created an advanced version of this technique that works in IE6! Read more here. The Accordion Effect is fast becoming one of the most commonly used (and perhaps abused?) effects of the Web 2.0 world. First off, what is an “accordion” effect? Our accordion will work exactly the same way: all of the elements will be partially visible when the user loads the page. So how do we accomplish this trick? <div id="accordion"><div id="part1"><p>This text is in part 1. My first div defines where my accordion starts and ends. So now, let’s start building our accordion. All I’ve done is give my accordion a specific width and centered it in the page for a nice visual effect. This snippet floats all of my divs to the left and gives them a specific width and height. The overflow: hidden part here is also crucially important. So now that we’ve created our default state, we need to create our hover or “active” state. The :hover pseudo-class comes into play here again. So there you have it.

Why does everyone say dependency injection in ASP.NET webforms is hard when PageHandlerFactory and IHttpHandlerFactory exist How to Create a CSS Menu Using Image Sprites Follow these steps to build your own modern navigation bar design, starting with the initial steps in Photoshop to flesh out the design, then moving on to constructing the HTML and styling with the CSS image sprite technique. However, if all that sounds too strenuous, there’s also a handy download of the source files especially for you! View Demo Download Start work in Adobe Photoshop and create a new document at your desired size. Grab the Rounded Rectangle shape tool and draw a long, thin bar onto the canvas on its own layer. Double click the layer to open the layer style options. Head down to the Stroke options and add a thin outline stroke with a mid grey colour. The bar so far has a soft bevelled appearance, and is ready for being filled with menu options. Use the Text Tool to type out a range of menu options. Double click the text layer, then add a darker Gradient Overlay. On a new layer, use the Mask Tool to draw a 1px line. Group all the layers of the menu together, then make a copy.

Inversion of Control and Dependency Injection: Working with Windsor Container Oren Eini November 2006 Applies to: Visual Studio 2005 Team Edition for Software Architects .NET Framework Inversion of Control (IoC) Dependency Injection (DI) Windsor Container Summary: This article discusses how to use Inversion of Control and Dependency Injection, generic specialization, the decorator pattern, chains of responsibilities, and extensible software to build robust, extensible, working software. (16 printed pages) Contents How to Build Better SoftwareThe First Feature: Dispatching an OrderLooking at a More Complex Example How to Build Better Software Close your eyes, take a deep breath, click your heels three times, and say, "There's no better thing than Inversion of Control and Dependency Injection, generic specialization, the decorator pattern, chains of responsibilities, and extensible software." This article will discuss using all of the aforementioned to build robust, extensible, working software. If you want to learn all about Windsor itself, you can go to its Web site. <!

CSS Bubble Tooltips CSS Bubble Tooltips Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. This example will show you how well this tooltip stretches for long descriptions when you hover here! If you dont like how it allows you to hover over the tooltip also then you can adjust the padding and top to separate the tool tip from the link. Download Source

Related: