Pure CSS Timeline – Notebook | MattBango.com I wanted to build a CSS timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup. Introduction First and foremost, is the solution I’m about to share with you the best solution? What are we building? Let’s take a look at a screenshot of the timeline that we’re building in this tutorial. We have a nice looking timeline styled completely with CSS, but what happens if the visitor doesn’t have CSS enabled? What would make this better is if the labels for the x-axis of the timeline would work better with the timeline block labels. The Markup I chose to use a unordered list implementation. The CSS The CSS is as simple as the markup. Summary Take the timeline a step further. Further Reading
Bell: ‘Corruption on Steroids’ (Irfan Khan / Los Angeles Times) Having already dramatically cut the pensions of Bell’s two former top officials, the state retirement system slices their retirement checks further, ruling they are not entitled to five years’ worth of credit they bought for themselves with city funds. Robert Rizzo, Bell’s former chief administrative officer, and Angela Spaccia, the former assistant chief administrative officer, were sent letters by the California Public Employees’ Retirement System on June 6, notifying them of the decision.
20+ Enhancing CSS3 tools and generators CSS3 is an enhanced version of the Cascading Style Sheets specification, and it comes with many enchanting features that revolutionize Web layout and design, as well as other advantages. But it has some disadvantages as well, and tackling them requires smarts. CSS3 is new on the market, so there is still a lot to improve. The major problem is that the properties are browser-specific and cannot be easily implemented across browsers. Developers have to add extra code in order to implement the properties the same way across browsers. In this article, we’ll highlight some effective CSS3 auto-generator tools that can assist developers—especially lazy ones! 1. CSS3, please is a multipurpose tool with versatile features like border-radius, box-shadow and linear gradients. 2. CSS3 Generator helps developers generate cross-browser snippets for various CSS3 properties. 3. Border Radius makes your designs look more elegant with less effort. 4. 5. 7. 8. CSS3 Gen is a handy tool for novice developers.
Centering in the Unknown When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don't know anything? It's still kinda doable. Not too hard: Known Child If you know the height and width of both the element to be centered and its parent element (and those measurements won't change, i.e. not fluid width environment) one foolproof way to center the element is just to absolute position it with pixel values so it looks perfectly centered. Let's say you know the exact width and height of the element you are centering, but the parent element can change in height and width. You absolutely position the element to be centered and set the top and left values to 50% and the margin top and left values to negative half of the elements height and width. Harder: Unknown Child The hard comes in when you don't know the dimensions of the element to be centered. The grossest way to handle it is literally tables: Share On
The Guide To CSS Animation: Principles and Examples - Smashing Magazine Advertisement With CSS animation now supported in both Firefox and Webkit browsers, there is no better time to give it a try. Regardless of its technical form, whether traditional, computer-generated 3-D, Flash or CSS, animation always follows the same basic principles. In this article, we will take our first steps with CSS animation and consider the main guidelines for creating animation with CSS. We’ll be working through an example, building up the animation using the principles of traditional animation. Finally, we’ll see some real-world usages. CSS Animation Properties Before diving into the details, let’s set up the basic CSS: Animation is a new CSS property that allows for animation of most HTML elements (such as div, h1 and span) without JavaScript or Flash. Because the technology is still relatively new, prefixes for the browser vendors are required. All you need to get some CSS animation happening is to attach an animation to an element in the CSS: Those are the basics. Staging Arcs
CSS3 Animations: the Hiccups and Bugs You’ll Want to Avoid CSS3 animation is pretty darn cool. It lets us give hardware accelerated life to our previously dull websites. However, there are some major pitfalls and practices you should be aware of - let's dig in. The browser support for CSS3 animation is hotting up - Mozilla Firefox has joined WebKit in full support, and Internet Explorer 10 as well as Opera 12 have promised future support. This means we can start using them without fear today. Not the Androids We're Looking For Being a Webkit born-and-bred property, you'd expect CSS animation to have full support across all Webkit browsers. So let's say we wanted to work with my animations framework, Animate.css, to make a super cool website. This strange quirk means that the only animations we can run on Android devices are single property ones, such as fadeIn and bounce. Until we see greater support from these Android devices, your best bet is to provide Javascript fallbacks or less complex animations. For 2D, Press 3D Great! See that?
The CSS white-space Property Explained CSS has a pretty useful property called white-space that I’m guessing goes unnoticed among CSS beginners. You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again. This article will attempt to describe, in a very practical, no-nonsense way, the different values for the CSS white-space property, and how each one can be used. I’ll do my best to avoid overly-technical jargon, but with this property, it’s not easy to explain without sounding overly-complex. Some HTML Background In (X)HTML, anytime you string together a bunch of spaces in your code, the actual page output in your browser will, by default, trim (or collapse) all those spaces down to a single space. If you want to allow all space and line breaks to occur naturally, then you can use the big ugly cousin of the white-space property — the <pre> tag. Definition and Possible Values Value: normal Value: pre
CSS Opacity That Doesn’t Affect Child Elements This is a quick tip to demonstrate a way to work around the problem of child elements in your HTML inheriting the “alpha” settings of their parent. This tip is not necessarily recommended, because it creates extra markup and is a little bit messy. But I’m sure it could come in handy in a rare case, depending on the layout of the elements involved, the content, the type of site, etc. First, here is the CSS code necessary to make an HTML element semi-transparent: The different settings are for the various browsers. The Problem With CSS Opacity The problem occurs when we add child elements to the html element that this code affects. The Hacky Solution How can we work around this problem? View Demo Comparing Two Examples You’ll notice at the demo link above that the same set of visual elements is duplicated. You could add more elements to the section on the right, and none of them will inherit the transparency, because, technically, they are not children of the bicycle <div>. Definite Drawbacks
Experiments with background-clip: text With the CSS property "background-clip: text" (which is currently only supported in Webkit browsers), we can add a background image to a text element. Today we will experiment with it and create some fun examples by adding CSS3 transitions. View demo Download source With the CSS property “background-clip: text” (which is currently only supported in Webkit browsers), we can add a background image to a text element. The images in the first demo are by Andreas Preis and the image in the last demo is by Joanna Kustra. The Markup The structure will simply be an h3 heading element with a wrapper: We’ll be applying the class “it-animate” to the wrapper with jQuery in order to show the transitions. Example 1 In the first example we want to add two background images. When using a background image and setting the background-clip to “text”, we need to make sure that the color of the text is either transparent or semi-transparent in order to be able to see the image. Example 2 Example 3 And that’s it!