SHAPE YOUR
TEXT WITH IMAGE
When you are reading newspapers, magazine or some reading
stuff you’ve noticed that page is designed is pretty cool text wrapping style
with combination of image and text which is style related to article.
Take a look you need to do like that…
 |
| HTML Page with Image & Text Wrap |
It’s look pretty cool…
I’m not cropping this image or not edit image it’s a work of CSS
Styles.
The
original image is look like that
If you want to make html page look like this you've need to follow simple steps...
Firstly create a .CSS file or you can directly put style using html <style> tag.
Write this code in your .css file
.shape{
-webkit-clip-path: circle(50%);
shape-outside: circle(50%);
width: 300px;
height: 300px;
float: left;
}
or if you want to put style directly into html page write like this.
<style>
.shape{
-webkit-clip-path: circle(50%);
shape-outside: circle(50%);
width: 300px;
height: 300px;
float: left;
}
</style>
Now write html page code:
<!DOCTYPE html5>
<html>
<head>
<title> css implementation</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img class="shape2" src="a.png"/>
<P>because the ones who are crazy enough to think that they
can change the world, are the one who do - Steve Jobs
</P>
<P>
THE ONLY WAY TO BE TRULY SATISFIED IS TO DO WHAT YOU
BELIEVE IS GREAT WORK - Steve Jobs
</P>
<P>
I can understand wanting to have a million dollars...
but once you get beyond that. I have to tell you.
it's the same hamburger - Bill Gates
</P>
<P>
I failed in some subjects in exam,
but my friend passed in all. Now he
is an engineer in Microsoft and I am
the owner of Microsoft
</P>
</body>
</html>
here i'll include a css file using <link> tag if you are using <style> tag you can remove link tag. Here i'll specify image using image tage and use css class into image tag. which will show your image with circle shape and text is wrapped with image shape. If you are write few lines in paragraph tag you can view your page by re-size you browser window. Take a look of result in browser
0 comments: