Форум

Slandewi · #1 (**permalink**) 03.11.2016, 00:14

Всем привет.
Есть у меня вот такая форма (на скрине их 2)
http://javascript.ru/forum/attachmen...d=147812123 5
А вот её CSS:

.post{font-family: 'Ubuntu', sans-serif; color: #111111; background: #FFFFFF; margin-left: 5px; margin-right: 5px; border: 1px dashed #515151; border-radius: 5px; padding: 10px; margin-bottom: 10px;}

Мне нужно вставить картинку ножниц вот так:
http://javascript.ru/forum/attachmen...d=147812114 3
Не могли бы вы мне помочь?
P.S. форма сжимается с 800px в зависимости от размера окна (<=800)
Картинка ножниц, если что, вот:
http://javascript.ru/forum/attachmen...d=147812127 2

рони · #2 (**permalink**) 03.11.2016, 00:40

Slandewi,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .post{
    font-family:'Ubuntu',sans-serif;
    color:#111111;
    background:#FFFFFF;
    margin-left:5px;
    margin-right:5px;
    border:1px dashed #515151;
    border-radius:5px;
    padding:10px;
    margin-bottom:10px;
  }

  .post{
    margin:70px auto;
    position:relative;
    height:200px;
  }

  .post:after{
    content:"";
    background-image:url(http://savepic.net/8495682.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    position:absolute;
    width:30px;
    height:28px;
    top:-16px;
    right:6px;
  }
  </style>

</head>

<body>
<form action="http://" class="post">

</form>

</body>
</html>

Slandewi · #3 (**permalink**) 03.11.2016, 11:18

Сообщение от рони

Slandewi,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .post{
    font-family:'Ubuntu',sans-serif;
    color:#111111;
    background:#FFFFFF;
    margin-left:5px;
    margin-right:5px;
    border:1px dashed #515151;
    border-radius:5px;
    padding:10px;
    margin-bottom:10px;
  }

  .post{
    margin:70px auto;
    position:relative;
    height:200px;
  }

  .post:after{
    content:"";
    background-image:url(http://savepic.net/8495682.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    position:absolute;
    width:30px;
    height:28px;
    top:-16px;
    right:6px;
  }
  </style>

</head>

<body>
<form action="http://" class="post">

</form>

</body>
</html>

Ооо, спасибо!)

Pavel M. · #4 (**permalink**) 05.11.2016, 18:42

если не нужна поддержка старых IE
то уже можно попробовать использовать border-image

<!DOCTYPE html>
<html>
<head>
  <style>
  .post{
    padding: 20px;
    margin: 70px auto;
    height: 200px;
    outline: 1px dashed #515151;
    border: solid;
    border-image-source: url(http://savepic.net/8495682.jpg);
    border-image-width: auto auto 0 0;
    border-image-outset: 50px 0;
  }
  </style>
</head>
<body>
  <form action="http://" class="post">  </form>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript