Skip to main content
Home Forums Silverlight Design Expression Studio Need technique to make a square radial gradient...
4 replies. Latest Post by GearWorld on August 3, 2009.
(0)
GearWorld
Participant
846 points
1,105 Posts
08-02-2009 7:15 AM |
Hi,
Blend 3 just offer a circle radial gradient. How do I make a square one ?Let say I have an info bull that is squared and have corner radius of 5 and want the interior to have a gradiant that make the effect of all the borders are darker a bit INSIDE ?
preishuber
Contributor
3570 points
655 Posts
08-02-2009 11:52 AM |
do you have somewhere a visual sample?
08-02-2009 6:40 PM |
preishuber: do you have somewhere a visual sample?
Here's what I would like to achieve :
As you can see, the gradient inside the square seems to follow the border correctly but in Blend 3, all I have is a Circle gradient so I don't know how to make this kind of gradient.
08-03-2009 2:22 AM |
with blend it is complicated to come 100% to this result
I took Expression Design and mande 2 squares
<Path Width="218.333" Height="119" Canvas.Left="42.8333" Canvas.Top="79.8334" Stretch="Fill" StrokeThickness="5" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF0570BC" Data="F1 M 55.3333,82.3334L 248.667,82.3334C 254.189,82.3334 258.667,86.8105 258.667,92.3334L 258.667,139C 258.667,144.523 254.189,149 248.667,149L 98.1147,149L 106,196.333L 82.007,149L 55.3333,149C 49.8105,149 45.3333,144.523 45.3333,139L 45.3333,92.3334C 45.3333,86.8105 49.8105,82.3334 55.3333,82.3334 Z "/> <Path Width="199.333" Height="55.3333" Canvas.Left="51.3333" Canvas.Top="87.6667" Stretch="Fill" Fill="#FF9FD1F4" Data="F1 M 57.3333,87.6667L 244.667,87.6667C 247.98,87.6667 250.667,90.3529 250.667,93.6667L 250.667,137C 250.667,140.314 247.98,143 244.667,143L 57.3333,143C 54.0196,143 51.3333,140.314 51.3333,137L 51.3333,93.6667C 51.3333,90.3529 54.0196,87.6667 57.3333,87.6667 Z "> <Path.Effect> <BlurEffect Radius="3.77953"/> </Path.Effect> </Path> <Viewbox Width="234" Height="67.3334" Canvas.Left="34" Canvas.Top="52.3333"> <Canvas Width="234" Height="67.3334"> <Path Width="208.334" Height="34.6654" Canvas.Left="12.9996" Canvas.Top="32.6679" Stretch="Fill" Fill="#00FFFFFF" Data="F1 M 18.9996,32.6679L 215.333,32.6679C 218.647,32.6679 221.333,35.3542 221.333,38.6679L 221.333,61.3333C 221.333,64.6471 218.647,67.3333 215.333,67.3333L 18.9996,67.3333C 15.6859,67.3333 12.9996,64.6471 12.9996,61.3333L 12.9996,38.6679C 12.9996,35.3542 15.6859,32.6679 18.9996,32.6679 Z "/> <Canvas Width="300" Height="362" Clip="F1 M 18.9996,32.6679L 215.333,32.6679C 218.647,32.6679 221.333,35.3542 221.333,38.6679L 221.333,61.3333C 221.333,64.6471 218.647,67.3333 215.333,67.3333L 18.9996,67.3333C 15.6859,67.3333 12.9996,64.6471 12.9996,61.3333L 12.9996,38.6679C 12.9996,35.3542 15.6859,32.6679 18.9996,32.6679 Z "> <Ellipse Width="234" Height="60" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" Fill="#80FFFFFF"/> </Canvas> </Canvas> </Viewbox>
08-03-2009 6:33 AM |
I see.
So based on your idea, it looks like Blend 3 has nothing to do a squared gradient following the stroke of a rectangle even with radius corners If not I'll stick to your idea of workaround to make it.
Need technique to make a square radial gradient...