Archive results for: CSS3

CSS Tools and Methodologies Presentation

Brad Westfall gave a great presentation on CSS methodologies.  If you want to learn how to write CSS the right way, you need to watch this, really.


Preserve Font-size with Landscape orientation

In apple mobile devices, the font-size rescales when the viewport changes to increase readability.

So the font-size will zoom larger from portrait to landscape orientation. To prevent this but to not restrict desktop uses from being able to make the font-size larger (zoom in), you can put this CSS property -webkit-text-size-adjust in a media query:

By setting this property to 100%, you are telling WebKit to disable the automatic behavior, but still allow user-initiated zoom.


CSS3 Tip: Root Em

A new relative measurement in CSS3 is called a rem (for root em) developed by that bases font size on the size of the root (html) element. If you specify the size of the html element (presumably to 100%), all elements that are specified in rem measurements will be relative to that size, not their inherited size.

This gets rid of the compounding issue that makes ems potentially aggravating. The drawback is that IE8 and earlier and other older browsers do not support rems, so you need to provide a fallback font size in pixels. Browsers that support rems will use the last declaration in the stack.

Reference: http://www.sitepoint.com/css3-rem-units/


CSS3: Quick Tips

Transparency settings via CSS have been around for some time, and even Internet Explorer has made way for transparency using non-standard filters. But CSS3 expands on our options by adding RGBA colors to the well-known opacity property:

Using CSS3 Opacity poperty, we’ve set the element to be 60% opaque (or 40% transparent). The Opacity property accepts any decimal value between zero and one, with zero representing full transparency.

You can also set the color option with an alpha setting:

Read more ›


5 Online CSS3 Tools

  1. Transforms (http://westciv.com/tools/transforms/index.html) – Create 2D and 3D transforms with sliders.
  2. Ceaser: CSS Easing and Animation Tool (http://matthewlein.com/ceaser/) – CSS transitions create animation techniques.
  3. CSS3 Button Maker – (http://css3designer.com/tools) – Use sliders to modify the padding, box-shadow, background color, border and text settings.
  4. CSS3 Click Chart (http://css3clickchart.com/#box-sizing) – Select from a host of CSS3 properties, (i.e. text-shadow, background-size, etc.) and view example code.
  5. Patternizer – (http://patternizer.com/imd3) – Patternizer is intuitive, powerful and a joy to use.

CSS3: Keyframe Animation

CSS3 Transitions are good but naturally limited; they are only applied when a property value changes.

The CSS3 Animations Module goes beyond what is possible with Transitions, allowing animations to be applied directly to elements with a syntax that is more flexible and permits more granular control. Animations and transitions have quite a lot of syntax in common, but the process for creating animations is very different: First, you define the properties and timings, and then you add the animation controls to the elements that will be animated.

The Animations Module is implemented in all current browsers, so check the Can I Use CSS3 website to check specific versions. Read more ›


CSS3: Transitions

CSS3 transitions smooth out value changes in your stylesheets when triggered by interactions like hovering, clicking, and focusing.

This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).

Let’s start with a simple example, where we’ll add a transition to the background color swap of a link. When hovered over, the link’s background color will change, and we’ll use a transition to smooth out that change, an effect previously only possible using JavaScript, but now possible with a few simple lines of CSS.

Next, we’ll add a declaration for the normal link state with a little padding and a light green background, followed by the background swap to a darker green on hover.


Read more ›