SEARCH


Tag Archives: shadow



These properties are available from various dialogs and are applicable to elements such as Div, Table, e.t.c.

Margin

margins

  • Margin (edit box) - Sets the general margin.
  • Top, Right, Bottom, Left) (edit box) - Set Top, Right, Bottom and Left margins separately.

Padding

padding

  • Padding (edit box) - Padding is space around an item (in pixels).
  • Top, Right, Bottom, Left) (edit box) - Set Top, Right, Bottom and Left padding separately.

Border

border

  • All (check box) - All borders are set the same. If you want to set each border separately, uncheck it and use the boxes that will be shown.
  • Top, Right, Bottom, Left (check box, edit box, drop-down menu and color picker) - Use the three attributes (border size, type and color) to set the separate borders for the element.

Border Radius

border radius

Create rounded corners for any box element. Use the first edit box and apply same value for all four corners of a box, or use each one individually and set different values. Each of the individual corner properties takes either one or two length values (generally 'px' or 'em' values). TL stands for Top Left corner; TR stands for Top Right corner; BL - for Bottom left corner and BR - for Bottom Right corner.

For more information on how to set rounded corners, see Make Borders Rounded

Box Shadow

box shadow

Create outer or inner drop shadows on the box element, specifying values for color, size, blur and offset.

 

  • Hor (edit box) - The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
  • Ver (edit box) - The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
  • Blur (edit box) - The blur distance. If set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
  • Spread (edit box) - The size of shadow. A positive value will cause the shadow shape to expand in all directions, while a negative value will cause the shadow shape to contract.
  • Inset (check box) - Changes the shadow from an outer shadow (outset) to an inner shadow.
  • Color (edit and button) - The color of the shadow.
    notice: if you need to pick color directly from screen: hold CTRL key down and click inside color edit-box to activate build-in screen color picker.. Move mouse to location and click to pick color from screen.

Background

background

  • Color (edit and button) - Set the background color for the element.
    notice: if you need to pick color directly from screen: hold CTRL key down and click inside color edit-box to activate build-in screen color picker.. Move mouse to location and click to pick color from screen.
  • Image (edit box and button) - Set the background image for the element.
  • Repeat (drop-down menu) - Repeat the background image to create a 'tiled' effect. The repeat value will repeat the image both horizontally and vertically. The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. Use no-repeat value if you don't want the background image to be repeated.
  • Position (drop-down menu) - Provides the initial position of the background image.
  • Fixed (check box) - If unchecked - the specified background image will scroll with the content. If checked - image will be fixed with regard to the page background. This option is not available in all dialogs.
  • BG Generator (button) - Use this button to design your own background. For more info see Background Generator.
  • Origin (drop-down menu) - Use to specify what the background-position property should be relative to.
    • padding-box: The background image is positioned relative to the padding box
    • border-box: The background image is positioned relative to the border box
    • content-box: The background image is positioned relative to the content box
  • Size (drop-down menu) - Use to specify the size of the background images.
    • cover : Scale the background image to be as large as possible so that the background area is completely covered by the background image
    • contain: Scale the image to the largest size such that both its width and its height can fit inside the content area

• margin • padding • background • border • shadow • border-radius