LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
* {margin: 0; padding: 0;}
body {background: #afafaf;}

figure:before,
figure:after,
img {border-radius: 5px;}

figure:before,
figure:after {
  position: absolute;
  height: 100%;
  width: 100%;
  content: '';
}

figure:before {
  padding: 5px;
  top: -5px;
  left: -5px;
  background: rgb(97,219,255);
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNjFkYmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDIlIiBzdG9wLWNvbG9yPSIjMDA4NGZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYxZGJmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -moz-linear-gradient(-45deg,  rgba(97,219,255,1) 0%, rgba(0,132,255,1) 42%, rgba(97,219,255,1) 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(97,219,255,1)), color-stop(42%,rgba(0,132,255,1)), color-stop(100%,rgba(97,219,255,1)));
  background: -webkit-linear-gradient(-45deg,  rgba(97,219,255,1) 0%,rgba(0,132,255,1) 42%,rgba(97,219,255,1) 100%);
  background: -o-linear-gradient(-45deg,  rgba(97,219,255,1) 0%,rgba(0,132,255,1) 42%,rgba(97,219,255,1) 100%);
  background: -ms-linear-gradient(-45deg,  rgba(97,219,255,1) 0%,rgba(0,132,255,1) 42%,rgba(97,219,255,1) 100%);
  background: linear-gradient(135deg,  rgba(97,219,255,1) 0%,rgba(0,132,255,1) 42%,rgba(97,219,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61dbff', endColorstr='#61dbff',GradientType=1 );
  
  -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0, .3), 0 0 3px 0 rgba(0,0,0,1) inset;
}

figure {
  position: relative;
  margin: 30px auto;
  height: 150px;
  width: 350px;
}

img {
  display: block;
  position: relative;
  z-index: 1;
}

figure:after {
  top: 0;
  left: 0;
  border: 1px solid rgba(0,0,0,.5);
  z-index: 2;
  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
  -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.75) inset, 0 0 3px 0 rgba(255,255,255,1);
  -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.75) inset, 0 0 3px 0 rgba(255,255,255,1);
  box-shadow: 0 0 10px 0 rgba(0,0,0,.75) inset, 0 0 3px 0 rgba(255,255,255,1);
}

Description

A pseudo element can give its parent block level element the effect of a gradient border by applying a gradient background and some proper positioning.
Term
Wed, 11/29/2017 - 13:48

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv