html5shiv - HTML5 IE enabling script Dual licensed under the MIT or GPL Version 2 licenses Full original, uncompressed source available here: Source code adds new HTML5 elements (which is simple code), but also supports printing HTML5 elements and includes the default styles for HTML5 elements, like block on article and section. Getting it to work in the browser was easy, @jon_neal and afarkas made IE actually print HTML5 elements - these guys are to take all the credit. To use this script, download the html5shiv and roll it in to your own code (ideally minified). Common question: what's the difference between the html5shim and the html5shiv?
Sass vs. Stylus: Who Wins the Minimal Syntax Battle? Today we’re going to pit two CSS preprocessors head to head. You’ve no doubt seen lots of discussion about how SCSS compares to LESS, but where does Stylus, the new kid on the block, factor in? Can it possibly match the power and versatility of SASS? We’ll jump head first into both syntaxes and compare them side by side to see which is more logical and versatile. We’ll also talk about features and give you a clear argument for why one preprocessor is more powerful. You can rest assured, we’re not going to wuss out and give you some crap about a tie, there will be a winner! Sass, Not SCSS One little detail needs to be addressed before we dive into this any further. However, for the sake of comparison, Sass is actually much closer to Stylus than its sibling SCSS. Alas, this is not an article on the merits of Sass vs. Basic Syntax Let’s start with a direct comparison of both syntaxes at their most basic level. As you can see, they’re almost identical. Flexibility Basic Syntax Winner: Stylus
Designing CSS Layouts With Flexbox Is As Easy As Pie Advertisement This article is an updated excerpt of the chapter “Restyle, Recode, Reimagine With CSS3″ from our Smashing Book #3, written by Lea Verou and David Storey. — Ed. Flexible box layout (or flexbox) is a new box model optimized for UI layout. As one of the first CSS modules designed for actual layout (floats were really meant mostly for things such as wrapping text around images), it makes a lot of tasks much easier, or even possible at all. Flexbox’s repertoire includes the simple centering of elements (both horizontally and vertically), the expansion and contraction of elements to fill available space, and source-code independent layout, among others abilities. Flexbox has lived a storied existence. There are, however, some caveats. When you specify that an element will use the flexbox model, its children are laid out along either the horizontal or vertical axis, depending on the direction specified. Example: Horizontal And Vertical Centering (Or The Holy Grail Of Web Design) <!
10 Professional Free CSS Editors CSS or Cascading Style Sheets is a particular type of web language that is used in order to describe the different semantics (that is the get up as well as the presentation) of a particular document. It is the most widely used application to develop the web pages those are written in HTML as well as XHTML. There are certain free CSS Editors which provide the user to incorporate new CSS and to distinguish the common CSS categories. With the help of these free CSS Editors the users can have a look at the changes almost instantaneously and can you have a firsthand impression about how the webpage will appear, and the effect it will have on your entire template. On choosing a particular tag, this editor will provide you a code that is an example compatible to that particular tag. A few free CSS Editors will give the users the chance to create the basic design very easily. Notepad++ editor PSPad Stylizer – Real-Time CSS Editing TopStyle 4 for Windows Xyle scope Rapid CSS Editor
scottjehl/picturefill 5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours You’ve been coding for a while now and know your way around a CSS file. You’re certainly no master, but with enough fiddling you can get where you want to go. You’re wondering though if you’ll ever get past that point where CSS is such a struggle. Will you ever be able to bust out a complex layout without ultimately resorting to trial and error to see what works and what doesn’t? The good news is that you can indeed get past that frustrating point where you know enough CSS to code a website, but lack the solid foundation that allows you to code without the annoyance of not exactly understanding how you’re going to get where you’re going, and this point is a lot closer than you think. 1. If you really want to have a solid understanding of how to use CSS to move HTML elements to where you want them to go, you absolutely must get a grip on positioning contexts. There are actually five position values that you should understand. Resources To Get You There The Lowdown on Absolute vs. 2. 3.
Aspects & Reference (speaker website) Journey Into Mordor With CSS Today’s project is silly and fun, but it does have a real point and educational purpose. In a recent article, I explored five ways to use multiple CSS background images to create cool hover effects. I had one idea in that article that I didn’t get to simply because its complexity merited a standalone explanation. This article then is an extension of that previous discussion. We’ll be using multiple backgrounds to create a cool cinematic effect where someone traverses a map while the vantage point zooms out. The best and most nerd-tastic way to show this off is of course to use the familiar tale of Frodo crossing Middle Earth to arrive at Mount Doom in Mordor. The Concept The basic idea for this hover effect is simple. To make things even more interesting, I want the scene to start on a zoomed in view of the subject and then pan out to view the landscape as a whole. Why Middle Earth? The most practical use that I could think of for this idea was to show someone moving across a map.
Box Sizing The "box model" in CSS works like this: width + padding + border = actual visible/rendered width of box height + padding + border = actual visible/rendered height of box It's a little weird, but you get used to it. width = actual visible/rendered width of box height = actual visible/rendered height of box The border and padding values moved inward, cutting into the width/height of the box rather than expanding it. It was weird quirk to have to deal with, although the fix was usually as easy as setting a proper DOCTYPE and getting out of quirks mode. The mind bending continues with the modern implementation. If you wanted to ensure the box kissed the edges of the parent, but still use a 100% width declaration, you'd have to set the child divs width to 476px. This <div> pseudo markup only takes us so far, because the answer of course is to not use a 100% width declaration. I would love a different box model! Kapow! The box-sizing CSS3 property can do just this. View Demo Support Min / Max Notes
How to Build a Fully Functional CSS3-Only Content Slider Content sliders are a great way to make a website more dynamic. They add flair, and if used correctly, could be the difference between a purchase and a back button. Normally, they would be built with jQuery or some other Javascript library. However, with the advent of CSS3, I will show you how to build one using only CSS. The result won’t be the most semantic thing to ever be made, but it will be completely functional nonetheless. Demo & Source Files View the DemoDownload the Source Files Screenshot Some simple HTML to start with Granted, that looks scary. We have a “content-slider” div, which holds all the content. Then, we have two sections: the “content” div and the “nav” ul. Now, right inside the “content” div, you’ll notice 6 nested divs: “content-inner-1” through “content-inner-6“. The Magical CSS As I said, all we did to the “content-slider” div was center it, and move it 100px from the top of the page. The “content” div styling is very important. Now, we have some generic styling.
A Dao of Web Design What Zen was to the 70’s (most famously with motorcycle maintenance), the Tao Te Ching was to the 90’s. From Piglet and Pooh to Physics and back, many have sought sense in applying the Tao Te Ching to something (the Tao of Physics), or something to the Tao Te Ching (the Tao of Pooh). It can be a cheap trick, but lately it has struck me that there is more than a little to be understood about web design by looking through the prism of the Tao. Article Continues Below Daoism is a philosophy, like Buddhism, a way of living, of being in the world, which stems from a text of great antiquity, the Tao Te Ching, whose 81 “chapters” enigmatically sweep across human experience, but with a strong common theme, that of harmony. For the last couple of years, for better or worse, my life has revolved more than a little around style sheets. What I sense is a real tension between the web as we know it, and the web as it would be. Same old new medium? Controlling web pages#section2 [The Sage] The Way#section5
CSS3 Transitions Without Using :hover Up to this point, the most common use for CSS3 Transitions has been in conjunction with the well-known CSS :hover pseudo-class. Here’s a typical transition that changes link color on mouseover using pure CSS: This will animate the color property when you hover over a link on the page. You can animate CSS properties via transitions using some other CSS techniques, a number of which I’ve outlined below. Transitions Using :active The :active pseudo-class matches any element that’s in the process of being activated. Here’s some CSS and an accompanying demo that demonstrates using :active along with CSS3 transitions to mimic a mousedown event: With this code, the box’s width and height properties are animated to become larger as you hold the mouse down on the element. Here’s a demo: Transitions Using :focus You can use the :focus pseudo-class to do something similar. And here’s a live demo: Transitions Using :checked And here’s a simple demo: Transitions Using :disabled Here’s the demo:
Marquee element An example of an HTML marquee displaying the text "Wikipedia" Usability problems[edit] Marquee can be distracting.[1] The human eye is attracted to movement,[2] and marquee text is constantly moving. As with the blink element, because the marquee tagged images or text are not always completely visible, it can make printing such webpages to a paper hard-copy an impossible and inefficient task where the specific printed pages where the messages on screen scroll or blink have to be printed multiple times to capture all the pieces of text that could be displayed at any one given moment in time. Because marquee text moves, links within it are more difficult to click than those in static text, depending on the speed and length of the scrolling. Attributes[edit] Unlike its blinking counterpart, the marquee element has several attributes that can be used to control and adjust the appearance of the marquee. Align Uses the same syntax as the img element. Behavior Bgcolor Direction Width Loop Scrollamount