• Introduction
• Format
• Example 1
• Example 2
• Example 3
• Example 4
• Example 5
• Related links

Introduction

The format

• The direction of the reflection. This can be left, right, top or bottom.
• The offset. This can be in pixels or a percentage. Bear in mind that the size and offset of the reflection does not affect the page layout.
• A color mask for the gradient (optional). Using this you can achieve graduated reflections, as shown below.

Example 1

This shows a basic reflection on the right of an image:

-webkit-box-reflect: right 0;

Example 2

This is the same image but with the reflection on the left hand side and offset a little. Note that the layout of the page is not affected by the reflection (much like box-shadow in this respect).

-webkit-box-reflect: left 5;

Example 3

This example has a mask applied using a gradient.

-webkit-box-reflect: right 0 -webkit-gradient(linear, right top, left top, from(rgba(255,255,255,0.7)), to(transparent))

As you can see, this example uses a gradient mask to produce a fade out effect.

Example 4

As you can see below, reflections work on just about any element, not just images.

lorem ipsum delore lorem ipsum lorem ipsum delore lorem ipsum lorem ipsum delore lorem ipsum lorem ipsum delore lorem ipsum

border: 2px solid gray; padding: 5px; width: 230px; -webkit-box-reflect: right 0

Example 5

You even use CSS reflections on video elements if you wish. This shows a short video reflected to the right. It only plays in Google Chrome, (Safari doesn't support the video).

Related links

• http://webkit.org/blog/182/css-reflections/

• Documented grid autofit properties for the Bar, Gantt, Hbar, Line and Scatter charts
• Reorganized the documentation pages
• Added a warning to the website for MSIE 6 & 7

• Added properties to the Horizontal Bar chart: chart.title.xaxis, chart.title.yaxis, chart.title.xaxis.pos, chart.title.yaxis.pos
• Slightly increased the area recognised to initiate resizing the Rose (ie the size of the hotspot)
• Added adjusting to the TRadar

On a separate note - I've updated the HTML5 GeoLocation example with an embedded Google map. This will probably be more useful to you. Also, if you have the Google Toolbar installed, MSIE appears to have GeoLocation support (!).]]> http://www.phpguru.org/article/474 Sat, 29 May 2010 23:32:39 +0100 Back to crappy rain here. Still, at least I'm not melting. Not entirely sure which I prefer - melting or freezing. It does however mean I've spent more time on RGraph. Here's this weeks skinny:

• Added adjusting to the Bar chart
• Added gray border effect to the Odometer
• Added chart.tickmarks.highlight to the Odometer
• Added adjusting to the Progress bar
• Added adjusting to the Rose chart
• Added chart.ymin to the Scatter chart

• Updated the .getSegment() core function for use with the Rose and Donut variant charts
• Added RGraph.array_pad() function to the core library
• Grouped Bar charts can now have shadows going to the left
• The Line chart linewidth can now, as well as being a single number, be an array of numbers, one for each line
• You can now have labels on the inside of the Line charts Y axis as opposed to having them in the gutter
• The ModalDialog and zoom background DIVs are now much better in regards to page coverage (the semi-opaque background)
• You can now pass a color as the second argument to RGraph.Redraw() which it will use
• Resizing the window when zoomed no longer hides the zoom
• Little bit of work on the Odometer pointers and MSIE compatibility
• Added a "digital" readout option to the Odometer, as shown on the example page
• The Progress Bar can now have an "in-bar" indicator
• Converted the Pie chart to use RGraph.getSegment() for tooltips
• You can now set the strokestyle with the Rose chart
• Converted the Rose chart to use RGraph.getSegment() for tooltips
• Added chart.line.linewidth to the Scatter chart, and, as with the line, it can be either a number or an array of numbers
• The Scatter chart option chart.line.stepped can now, as well as simply true or false, be an array of booleans. This allows you to have multiple lines, some stepped, some not

• You can now have multi-line labels by using the text "\r\n" in your label (without the quotes). There's an example of this on the tooltips documentation page: http://www.rgraph.net/docs/tooltips.html
• Resizing a graph no longer affects the page layout
• Added labels to the Rose chart
• The Rose chart origin is now the "north" axis
• Removed a lot of examples from the website and made the whole thing a little more streamlined
• Once visible, you can now double click a zoomed area to expand it to a full size zoom. You can see this on the line graph on the front page.