User Tools

Site Tools


ce4_standard_box_model

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

ce4_standard_box_model [2014/01/10 05:20]
matthew created
ce4_standard_box_model [2014/01/10 05:35] (current)
matthew [Mantle and Core Width]
Line 32: Line 32:
 When either is set to "​fixed",​ then use the corresponding slider to set the maximum width for the element. Boxes will automatically respond to smaller displays and will never overflow the window. When either is set to "​fixed",​ then use the corresponding slider to set the maximum width for the element. Boxes will automatically respond to smaller displays and will never overflow the window.
  
 +==== Margins ====
  
 +{{:​siteinfo:​boxmodel-margins.png?​nolink|}}
 +
 +The **Margin** sliders control the box elements distance from the immediate adjacent box elements preceding or subsequent. Adheres to the CSS specification for //margin//.
 +
 +==== Padding ====
 +
 +{{:​siteinfo:​boxmodel-padding.png?​nolink|}}
 +
 +The **Padding** sliders add space to the inside of the box element, separating the element'​s content from its sides. Adheres to the CSS specification for //​padding//​.
 +
 +==== Borders ====
 +
 +{{:​siteinfo:​boxmodel-borders.png?​nolink|}}
 +
 +The **Borders** controls allow you to define borders for the box element. Adheres to the CSS specification for //border//.
 +
 +The **Render Borders...** option allows borders to be set either on the mantle or the core. When on the mantle, borders will surround the exterior of the box. When on the core, the borders will render flush with the box element'​s content, allowing the borders to be used as section separators.
 +
 +==== Border-radius ====
 +
 +{{:​siteinfo:​boxmodel-borderradius.png?​nolink|}}
 +
 +The **Border-radius** controls allow you to round the box element'​s corners. When set to "​Simple",​ a single slider is used to round all four corners by the same amount. When set to "​Advanced",​ a separate slider becomes available for each of the four corners. Adheres to the CSS specification for //​box-radius//​.
 +
 +==== Box-shadow ====
 +
 +{{:​siteinfo:​boxmodel-boxshadow.png?​nolink|}}
 +
 +The **Box-Shadow** controls allow you to define a drop-shadow for the box element. Shadows are locked in at //​rgba(0,​0,​0,​0.5)//,​ black at 50% opacity. Otherwise adheres to the CSS specification for //​box-shadow//​.
 +
 +==== Linear-gradient ====
 +
 +{{:​siteinfo:​boxmodel-lineargradient.png?​nolink|}}
 +
 +The **Linear-gradient** options allow you to define a two-color linear-gradient background for the box element. Adheres to the current working specification((as of January 2014)) for CSS linear-gradients.
 +
 +For more information on using linear-gradients,​ see the document [[ce4_linear-gradients|Linear-gradient Backgrounds]].
ce4_standard_box_model.txt ยท Last modified: 2014/01/10 05:35 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.