MRFGM Posted July 8, 2016 Report Share Posted July 8, 2016 Как сделать такие же полоски как на фото? Quote Link to comment Share on other sites More sharing options...
Sipsb Posted July 8, 2016 Report Share Posted July 8, 2016 Откройте фотошоп и сделайте! Redneck 1 Quote Link to comment Share on other sites More sharing options...
MRFGM Posted July 8, 2016 Author Report Share Posted July 8, 2016 1 минуту назад, Sipsb сказал: Откройте фотошоп и сделайте! Вы меня не понили, как разместить на форум? Quote Link to comment Share on other sites More sharing options...
Sipsb Posted July 8, 2016 Report Share Posted July 8, 2016 (edited) Ну так выражайтесь яснее , какая версия движка, ссылку на сайт и т.д. Edited July 8, 2016 by Sipsb Quote Link to comment Share on other sites More sharing options...
MRFGM Posted July 8, 2016 Author Report Share Posted July 8, 2016 Только что, Sipsb сказал: Ну так выражайтесь яснее , какая версия движка, ссылку на сайт и т.д. Ссылка на сайт - cs-crystal.ru Версия: IP.Board 3.4.4 Quote Link to comment Share on other sites More sharing options...
Silence Posted July 8, 2016 Report Share Posted July 8, 2016 Пример: HTML: Спойлер <div class="ribbon-wrapper"> <div class="glow"> </div> <div class="ribbon-front"> основатеь проекта </div> <div class="ribbon-edge-topleft"></div> <div class="ribbon-edge-topright"></div> <div class="ribbon-edge-bottomleft"></div> <div class="ribbon-edge-bottomright"></div> </div> CSS: Спойлер .ribbon-wrapper { position: relative; z-index: 998; } .ribbon-front { background-color: #cc3333; height: 50px; width: 240px; position: relative; left: -10px; z-index: 2; font: 20px/50px bold Verdana, Geneva, sans-serif; color: #f8f8f8; text-align: center; text-shadow: 0px 1px 2px #cc6666; } .ribbon-front, .ribbon-back-left, .ribbon-back-right { -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55); -khtml-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55); -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55); -o-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55); } .ribbon-edge-topleft, .ribbon-edge-topright, .ribbon-edge-bottomleft, .ribbon-edge-bottomright { position: absolute; z-index: 1; border-style: solid; height: 0px; width: 0px; } .ribbon-edge-topleft, .ribbon-edge-topright {} .ribbon-edge-bottomleft, .ribbon-edge-bottomright { top: 50px; } .ribbon-edge-topleft, .ribbon-edge-bottomleft { left: -10px; border-color: transparent #9B1724 transparent transparent; } .ribbon-edge-topleft { top: -5px; border-width: 5px 10px 0 0; } .ribbon-edge-bottomleft { border-width: 0 10px 0px 0; } .ribbon-edge-topright, .ribbon-edge-bottomright { left: 220px; top: -5px; border-color: transparent transparent transparent #9B1724; } .ribbon-edge-topright { top: 0px; border-width: 0px 0 0 10px; } .ribbon-edge-bottomright { border-width: 5px 0 0 10px; } @-webkit-keyframes flow { 0% { left: -20px; opacity: 0; } 50% { left: 100px; opacity: 0.3; } 100% { left: 180px; opacity: 0; } } @keyframes flow { 0% { left: -20px; opacity: 0; } 50% { left: 100px; opacity: 0.3; } 100% { left: 180px; opacity: 0; } } .glow { background: rgb(255, 255, 255); width: 40px; height: 100%; z-index: 999; position: absolute; -webkit-animation: flow 1.5s linear infinite; -moz-animation: flow 1.5s linear infinite; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(1%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 100%); /* W3C */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1); /* IE6-9 */ border-left: 1px solid #fff; /* by IPBDesign.com */ } benix 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.