Jump to content

Помогите сделать


Recommended Posts

1 минуту назад, Sipsb сказал:

Откройте фотошоп и сделайте! 

Вы меня не понили, как разместить на форум?

Link to comment
Share on other sites

Только что, Sipsb сказал:

Ну так выражайтесь яснее o.O, какая версия движка, ссылку на сайт и т.д.

Ссылка на сайт - cs-crystal.ru
 

Версия:

 IP.Board 3.4.4

Link to comment
Share on other sites

Пример:

HTML:

Спойлер

   <div class="ribbon-wrapper">
    <div class="glow">&nbsp;</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 */
 }

 

 

Untitled.png

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Ваша ссылка была автоматически строена.   Отображать как обычную ссылку

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...