The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Glowing CSS Border

TODO: Pull subtitle into page object
this is a test

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Glowing CSS Border

-- html
-- show
-- title: Output
-- showtitle: HTML

<div id="glowWrapper">
  <div id="glowVertical"> 
    <div id="glowHorizontal">this is a test</div>
  </div>
</div>

-- css
-- show
-- title: CSS

#glowWrapper {
  position: relative;
}

#glowHorizontal {
  padding-left: 0.6rem;
}

#glowHorizontal::before {
  background: white;
  box-shadow: 0px 0px 4px rgb(255,255,255);
  content: '';
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  top: 100%;
  width: 100%;
}

#glowHorizontal::after {
  background: white;
  box-shadow: 0px 0px 4px rgb(255,255,255);
  content: '';
  display: block;
  height: 1px;
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
}

#glowVertical::before {
  background: white;
  box-shadow: 0px 0px 4px rgb(255,255,255);
  content: '';
  display: block;
  left: 0;
  top: 0;
  position: absolute;
  height: 100%;
  width: 1px;
}

#glowVertical::after{
  background: white;
  box-shadow: 0px 0px 4px rgb(255,255,255);
  content: '';
  display: block;
  width: 1px;
  left: 100%;
  top: 0;
  position: absolute;
  height: 100%;
}


-- categories
-- CSS
-- WebDev
-- Design
-- Snippets



-- metadata
-- date: 2023-08-20 22:54:59
-- id: 2uhbcegx
-- site: aws
-- type: snippet
-- status: published