Offset Border Effect in Pure CSS

overlapping elements in css without using grid

.parent {
  width: 200px;
  height: 200px;
  border: 1px solid green;
  position: relative;
}

.child {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
}

<div class="parent">
  <div class="child">
    <img src="https://blog.prezi.com/wp-content/uploads/2019/03/joshua-earle-157231-unsplash-1024x683.jpg" />
  </div>
</div>

Hover effect : expand bottom border

To expand the bottom border on hover, you can use transform:scaleX'(); (mdn reference) and transition it from 0 to 1 on the hover state.

Here is an example of what the border hover effect can look like :

The border and transition are set on a pseudo element to prevent transitioning the text and avoid adding markup.

To expand the bottom border from left or right, you can change the transform-origin property to the left or right of the pseudo element:

h1 { color: #666;display:inline-block; margin:0;text-transform:uppercase; }

h1:after {

  display:block;

  content: '';

  border-bottom: solid 3px #019fb6;  

  transform: scaleX(0);  

  transition: transform 250ms ease-in-out;

}

h1:hover:after { transform: scaleX(1); }

h1.fromRight:after{ transform-origin:100% 50%; }

h1.fromLeft:after{  transform-origin:  0% 50%; }

<h1 class="fromCenter">Expand from center</h1><br/>

<h1 class="fromRight">Expand from right</h1><br/>

<h1 class="fromLeft">Expand from left</h1>

Art Deco style border in CSS

You can do it like below:

.box {
  width:150px;
  height:200px;
  border:15px solid transparent; /* control the offset of the lines */
  outline:2px solid #000; /* adjust the 2px here */
  outline-offset:-10px; /* control the offset of the rectangle */
  background:
    linear-gradient(#000 0 0) top,
    linear-gradient(#000 0 0) left,
    linear-gradient(#000 0 0) bottom,
    linear-gradient(#000 0 0) right;
  background-size:200% 2px,2px 200%; /* adjust the 2px here */
  background-origin:padding-box;
  background-repeat:no-repeat;
}

<div class="box"></div>

Making a moving border animation work on a square element

The animation in question is using a rotate transform with a stationary border to create the illusion of a moving border whereas it actually is not. With a square, you cannot use a similar model as when we rotate a square it doesn't stay the same like a circle does.

So the available options would be to make use of a SVG stroke-dashoffset based animation like in the below snippet. The stroke-dasharray property provides the length/width of the stroke (1^st param) and the length/width of the space (2^nd param). The stroke-dashoffset property specifies the offset from the start position at which the stroke should be painted.

polygon {

  stroke: red;

  stroke-width: 3;

  stroke-dasharray: 50, 750;

  stroke-dashoffset: 0;

  fill: none;

  animation: border 5s linear infinite;

}

@keyframes border {

  to {

    stroke-dashoffset: -800;

  }

}

<svg width="210" height="210">

  <polygon points="5,5 205,5 205,205 5,205" />

</svg>

Pure CSS fade-in fade-out each from left to right

We can take advantage of the fact that some properties can be transitioned and others can happen instantly.

In this snippet the background-color of the input is changed instantly on hover, its background image which consists of a blue part and a yellow part initially is changed to a transparent part and a yellow part on hover.

The only property that is transitioned is the background sizes of the two linear gradients.

input {
  background-color: yellow;
  background-image: linear-gradient(cornflowerblue, cornflowerblue), linear-gradient(yellow, yellow);
  background-size: 100% 100%, 0% 100%;
  background-position: left top, left top;
  background-repeat: no-repeat;
  transition: background-size 5s linear;
  border: none;
}

input:hover {
  background-color: cornflowerblue;
  background-image: linear-gradient(transparent, transparent), linear-gradient(yellow, yellow);
  background-size: 0% 100%, 100% 100%;
}

<input>

When 1 px border is added to div, Div size increases, Don't want to do that

The border css property will increase all elements "outer" size, excepts tds in tables. You can get a visual idea of how this works in Firebug (discontinued), under the html->layout tab.

Just as an example, a div with a width and height of 10px and a border of 1px, will have an outer width and height of 12px.

For your case, to make it appear like the border is on the "inside" of the div, in your selected CSS class, you can reduce the width and height of the element by double your border size, or you can do the same for the elements padding.

Eg:

div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}

---

Related Topics