Pattern Editor

by Kriem

HTML

<p id="container-1" class="container">
    <span>
        <strong>Customer</strong>
        <strong>Relationship</strong>
        <strong>Management</strong>
    </span>
</p>
<p id="container-2" class="container">
    <span>
        <strong>Customer</strong>
        <strong>Relationship</strong>
    </span>
</p>
<p id="container-3" class="container">
    <span>
        <strong>Hello</strong>
    </span>
</p>

CSS

body{background:#f0f0f0; width:90%; height:400px;}

.container
{
    background-color:#ccc;
    background-image:    -moz-radial-gradient(50% 50%, circle, #ddd, #aaa 100%);
    background-image: -webkit-radial-gradient(50% 50%, circle, #ddd, #aaa 100%);
    background-image:      -o-radial-gradient(50% 50%, circle, #ddd, #aaa 100%);
    background-image:     -ms-radial-gradient(50% 50%, circle, #ddd, #aaa 100%);
    background-image:         radial-gradient(50% 50%, circle, #ddd, #aaa 100%);
    
    /*border:5px solid #f80;*/
    box-shadow: 0 0 4px rgba(0,0,0,0.75);
    border-radius:50%;
    font-family: Helvetica, Arial;
    text-align:center;
    color:#222;
    text-shadow: 0 1px 0 #fff;
    font-size:0;
    
    position:absolute;
    left:0;
    top:0;
}
.container:hover
{
    cursor:pointer;
}

span
{
    display:inline-block;
    padding:0;
    margin:0;
}

strong
{
    font-weight:normal;
    display:inline;
    margin:0;
    padding:0;
    font-size:14px;
}

JavaScript

var defaultPadding = 15;

function handleShape(container)
{
    // Create square from width and resize
    var height = $(container).innerHeight();
    var width = $(container).innerWidth();
    var square = Math.sqrt(height * width);
    $(container).width(square);
    $(container).height(square);
    
    // Place span at height for vertical alignment
    var posY = ( $(container).height() - $(container).find("span").height() ) / 2;
    $(container).find("span").css("margin-top", posY);
    
    // Create padding to compensate for circular shape and add extra default padding
    var b = $(container).height() / 2;
    var c = b - b / Math.sqrt(2);
    $(container).css("padding", c + defaultPadding);
    
    // Correct for uncentered span as a result of unmatching widths
    var marginLeft = ( $(container).find("span").width() - $(container).width() ) / -2
    $(container).find("span").css("margin-left", marginLeft);
    $(container).css("margin-left", square/-2).css("margin-top", square/-2);
}

$('.container').each(function()
{
    var container = $(this);
    var posX = Math.random() * $('body').width();
    var posY = Math.random() * $('body').height();
    
    container.css("top", posY);
    container.css("left", posX);
    
    handleShape(container);
    
    $('html').mousemove(function(event){
        container.css("top", event.pageY - $(this).offset().top - defaultPadding - ( container.find("span").width() - container.width() ) / 2);
        container.css("left", event.pageX - $(this).offset().left - defaultPadding - ( container.height() - container.find("span").height() ) / 2);
    }); 
});