Skip to content

Instantly share code, notes, and snippets.

@droganaida

droganaida/borders.html

Last active September 27, 2017 20:16
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save droganaida/6a3cb1b5b6d55efc37b42c628802c719 to your computer and use it in GitHub Desktop.
Save droganaida/6a3cb1b5b6d55efc37b42c628802c719 to your computer and use it in GitHub Desktop.
Download ZIP
Cool borders (pure css)
Raw
borders.html
<html>
<head>
<meta charset="utf-8">
<style>
body {background: #efefef; color: #999999; font-family: "Helvetica Neue", Arial, sans-serif;}
a {color:#333333;}
a:hover {color: #777777;}
.borderHolder {
position: relative;
width: 600px;
display: table;
margin: 30px auto;
overflow: hidden;
background: #ffffff;
font-size: 24px;
line-height: 1.6;
padding: 50px;
box-sizing: border-box;
min-height: 200px;
text-align: center;
}
.borderHolder.double {padding: 0;}
.borderHolder.double .borderHolder {padding: 30px;}
.borderHolder:before, .borderHolder:after {
letter-spacing: 5px;
font-size: 30px;
line-height: 1;
color: #efefef;
position: absolute;
}
.bordered {border: 6px dotted #2d2d2d;}
.dots:before, .dots:after {content:'••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••';}
.dots.perforated:before, .dots.perforated:after {font-size: 60px;}
.borderHolder.horizontal:before {left: 0; top: 0;}
.borderHolder.horizontal:after {left: 0; bottom: 0;}
.dots.horizontal.perforated:before {top: -30px;}
.dots.horizontal.perforated:after {bottom: -30px;}
.borderHolder.vertical:before {transform: rotate(90deg); left: 30px; top: 0; transform-origin: 0 0;}
.borderHolder.vertical:after {right: 30px; top:0; transform-origin: 100% 0; transform: rotate(-90deg);}
.stars:before, .stars:after {content: '★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★'; font-size: 20px;}
.casino:before, .casino:after {
content: '♠♥♣♦♠♥♣♦♠♥♣♦♠♥♣♦♠♥♣♦♠♥♣♦♠♥♣♦♠♥♣♦♠♥♣♦♠♥♣♦♠♥♣♦♠♥♣♦♠♥♣♦♠♥♣♦♠♥♣♦';
font-size: 20px;
background: repeating-linear-gradient(90deg, #2d2d2d 0, #2d2d2d 15px, #c64559 15px, #c64559 28px, #2d2d2d 28px, #2d2d2d 50px, #c64559 50px, #c64559 60px, #2d2d2d 60px, #2d2d2d 66px);
}
.rainbow:before, .rainbow:after {background: linear-gradient(to right, #b4ddb4 0%,#efd49e 17%,#e59ee5 33%,#00b3f9 67%,#78d3cc 83%,#a459e5 100%);}
.gradient:before, .gradient:after {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.borderHolder .pureGradient {font-size: 40px;}
/* --- Кроссбраузерный градиент нвчало --- */
.pureGradient {
position: relative;
}
.pureGradient:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
.pureGradient.white:after{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
/* --- Кроссбраузерный градиент конец --- */
</style>
</head>
<body>
<div class="borderHolder bordered">
<p>Добро пожаловать на канал <a href="https://www.youtube.com/channel/UCSsg9NLCse2XQCIRgfmJu3Q">#BlondieCode</a></p>
<p>Лайфхаки программиста</p>
<p>Веселые бордеры</p>
<p>Каждый раз, когда это видео получает лайк, где-то в мире радуется маленький котенок.</p>
</div>
<div class="borderHolder dots horizontal">
<p>Добро пожаловать на канал #BlondieCode!</p>
<p>Программирование для всех.</p>
<p>Легко. Доступно. Пельмень</p>
<p>Каждый раз, когда это видео получает лайк, где-то в мире радуется маленький котенок.</p>
</div>
<div class="borderHolder dots vertical">
<p>Добро пожаловать на канал #BlondieCode!</p>
<p>Программирование для всех.</p>
<p>Легко. Доступно. Пельмень</p>
<p>Каждый раз, когда это видео получает лайк, где-то в мире радуется маленький котенок.</p>
</div>
<div class="borderHolder double dots horizontal perforated">
<div class="borderHolder double dots vertical perforated">
<p>Добро пожаловать на канал #BlondieCode!</p>
<p>Программирование для всех.</p>
<p>Легко. Доступно. Пельмень</p>
<p>Каждый раз, когда это видео получает лайк, где-то в мире радуется маленький котенок.</p>
</div>
</div>
<div class="borderHolder stars gradient rainbow horizontal">
<p>Добро пожаловать на канал #BlondieCode!</p>
<p>Программирование для всех.</p>
<p>Легко. Доступно. Пельмень</p>
<p>Каждый раз, когда это видео получает лайк, где-то в мире радуется маленький котенок.</p>
</div>
<div class="borderHolder">
<p class="pureGradient white">Pure CSS text gradient without any graphics</p>
<p>Источник <a href="http://stackoverflow.com/questions/8005447/cross-browser-text-gradient-in-pure-css-without-using-background-image">Stackoverflow.com</a></p>
</div>
<div class="borderHolder gradient casino horizontal">
<p>Добро пожаловать на канал #BlondieCode!</p>
<p>Программирование для всех.</p>
<p>Легко. Доступно. Пельмень</p>
<p>Каждый раз, когда это видео получает лайк, где-то в мире радуется маленький котенок.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment