Style elements

Review of actions for creating and applying styles to elements
This category contains 8 showcases

Play all Style elements showcases continuously

Apply a style to multiple objects

Shows how to apply a style property to multiple objects in a single action

×

Showcase steps

  1. Select multiple objects
  2. Fill style menu shows common properties.
  3. Apply a fill gradient to selected objects.
  4. Apply a fill color to selected objects.

Play
Copy style from an object

Shows how to copy the style of an object to others objects

×

Showcase steps

  1. Select the object with style to apply
  2. Click Apply style icon from Selection menu.
  3. Select the object to apply the style.
  4. Select another object with style to apply.
  5. Select multiple objects within an area to apply the style to them

Play
Use CSS styles

Create and apply CSS classes

×

Showcase steps

  1. Define the style of the element and make it a CSS class
  2. Click Properties..
  3. Set the fill color
  4. Select the CSS styles tab
  5. Enter the class name
  6. Move the properties locationfrom inline to the CSS class
  7. Click the CSS class location
  8. Click Close
  9. Create a new class for texts
  10. Set text style properties
  11. Enter the CSS class name
  12. Click Close
  13. Two methods for applying classes
  14. First methodSelect the element with the style to apply
  15. Click the Apply style icon in the Selection menu
  16. Click on the target element
  17. Second methodSelect target Item
  18. Choose the CSS class to apply
  19. Click OK
  20. Remove inline properties that hide those in the class
  21. Click Close
  22. How to edit all CSS classesin the document
  23. Click the Definitions tab of the Document menu
  24. Click the CSS styles iconof the Document menu
  25. Select a CSS selector to make a copy
  26. Enter the name of the copy to be created
  27. Click the copy icon
  28. Enter the name of the property to add
  29. Click the Add icon
  30. Click OK
  31. Select the new class
  32. Click OK
  33. Create a new class by copy for text
  34. Click OK
  35. Apply the new class
  36. Click Close
  37. Changing a class property on an element affects all elements that use the class
  38. How to override a CSS class property on an element
  39. Move the location of the property to inline
  40. Click inline
  41. Click Close

Play
Use the color chooser

Using the color chooser

×

Showcase steps

  1. Change the stroke and fill colors of the selected item with the color chooser from the menus or the properties panel.
  2. Click the palette icon from the Stroke style menu to change the stroke color.
  3. The color chooser is vertical.
  4. Click the palette icon from the Fill style menu to change the fill color.
  5. Click the Properties iconto open the properties pane.
  6. Select the Stroke style pane.
  7. Click the palette iconto open the color chooser and change the stroke color.
  8. The color chooser is horizontalwith standard palette and HSV/RGB values.
  9. Select the Fill style pane.
  10. Click the palette iconto open the color chooser and change the fill color.
  11. Change the fill color with the standard palette.
  12. Select the navy color.
  13. Select the color format:name or hexadecimal or RGB.
  14. Click the validation rectangle to confirm your choice.
  15. Change the fill color with RGB values.
  16. Use RGB sliders.
  17. Click the field to type the value.Press the Enter key to validate.
  18. Change the fill color with HSV values.

Play
Use filters

Using filters (spotlight, relief, drop shadow, wrap)

×

Showcase steps

  1. Apply the 'Relief' filter on this text.
  2. Edit the text properties.
  3. Click the Filter icon in the Fill style tab.
  4. Dialog box to apply, create and modifyfilter definitions.
  5. Select the Relief filter.
  6. Check the rendering of the filteron a sample text.
  7. Click OK.
  8. Apply the 'Spotlight' filter on this shape.
  9. Select the 'ReliefSpotLight' filter.
  10. Check the rendering of the filteron an example rectangle.
  11. Click OK.
  12. Apply the 'Drop shadow' filter on this polyline.
  13. Select the dropshadow filter.
  14. Check the rendering of the filteron an example circle.
  15. Check the rendering of the filteron an example curve.
  16. Click OK.
  17. Apply the 'warp' filter on this image.
  18. Select the 'warp' filter.
  19. Click OK.

Play
Use gradients

Apply and customize gradients

×

Showcase steps

  1. Apply a gradient by selecting this text.
  2. Click the Gradient Choose icon in the Fill style menu.
  3. Gradient chooser.
  4. Click a gradient.
  5. Apply a gradient by selecting this shape.
  6. Click a gradient from the palette.
  7. Apply a gradient by selecting this line.
  8. Transform the gradient of the shape.
  9. Click the Extends icon to transform a new gradient defined by extension.Click Copy icon to transform a copied gradient,otherwise the shared gradient will be transformed.
  10. Rotate the gradient.
  11. Click OK.
  12. Apply gradients from the Properties panel.
  13. The gradients can be assigned from the Stroke styleand Fill style tabs of the properties editing panel.
  14. Click Close.

Play
Use markers

Apply and customize markers

×

Showcase steps

  1. Choose the marker type from the Start palette of the Marker style menu.
  2. Click the Choose marker icon from the Mid pane.
  3. Click a marker type.
  4. Click the Properties icon.
  5. Click the Marker tab.
  6. Click the End marker choose icon.
  7. Click the end marker type.
  8. Click Close.
  9. Change the stroke width.
  10. Select the marker to change its color.
  11. Click the Customize end marker icon.
  12. Click the Copy marker icon.
  13. Click the Fill rectangle.
  14. Select medium blue color.
  15. Click OK.

Play
Use patterns

Apply and customize patterns

×

Showcase steps

  1. Apply a pattern to this text.
  2. Click pattern tab of Fill style menu.
  3. Click the Pattern Choose icon.
  4. Click a pattern to select it.
  5. Apply a pattern to this shape.
  6. Choose another pattern.
  7. Apply a pattern to this polyline.
  8. Click the Pattern Choose icon in the Stroke style menu.
  9. Choose a pattern to apply to the polyline.
  10. Select the shape to customize its pattern.
  11. Click Transform pattern.
  12. Define a new pattern by extension of this one.
  13. Rotate the pattern.
  14. Scale it.
  15. Click OK.

Play