Miscellaneous CSS Properties

CSS includes a range of properties that don't fit into the primary categories but are still essential for various styling purposes. Here’s a brief overview of some miscellaneous CSS properties:

1. cursor

• Specifies the type of cursor to be displayed when pointing over an element.

• Values: auto, default, pointer, crosshair, move, text, wait, help, not-allowed, zoom-in, zoom-out, etc.

  a:hover {
    cursor: pointer;
  }
  

2. visibility

• Controls the visibility of an element without affecting the layout.

• Values: visible (default), hidden, collapse (for table rows and columns).

  .hidden-element {
    visibility: hidden;
  }
  

3. overflow

• Defines how content that overflows an element's box should be handled.

• Values: visible, hidden, scroll, auto.

  .container {
    overflow: auto;
  }
  

4. z-index

• Specifies the stack order of positioned elements. Higher values are in front of lower values.

• Values: Integer (default is auto).

  .front {
    z-index: 10;
  }
  

5. opacity

• Sets the transparency level of an element.

• Values: A number between 0 (fully transparent) and 1 (fully opaque).

  .transparent {
    opacity: 0.5;
  }
  

6. visibility

• Specifies whether an element is visible or hidden. Unlike display, it doesn't remove the element from the document flow.

• Values: visible, hidden, collapse (for table rows and columns).

  .hidden {
    visibility: hidden;
  }
  

7. filter

• Applies graphical effects like blur or color shifting to an element.

• Values: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia().

  .blurred {
    filter: blur(5px);
  }
  

8. clip-path

• Defines a clipping region to clip an element's visible area.

• Values: circle(), ellipse(), inset(), polygon(), url().

  .clipped {
    clip-path: circle(50% at 50% 50%);
  }
  

9. box-shadow

• Adds shadow effects around an element's frame.

• Values: offset-x offset-y blur-radius spread-radius color inset.

  .shadow {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  }
  

10. text-shadow

• Adds shadow effects to text.

• Values: offset-x offset-y blur-radius color.

  .shadowed-text {
    text-shadow: 1px 1px 2px #000;
  }
  

11. resize

• Defines if and how an element can be resized by the user.

• Values: none, both, horizontal, vertical.

  .resizable {
    resize: both;
    overflow: auto;
  }
  

12. user-select

• Controls the user's ability to select text within an element.

• Values: auto, none, text, contain, all.

  .no-select {
    user-select: none;
  }
  

13. pointer-events

• Controls whether or not an element can become the target of mouse events.

• Values: auto, none, visible, painted, fill, stroke.

  .no-pointer-events {
    pointer-events: none;
  }
  

14. writing-mode

• Defines the direction in which text is written.

• Values: horizontal-tb, vertical-rl, vertical-lr.

  .vertical-text {
    writing-mode: vertical-rl;
  }
  

Example Usage

Here’s how you might use some of these properties in a CSS rule:

.container {
  overflow: hidden;
  position: relative;
}

.box {
  background: #f0f0f0;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
  opacity: 0.9;
}

.text {
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
  user-select: none;
}