Archive for August, 2011
Vector Sun Rays – made EASY!
Aug 11th
In my most recent website design i had to create a sun ray.
I came across this very easy method of producing such a thing without going to the lengths of drawing each segment individually and rotating.
Before you start make sure you set your Fill color to None and Stroke color to Black (or whatever color you prefer).
Step 1
Draw a circle. I opted for 100px x 100px.
Step 2
From the Menu bar select Window > Stoke (Ctr+F10). This will bring up the “Stroke Panel”. Click on the Show options button to view all the Stroke options. These settings will be requried at a later stage.
Step 3
First of all, add a “Stroke Weight” of 100px to match the diameter of the circle.
Now select “Cap: Butt cap”, “Corner: Miter join” and “Align Stroke: Align Stroke to Center”.
This should ensure that the stroke will fill the entire circle to give the impression the circle is infact whole.
Step 4
Now click on “Dashed Line”. This will turn the circle in to rays (of light).
Be sure to also select the option “Aligns Dashes to corners and path ends, adjusting lengths to fit”. This very simply means that the rays will appear evenly spaced.
You can play around with the dash spacing (for this example i have used 12pt).
Step 5
Finally, to be able to edit the ray to your hearts content – we need to make the stroke a graphic. To do this simply select (from the Menu bar) Object > Path > Outline Stroke. This will allow you to apply things like gradients etc etc.
Fluid Image Container
Aug 1st
One request that always sticks in my mind was:
“can you make for me a liquid container? But the border must be an image!”
Strange request you will agree, but that is developers for you!
Usually in most cases you would use a very simple mozilla border: View Example
#container{
border: 8px solid #000;
-moz-border-radius: 30px;
border-radius: 30px;
/*The following are for this blog entry only*/
width:90%;
height:300px;
margin:auto;
/*The previous are for this blog entry only*/
}
Bare in mind that older browsers tend not to like this technique (the rounded corner are removed to show square corners)
You may ask then why this “developer” made such a request (I know i did).
But as with anything he had a good reason… He wanted an image border so that in future he could have ANY graphic for the border.
He wanted gradients, multiple colours etc etc None of these can be achieved by simply applying a mozi border.
Example:
View Example
For this example i have kept the graphic simple – use you iamgination to what could be possible.
CSS:
.popup_default {
width:90%;
margin:auto;
}
.popup_default .top-left {
margin: 0px 35px 0px 0px;
background-image:url(fluid_border.jpg);
background-position: 0px 0px;
height: 35px;
}
.popup_default .top-right {
margin: -35px 0px 0px 35px;
background-image:url(fluid_border.jpg);
background-position: 100% 0px;
height: 35px;
}
.popup_default .bottom-left {
margin: 0px 35px 0px 0px;
background-image:url(fluid_border.jpg);
background-position: 0px -35px;
height: 35px;
}
.popup_default .bottom-right {
margin: -35px 0px 0px 35px;
background-image:url(fluid_border.jpg);
background-position: 100% -35px;
height: 35px;
}
.popup_default .inside {
border-left: 8px solid #00A0FF;
border-right: 8px solid #00A0FF;
background: #FFFFFF;
padding-right: 10px;
padding-left: 10px;
}
HTML:
<div class="popup_default ">
<div class="top-left"></div>
<div class="top-right"></div>
<div class="inside">CONTENT GOES HERE !</div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>
