CSS3 Flexbox « Isotoma Blog. CSS3 brings us a host of new features. Whilst most people will be familiar with gradients, text-shadow etc. I’d like to draw your attention to one of the lesser known modules in CSS3: flexbox. What’s interesting about Flexbox is that you can use it now if you use a Gecko or Webkit based browser (no IE sadly and Opera’s support isn’t there yet). What does Flexbox bring us that we didn’t have before? Well it gives us a whole raft of new ways of controlling layout and flow. What we now achieve with floats we can do far more successfully and with more control with Flexbox. I’ve never liked floats, they always seemed a hacky way of structuring HTML.
Display: box Example 1 box-orient Example 2 Box-orient is inherited i.e. child elements will also be aligned horizontally. Example 3 Observant viewer will have noticed that Firefox (3.6.8) ignores the width and height setting on the child boxes, whilst Webkit respects it but overflows the content. box-ordinal-group Example 4 box-flex example 5 Example 6. CSS Font Shorthand Property Cheat Sheet. In the past I’ve displayed some serious animosity towards the CSS font shorthand property, so I feel I should make up for it. After all, the font shorthand property was just minding its own business, trying to save developers some lines of code, and I come along and declare it an outcast.
So, although I still don’t agree with ever using font shorthand, I do think it’s important that CSS developers understand how it works. So to make up for my former font shorthand hostilities, I’ve prepared a printable cheat sheet that you can download and hang next to your computer, which will come in handy in case you decide to use this property yourself, or are forced use it in a stylesheet from an inherited project. Enjoy! Download the CSS Font Shorthand Cheat Sheet (PDF) Advertise Here Comment Rules: Please use a real name or alias. Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags.
Designing with Web Standards MSM612.W12: Print Stylesheets lecture. The Essential Guide to @font-face. Fonts on the Web The days of being limited to a handful of fonts on the web are very close to being a thing of the past. The problem is no longer a lack of viable solutions, but rather, an abundance of them. Technologies like Cufon, sIFR, FLIR and @font-face all represent different groups of developers placing bets on what they believe to be the future of web typography.
There is, as of yet, no consensus in this ever-evolving game. All of these methods have perfectly valid arguments both for and against their use. Further, even the most popular browsers support each of these technologies in widely varying degrees. However, the @font-face CSS method is among the strongest, simplest and most flexible competitors in this game.
This guide will teach you how to implement @font-face with cross-browser compatibility and will also look at a number of the supporting services that have arisen, making it even easier to use custom fonts in your web designs. Licensing and Free Fonts The Basic Syntax.
CSS3 Zoooom images. CSSplay Zoooom Images 8th November 2011 IE7, IE8, IE9, IE10, Firefox, Opera, Safari and Chrome Photographs taken in Gloucester Cathedral during a recent Exhibition copyright © stu nicholls - CSS play Information A method of controlling the zoom of a set of images. Just hover any of the above images to give a zoom to full size of that image and a gradient zoom of any images to the left and right of this image. You can move left/right between images to zoom the adjacent images to full size. Works by using an overlay of links and the general sibling selector to control the size, position and opacity of the images. Each image can also be a link to another page. IE will see an instant jump in the size of the images, but all other browsers will see these animate to size, position and opacity.
Copyright Because of all the time and effort spent in producing this demonstrationI would ask that you respect my copyright. Nice and Free CSS Templates - StumbleUpon.
Fixed Fade Out Menu: A CSS and jQuery Tutorial | Codrops - StumbleUpon. Inspired by David Walsh’s top navigation bar that gets semi-transparent when you scroll down the page, I decided to create a tutorial out of that idea. The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost […] View demoDownload source Inspired by David Walsh’s top navigation bar that gets semi-transparent when you scroll down the page, I decided to create a tutorial out of that idea. The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent.
When the user hovers over it, the menu then becomes opaque again. Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page. Ok, let’s start. 1. The markup is pretty simple: we have a div with a list inside. Let’s look at the style now. 2. And that’s all the style! 3. 14 CSS3 Smashing Generators | Marked Lines - StumbleUpon. Many exciting new functions and features are being thought up for CSS3. You can try and take the code to use them with a CSS3 Generator. Below there are 14 wonderful generators that they will help you with these new functions and features! The post is a refresh of 6 CSS3 Smashing Generators. CSS3 Buttons | Simple CSS3 framework for creating GitHub style button links - StumbleUpon.
Nine Techniques for CSS Image Replacement. CSS image replacement is a technique of replacing a text element (usually a header tag) with an image. An example of this would be including a logo on a page. You may want to use a <h1>tag and text for this for the accessibility and SEO benefits, but ideally you'd like to show your logo, not text. Note that some of these techniques are very old. Web design in the early 2000's was a lot different than it is now, but there was still much thought being put into accessibility. The report card consists of five major categories: CSS ON / Images ONRepresents browsers in their normal states.
Technique #1 <h1 id="technique-one"><span>CSS-Tricks</span></h1> More information: This technique is referred to as FIR or "Fahrner Image Replacement". Technique #2 <h1 class="technique-two"> CSS-Tricks </h1> More information: Radu Darvas is credited with this technique. Technique #3 <h1 class="technique-three"> CSS-Tricks </h1> Technique #4 Technique #5 Technique #6 <h1 class="technique-six"> CSS-Tricks </h1>