The Incredible Em & Elastic Layouts with CSS Almost a year ago, Ty Gossman over at Stylegala asked me to write an article about elastic layouts. The best I could do was a quick email between work. I always meant to come good on that. Thanks for asking; sorry it took so long. This article will walk you through creating a basic elastic layout; what exactly an “em” is and how to calculate them, how to use ems to create an elastic layer for content with scalable text and images, including basic vertical rhythm. What is an Elastic Layout? An elastic layout scales with users’ text size. More accurately, an elastic interface scales with browser text size—commonly a default of 16px—which users can change if they wish. Elastic design uses em values for all elements. They are calculated based on the font size of the parent element. See the elastic layout example. For other live elastic examples, visit Dan Cederholm’s beautiful and elastic SimpleBits, or resize text on this site. Introducing Em, the Elastigirl of CSS Getting Started N.B.

Master Pages In ASP.NET 2.0 A professional web site will have a standardized look across all pages. For example, one popular layout type places a navigation menu on the left side of the page, a copyright on the bottom, and content in the middle. It can be difficult to maintain a standard look if you must always put the common pieces in place with every web form you build. In ASP.NET 2.0, master pages will make the job easier. Marking Up Master Pages To add a master page to a web project, right-click your web project in the Solution Explorer window, select Add New Item, and select the Master Page item type from the Add New Item dialog. <! " <title>Untitled Page</title> <asp:MenuItem NavigateUrl="~/Experiments.aspx" Text="Experiments" Value="Experiments"/> A master page looks very similar to an ASPX file, except a master page will have a .master file extension instead of a .aspx extension, and uses an @ Master directive instead of an @ Page directive at the top. EndIf EndSub

Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser. by Matthew James Taylor on 26 July 2008 A lot of people want centered menus on their website but for the CSS novice this task seems impossible. If you do a search online you will find a few centering methods but most of these rely on CSS hacks, JavaScript or non-standard CSS rules that are not supported by all browsers (display:inline-block; is an example). In this post I'm going to show you my secret method of achieving centered tabs that does not use any CSS hacks and will work in all the common web browsers. It is also compatible with my perfect liquid layouts. Let's start with a basic example then I'll explain how it works. Centered Menu Basic Example Below you should see four horizontally centered tabs in this column of text, the second tab is set as active. See some more advanced centered CSS menu examples Centered Menu HTML The HTML used for centered menus is semantically structured and very basic. Centered Menu CSS Below is the CSS used to center the tabs across the page. Safari Mac

Z63 | Vertical align anything with just 3 lines of CSS | With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height. The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text etc. So, to vertically align anything we write: That’s all you need. To make it even more simple, we can write it as a mixin: You can find a demo of it here: See the Pen Vertical center with only 3 lines of CSS by sebastianekstrom (@sebastianekstrom) on CodePen. Update (April 25th, 2014) As a few people have pointed out, this method can cause elements to be blurry due to the element being placed on a “half pixel”. Or, you can set the perspective of the element (thanks to roydukkey):

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along. Before we get started, consider using one of our HTML5 Templates or CSS Themes for your next project—that is, if you need a quick and professional solution. Otherwise, it's time to dig into these techniques. HTML 5 is the next major version of HTML. Before we begin marking up the page we should get the overall structure straight: In HTML 5 there are specific tags meant for marking up the header, navigation, sidebar and footer. It still looks like HTML markup, but there are a few things to note: In HTML 5, there is only one doctype. Instead of using divs to contain different sections of the page we are now using appropriate, semantic tags. "What?! That's all!

W3Schools Online Web Tutorials The Future of Style The Future of Style aggregates posts from various blogs that talk about the development of Cascading Style Sheets (CSS) [not development with Cascading Style Sheets]. While it is hosted by the W3C CSS Working Group, the content of the individual entries represent only the opinion of their respective authors and does not reflect the position of the CSS Working Group or the W3C. CSS Scoping, CSS Line Grid First Public Working Draft The CSS WG has published First Public Working Drafts of two new modules: CSS Line Grid Module Level 1 Contains CSS features for aligning content to a baseline grid. CSS Scoping Module Level 1 Defines various scoping/encapsulation mechanisms for CSS, including scoped styles and the @scope rule, Shadow DOM selectors, and page/region-based styling. These are early-stage working drafts: the features described therein are not well-baked and may change dramatically or be removed. Environments for Humans organizes the 3-day CSS Dev Conf 201… Minutes Telecon 2014-04-02

CSS demonstrations Below is a list of CSS demonstrations that range from the simplest for beginners, to the most complex for advanced users. If you do not find what you are looking for then please contact me with your requirements and I will let you know if it is possible using just CSS. Avatar ParadeSimple image display using :hover. What's on TVAnother method of displaying images using :hover. A photograph galleryA photo gallery using thumbnail images. A photograph gallery - with links » 20-02-2009A photo gallery using thumbnail images amd linking to large images. A photograph gallery - using <object> » 06-06-2009A photo gallery using the object element. A mixed gallery - using <object> » 22-06-2009A mixed gallery using the object element. Photo Gallery Mk.IIA photo gallery with horizontal scrolling. A gallery using :target » 25-11-2011A gallery using :target with no browser window jump and no cycling back though the image using the 'back' button. Sliding photo-galleriesCompressed images that expand on :hover.

Mind Blowing Parallax Scrolling Sites Video games often use parallax scrolling technique to create an illusion of depth by moving multiple layers of images at different speed. This technique can also be applied in web design. This post consists a list of mind blowing parallax scrolling sites, design tips, and resource tutorials. If you are considering to start a parallax scrolling site, this is a must read post. Nike Better World Nike Better World is probably one of the early sites who started this parallax scrolling trend. Smart USA As you scroll down the Smart USA site, the elements zoom to you. Ben The Body Guard Although the perspective seems very wrong (it doesn't feel like a bird's-eye view) on Ben The Body Guard, but having a character and trian runs across the scene is pretty cool. Laurentius I don't understand Dutch, but browsing on Laurentius site was very enjoyable. Mario Kart Wii Mario Kart site gives you the same kind of experience as if you were playing on the Wii. Moods of Norway Art of Flight Smokey Bones BeerCamp