Mobile Friendly Website

CSSPLAY

Doing it with style

CSS DEMOSShape

Date : 3rd August 2015

For all modern browsers except IE and Firefox



"I shall have to wait until I catch up with it," said Winnie-the-Pooh. "Now, look there." He pointed to the ground in front of him. "What do you see there?" "Tracks," said Piglet. "Paw-marks." He gave a little squeak of excitement. "Oh, Pooh! Do you think it's a--a--a Woozle?"
"It may be," said Pooh. "Sometimes it is, and sometimes it isn't. You never can tell with paw- marks."
With these few words he went on tracking, and Piglet, after watching him for a minute or two, ran after him. Winnie-the-Pooh had come to a sudden stop, and was bending over the tracks in a puzzled sort of way.
"What's the matter?" asked Piglet.
"It's a very funny thing," said Bear, "but there seem to be two animals now. This--whatever-it-was--has been joined by another--whatever-it-is-- and the two of them are now proceeding in company. Would you mind coming with me, Piglet, in case they turn out to be Hostile Animals?"
Piglet scratched his ear in a nice sort of way, and said that he had nothing to do until Friday, and would be delighted to come, in case it really was a Woozle.
"You mean, in case it really is two Woozles," said Winnie-the-Pooh, and Piglet said that anyhow he had nothing to do until Friday. So off they went together.




Information

About nine years ago I produced a demo to show how to wrap text next to an image and follow the path of the image, which involved a large amount of code and styles.
But now this can be done using the 'shape' style with png images that have alpha transparency.

The above demo uses just two images and one paragraph, and has the text follow both images. Hovering/tapping the text or images will have the text scroll upwards and follow the images as it scrolls.

The only problem is that it is not yet supported in Firefox or IE10/11/Edge.

I would have thought that Microsoft would have implemented this in their latest Edge browser, but apparently not.

HTML Code

<div id="shape">
<img id="shape-right" src="shapes/winnie.png">
<img id="shape-left" src="shapes/rabbit.png">
<p id="shape-content">"I shall have to wait until I catch up with it," said Winnie-the-Pooh. "Now, look there." He pointed to the ground in front of him. "What do you see there?"
"Tracks," said Piglet. "Paw-marks." He gave a little squeak of excitement. "Oh, Pooh! Do you think it's a--a--a Woozle?"<br>
"It may be," said Pooh. "Sometimes it is, and sometimes it isn't. You never can tell with paw- marks."<br>
With these few words he went on tracking, and Piglet, after watching him for a minute or two, ran after him. Winnie-the-Pooh had come to a sudden stop, and was bending over the tracks in a puzzled sort of way.<br>
"What's the matter?" asked Piglet.<br>
"It's a very funny thing," said Bear, "but there seem to be two animals now. This--whatever-it-was--has been joined by another--whatever-it-is-- and the two of them are now proceeding in company. Would you mind coming with me, Piglet, in case they turn out to be Hostile Animals?"<br>
Piglet scratched his ear in a nice sort of way, and said that he had nothing to do until Friday, and would be delighted to come, in case it really was a Woozle.<br>
"You mean, in case it really is two Woozles," said Winnie-the-Pooh, and Piglet said that anyhow he had nothing to do until Friday. So off they went together.</p>
</div>

Cascading Style Sheet

#shape {margin:30px auto; overflow:hidden; position:relative;
	font-family: serif;
	font-size: 20px;
	width:100%; max-width:750px;
}
#shape-left {
	width: 31%;
	float: left;
	-webkit-shape-outside: url("shapes/rabbit.png");
	shape-outside: url("shapes/rabbit.png");
}
#shape-right {
	width: 40%;
	float: right;
	-webkit-shape-outside: url("shapes/winnie.png");
	shape-outside: url("shapes/winnie.png");
}
#shape-content {padding:0; margin:0; display:block;
	color: #000;
	text-align: justify;
	-webkit-transition:5s;
	transition:5s;
}

You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.


Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page