Breaking News: Grepper is joining You.com. Read the official announcement!

Box property css

Add Answer

Ganesh answered on November 25, 2021 Popularity 9/10 Helpfulness 2/10

answer Box property css

related css box

related box css example

Box property css

Comment

width:100%;
min-width:100px;
max-width:1200px;
height :100%;
min-height :100px;
max-height :1200px;
overflow:auto;
border:2px solid red;
border-width:thin thick medium 2px;
border-style:solid ridget double dashed;
border-color:red blue green white;
border-radius:10px 0;
padding:2px 2px 2px 2px;
margin:2px 2px 2px 2px;
box-shadow:5px 5px 5px red;
position: static;
float:right;

Popularity 9/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: box css

Link to this answer
Share Copy Link

Contributed on Dec 28 2022

Ganesh

0 Answers Avg Quality 2/10

Closely Related Answers

css box

Comment

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Popularity 10/10 Helpfulness 3/10 Language css

Source: css-tricks.com

Tags: box

Link to this answer
Share Copy Link

Contributed on Nov 25 2021

Concerned Caiman

0 Answers Avg Quality 2/10

box css example

Comment

<style>
body {
  background: #0005;
  display: grid;
  place-content: center;
  min-height: 100vh;
  overflow: hidden;
  perspective: 800px;
}
.wrap {
  position: relative;
  margin: 0 auto;
  display: grid;
  place-content: center;
  width: 50vw;
  height: 50vw;
  background: #0202;
  transform-style: preserve-3d;
  transform: translate(0, 0%) translate3d(0, 0, 0) rotate3d(1, 1, 1, 45deg);
  // animation: spin 1s ease forwards infinite;
}
.side {
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: center;
  width: 5rem;
  height: 5rem;
  background: #0005;
  left: 50%;
  top: 50%;
  transform: translate(0, 0%) translate3d(0, 0, 0) rotate3d(1, 1, 0, 45deg);
}
.side:nth-child(1) {
  transform: rotatey(0deg) translate(-50%, -50%) translate3d(0, 0, -5rem);
  background: hsla(50, 60%, 60%, 1);
}
.side:nth-child(2) {
  transform: translate(-50%, -50%) translate3d(0, 50%, -2.5rem)
    rotate3d(1, 0, 0, 90deg);
  background: hsla(100, 60%, 60%, 1);
}
.side:nth-child(3) {
  transform: translate(-50%, -50%) translate3d(0, -50%, -2.5rem)
    rotate3d(1, 0, 0, -90deg);
  background: hsla(140, 60%, 60%, 1);
}
.side:nth-child(4) {
  transform: translate(-50%, -50%) translate3d(50%, 0, -2.5rem)
    rotate3d(0, 1, 0, 90deg);
  background: hsla(180, 60%, 60%, 1);
}
.side:nth-child(5) {
  transform: translate(-50%, -50%) translate3d(-50%, 0, -2.5rem)
    rotate3d(0, 1, 0, -90deg);
  background: hsla(210, 60%, 60%, 1);
}
.side:nth-child(6) {
  transform: rotatex(0deg) translate(-50%, -50%) translate3d(0, 0, 0rem)
    rotate3d(0, 0, 0, -90deg);
  background: hsla(250, 60%, 60%, 1);
}
@keyframes spin {
  to {
    transform: translate(-50%, -50%) translate3d(0, 0, 0)
      rotate3d(1, 0, 0, 45deg);
  }
}

</style>
//////// HTML
<div class="wrap">
  <div class="side a"></div>
  <div class="side b"></div>
  <div class="side c"></div>
  <div class="side d"></div>
  <div class="side e"></div>
  <div class="side f"></div>
</div>

Popularity 10/10 Helpfulness 3/10 Language css

Source: Grepper

Tags: box

Link to this answer
Share Copy Link

Contributed on May 12 2022

Ugliest Unicorn

0 Answers Avg Quality 2/10

Box property css

Contents

More Related Answers

Box property css

Closely Related Answers

css box

box css example

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.