DEV Community

vishwa v
vishwa v

Posted on

CSS (property

1.Z-index
The z-index property specifies the stack order of positioned elements.

The stack order defines which element should be placed in front or behind other elements.

When elements are positioned, they can overlap other elements.

An element can have a positive or negative stack order (z-index):

Example

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<img src="img_tree.png">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

2.overflow
The CSS overflow property controls what happens to content that is too big to fit into an area.

It specifies whether to clip the content or to add scrollbars when the content of an element is too big.

The overflow property has the following values:

visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content is hidden
scroll - Scrollbars are added. User must scroll to see all content
auto - Similar to scroll, but adds scrollbars only when necessary

div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible;
}
Enter fullscreen mode Exit fullscreen mode

3.float
The float property specifies how an element should float within its container.

It places an element on the left or right side of its container, allowing text and inline elements to wrap around it.

The float property can have one of the following values:

left - The element floats to the left of its container
right - The element floats to the right of its container
none - Default. The element does not float and is displayed just where it occurs in the text
inherit - The element inherits the float value of its parent

img {
  float: left;
}
Enter fullscreen mode Exit fullscreen mode

CSS @keyframes Rule
Rule is used to control the steps in an animation sequence by defining CSS styles for points along the animation sequence.

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}
   OR

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 5s infinite;
}

@keyframes mymove {
  0%   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
  100% {top: 0px; left: 0px; background: red;}
}
Enter fullscreen mode Exit fullscreen mode

CSS @media Rule
The CSS @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution

body {
  background-color: lightblue;
}

@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}

@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}
Enter fullscreen mode Exit fullscreen mode

CSS animation Property

div {
  animation: mymove 5s infinite;
}
Enter fullscreen mode Exit fullscreen mode

The animation property is a shorthand property for:

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state

CSS opacity Property
The opacity property sets the opacity level for an element.

The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent

div {
  opacity: 0.5;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)