Extra

In EXTRA section we’ve collected these useful CSS Properties:

All Extra elements at a glance

All Extra elements at a glance

box-shadow

Box shadow is one of CSS3′s best new features.

The Academic Definition:

The box-shadow property attaches one or more drop-shadows to the box.

Syntax:

box-shadow: h-shadow v-shadow blur spread color inset;

In box-shadow there is a very important button: BUILD NEW SHADOW.

CSS box shadow generator

This generator create a CSS code that adds a shadow to an element box.
The builder lets you easily configure different parameters of the shadow.
With sliders and select you can change:

  1. COLOR
  2. X AXIS (Horizontal Length),
  3. Y AXIS (Vertical Length),
  4. BLUR
  5. SPREAD (The size of shadow)
  6. INSET (Optional. Changes the shadow from an outer shadow to an inner shadow).

While you change the parameters of the shadow a preview automatically updates your website.
When the result satisfies you, click the Save button to store your works in the
USER PRESET List.

CSS Box Shadow Generator

CSS Box Shadow Generator

Box Shadow Preset List

Box shadow example in the list. Name of preset: 3d

CSS Box Shadow Generator 3d effect

List of shadow presets

Code example:

rgb(204, 204, 204) 0px 1px 0px, rgb(201, 201, 201) 0px 2px 0px, rgb(187, 187, 187) 0px 3px 0px, rgb(185, 185, 185) 0px 4px 0px, rgb(170, 170, 170) 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 6px 1px, rgba(0, 0, 0, 0.1) 0px 0px 5px, rgba(0, 0, 0, 0.3) 0px 1px 3px, rgba(0, 0, 0, 0.2) 0px 3px 5px, rgba(0, 0, 0, 0.25) 0px 5px 10px, rgba(0, 0, 0, 0.2) 0px 10px 10px, rgba(0, 0, 0, 0.15) 0px 20px 20px

box-sizing

The Academic Definition:

The box-sizing property allows you to define certain elements to fit an area in a certain way.
i.e: If you want two bordered boxes side by side, it can be achieved through setting box-sizing to “border-box”.
This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.

Available Values: content-box (default), border-box, inherit.

z-index

The Academic Definition:

The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed) Check it first!

You can use the slider or input manually the value.

Available Values: Number (positive or negative value are allowed!), auto (default), inherit.

Opacity

The Academic Definition:

The opacity property sets the opacity level for an element.

You can use the slider or input manually the value.

Available Value: From 0.0 (fully transparent) to 1.0 (fully opaque) – 1 is default

Float

The Academic Definition:

The float property specifies whether or not a box (an element) should float.
Note: Absolutely positioned elements ignores the float property!

Note: Absolutely positioned elements ignores the float property! Check it first!

Available Value: left, right, none, inherit

Display

The Academic Definition:

The display property specifies the type of box used for an HTML element.

Note: Absolutely positioned elements ignores the float property! Check it first!

Available Value: none, inline, block, inline, inline-block, list-item, inherit

display css tool firebug

Display Select Menu

Overflow X and Overflow Y

The Academic Definition:

The overflow-x property specifies whether or not to clip the left/right edges of the content – if it overflows the element’s content area.
The overflow-y property specifies whether or not to clip the top/bottom edges of the content – if it overflows the element’s content area.

Available Value: Visible, Scroll, Hidden

Transform

The Academic Definition:

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

Be careful: The transform property is supported only on some Browsers. Check it first!

Try this CSS property with an element in its hover status. Select one from our presets list or manually input your desired values:

Preset Example:

translate(10px, 10px)

will traslate you CSS element to 10px on the Top and 10px on the right.

Transition

The Academic Definition:

CSS3 transitions are effects that let an element gradually change from one style to another.

Try this CSS property with an element in its hover status.

Syntax:

transition: property duration timing-function delay;

Available Values: all 0 ease 0 (Default);
We’ve set up some preset in the select list, start from that example and have fun.

Css Transition

Css Transition

CSS Hero is the definitive plugin to customize your WordPress themes with an easy and intuitive WYSIWYG interface.

Affiliate

Become a CSS Hero affiliate and earn 40% on each sale right now. Spread the CSS Hero word and share the wealth with us!
Start Earning →

Follow the Hero