"Text Round with Image (with local js file)"
Bootstrap 3.3.0 Snippet by naimansari

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
#circle-shape-example {
font-family: Open Sans, sans-serif;
margin: 2rem;
}
#circle-shape-example p {
line-height: 1.8;
}
#circle-shape-example .curve {
width: 33%; height: auto;
min-width: 150px;
float: left;
margin-right:2rem;
border-radius: 50%;
-webkit-shape-outside:circle();
shape-outside:circle();
}
</style>
</head>
<body>
<div id="circle-shape-example">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/kiwifruit-on-a-plate.jpg" alt="A photograph of sliced kiwifruit on a while plate" class="curve"><h1>KiwiFruit</h1>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
!function(a){"use strict";function b(a){var b=getComputedStyle(a);this.units={px:1},this.element=a;var c=function(a){return a&&a.length?parseInt(a):0};this.margins=[b.marginTop,b.marginRight,b.marginBottom,b.marginLeft],this.margins=this.margins.map(c),this.borders=[b.borderTopWidth,b.borderRightWidth,b.borderBottomWidth,b.borderLeftWidth],this.borders=this.borders.map(c),this.paddings=[b.paddingTop,b.paddingRight,b.paddingBottom,b.paddingLeft],this.paddings=this.paddings.map(c),this.borderBox={x:0,y:0,width:a.offsetWidth,height:a.offsetHeight},this.marginBox={x:-this.margins[3],y:-this.margins[0],width:a.offsetWidth+ this.margins[1]+ this.margins[3],height:a.offsetHeight+ this.margins[0]+ this.margins[2]};var d=this,e=["borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius"];this.borderBox.radii=e.map(function(a){return a=b[a].split(/\s+/),[d.toPixels(a[0],d.borderBox.width),d.toPixels(a.length>1?a[1]:a[0],d.borderBox.height)]}),this.cssFloat=b.cssFloat}
function c(a,b,c){return(c.x- a.x)*(b.y- a.y)-(b.x- a.x)*(c.y- a.y)}
function d(a,b,d){return Math.abs(c(a,b,d))<350}
function e(a,b){return a.x==b.x&&a.y==b.y}
function f(a,b,c){return c.x>=Math.min(a.x,b.x)&&c.x<=Math.max(a.x,b.x)&&d(a,b,c)}
function g(){}
function h(a,b,c,d){if(a.y>=c&&a.y<=d)return{x1:a.x- b,x2:a.x+ b};var e,f;return d<a.y?(e=d- a.y,f=z(e,b,b),{x1:a.x- f,x2:a.x+ f}):(e=c- a.y,f=z(e,b,b),{x1:a.x- f,x2:a.x+ f})}
function i(a,b,c){this.init(a,b,c)}
function j(a,b){var c=a.polygon.shapeMargin,d=b.x*c,e=b.y*c;this.anchorEdge=a,this.normalUnitVector=b;var f={x:a.vertex1.x+ d,y:a.vertex1.y+ e},g={x:a.vertex2.x+ d,y:a.vertex2.y+ e};this.init(a.polygon,f,g)}
function k(a){for(var b=0,d=1;d<a.length;++d){var e=a[d];(e.y<a[b].y||e.y==a[b].y&&e.x<a[b].x)&&(b=d)}
var f=a[(b+ 1)%a.length],g=a[(b+ a.length- 1)%a.length];return c(g,a[b],f)<0}
function l(a,b,c){if(this.m_vertices=a,this.fillRule=b,this.shapeMargin=c,a.length<3)return this.m_edges=[],void(this.shapeMarginEdges=[]);var e=[],f=a.length>0?a[0].x:void 0,g=a.length>0?a[0].y:void 0,h=f,l=g,m=k(a),n=0;do{var o=this.nextEdgeVertexIndex(n,m);e.push(new i(this,a[n],a[o]));var p=a[n].x,q=a[n].y;f=Math.min(p,f),g=Math.min(q,g),h=Math.max(p,h),l=Math.max(q,l),n=o}while(0!==n);for(var r,s=0;s<e.length&&e.length>3;)r=(s+ 1)%e.length,d(e[s].vertex1,e[s].vertex2,e[r].vertex2)?(e[s].vertex2=e[r].vertex2,e.splice(r,1)):s++;if(0===c)this.shapeMarginEdges=e;else{for(var t=[],u=0;u<e.length;u++)t.push(new j(e[u],e[u].outwardNormal())),t.push(new j(e[u],e[u].inwardNormal()));this.shapeMarginEdges=t}
this.m_edges=e,this.bounds=new x(f- c,g- c,2*c+(h- f),2*c+(l- g))}
function m(a,b){return a.minX- b.minX}
function n(a,b){return b.x- a.x}
function o(a,b){return b.maxX- a.maxX}
function p(a,b){return a.x- b.x}
function q(a,b,c){this.y=a,this.startX=b,this.endX=c}
function r(a,b){this.intervals=[],this.yOffset=a,this.size=b;for(var c=0;b>c;c++)this.intervals[c]=r.none;this.minY=-a,this.maxY=b- a}
function s(a){this.shapeMargin=a,this.xIntercepts=[];for(var b=0;a>=b;b++)this.xIntercepts[b]=Math.sqrt(a*a- b*b)}
function t(a,b){console.log("Unable to load image ",a,". It's probably missing or you've run into a CORS issue."),b&&console.log("The exact problem was ",b)}
function u(a,b,c){var d=document.createElement("canvas");this.width=d.width=b,this.height=d.height=c;var e=d.getContext("2d");e.drawImage(a,0,0,b,c);try{this.imageData=e.getImageData(0,0,b,c)}catch(f){t(a.src,f)}}
function v(a,b,c,d,e,f){this.url=a,this.box=b,this.shapeImageThreshold=256*c,this.shapeMargin=d,this.clip=e,this.init(f)}
function w(a,b){this.width=a,this.height=b}
function x(a,b,c,d){this.x=a,this.y=b,this.width=c,this.height=d,this.maxX=a+ c,this.maxY=b+ d}
function y(a,b,c,d,e){this.rect=a,this.radii={topLeft:b,topRight:c,bottomLeft:d,bottomRight:e}}
function z(a,b,c){return b*Math.sqrt(1- a*a/(c*c))}
function A(a,b,c){return 0===b?1:Math.round(0===a||c>a*b/2?b:Math.sqrt(2*c*(b/a)))}
function B(a,b){return a.maxX- b}
function C(a,b){return a.x+ b}
function D(a){return a.x}
function E(a){return a.maxX}
function F(a,b,c,d){return function(e,f,g){if(!this.rect.overlapsYRange(e,f))return[{x:void 0,height:f- e}];var h=[];e<this.rect.y&&h.push({x:void 0,height:this.rect.y- e});var i,j,k,l,m,n,o=a.call(this),p=b.call(this),q=new x(this.rect.x,o.maxY,this.rect.width,p.y- o.maxY);if(o.overlapsYRange(e,f))for(i=A(o.width,o.height,g),j=Math.max(o.y,e),k=Math.min(o.maxY,f),l=j;k>l;l+=i)m=o.maxY- Math.min(l+ i,k),n=z(m,o.width,o.height),h.push({height:Math.min(i,k- l),x:d(o,n)});if(j=Math.max(q.y,e),k=Math.min(q.maxY,f),q.overlapsYRange(e,f)&&h.push({x:c(q),height:k- j}),p.overlapsYRange(e,f))for(i=A(p.width,p.height,g),j=Math.max(e,p.y),k=Math.min(p.maxY,f),l=j;k>l;l+=i)m=l- p.y,n=z(m,p.width,p.height),h.push({height:Math.min(i,k- l),x:d(p,n)});return f>this.rect.maxY&&h.push({x:void 0,height:f- this.rect.maxY}),h}}
function G(a,b){var c=a.r+ b,d=new w(c,c);return new y(new x(a.cx- c,a.cy- c,2*c,2*c),d,d,d,d)}
function H(a,b){var c=new w(a.rx+ b,a.ry+ b);return new y(new x(a.cx- c.width,a.cy- c.height,2*c.width,2*c.height),c,c,c,c)}
function I(a,b){function c(a){return new w(a[0]+ b,a[1]+ b)}
var d=c(a.radii[0]),e=c(a.radii[1]),f=c(a.radii[2]),g=c(a.radii[3]),h=new x(a.x- b,a.y- b,a.width+ 2*b,a.height+ 2*b);return new y(h,d,e,g,f)}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: