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. Still looking good. 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.
Grid. Css3. Scroll. 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. A companion reference to the article, The Incredible Em and Elastic Layouts With CSS. The em values in the table assume that the generic browser default setting of 16px font size has not being changed. It also assumes that the <body> has font size set to 1em or 100%. Formula to calculate em equivalent for any pixel value required 1 ÷ parent font size (px) × required pixels = em equivalent Example: 770px wide, centred elastic layout using CSS and ems N.B. This assumes the browser default font size is unchanged at 16px. body{} selector set to font-size:1em;. 1 ÷ 16 × 770 = 48.125em <html><body><div> … </div></body></html> *I deliberately hooked the formula for the tutorial around 1px, as a value that designers can easily relate to.
Required element pixel value ÷ parent font size in pixels = em value So, our required width of 770px in ems can be calculated like this: 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. 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.
How the centering method works Non-floated div Left floated div No CSS hacks. 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. It introduces a bunch of new elements that will make our pages more semantic. This will make it a lot easier for search engines and screenreaders to navigate our pages, and improve the web experience for everyone. 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.
"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.