We can style elements using simple Math with CSS3 property calc  property. We can define one element width by using arithmetic operations like Addition, Multiplication, Division.

Using calc :

Lets define HTML elements left property with CSS3
      left : calc(50% + 100px); (Addition)
      left : calc(50% - 100px); (Subtraction)
      left : calc(25% * 2); (Multiplication)
      left : calc(25% / 2); (Division)

Using SASS :

Lets use SASS for high level Math operations. SASS provides some interesting Math functions for styling elements.
    pi()
    sin($number)
    cos($number)
    tan($number)
    logarithm($number, $base)
    sqrt($number)
    pow($number, $exponent)

Now I will arrange HTML elements on Circle with Trigonometry

Formula for Circle in Trigonometry :
    X = X - Coordinate
    Y = Y - Coordinate
    R =  Radius of Circle
    X = R cosθ
    Y = R sinθ

HTML markup of 12 div elements :

<div></div>
<div></div>
<div></div>
......9 more divs

SASS code :

This below code will apply Left and Top positions based on nth-child property.

$class: div !default

$radius: 300

$angle: 30deg

@for $i from 1 through 12
  #{$class}:nth-child( #{$i} )
    left: #{$radius+ ($radius*cos( ($i - 1) * $angle)) }px
    top: #{$radius+ ($radius*sin( ($i - 1) * $angle)) }px

      
div
  width : 10px
  height : 10px
  border : 1px solid #ccc
  position : absolute 
  background-color : #ff0000

Demo :

2 comments:

Blogroll

Popular Posts