Сломанный утрачен эффект границы в CSS

Я пытаюсь достичь цветной границы чирок, как показаноСломанный утрачен эффект границы в CSS

Как вы можете видеть, граница здесь не имеет систематическом, он сломан/исчез в случайных положениях. Если бы не точное, я бы хотел иметь самый близкий вид.

Возможно ли это с помощью CSS. Если нет, любой альтернативный вариант для этого.

Существует свойство border-image, но для этого мне понадобится такой образ. Я понятия не имею о фотошопе. Таким образом, единственными параметрами являются CSS или использование изображения. Я также благодарен за предложения, где я могу найти такие изображения границ.

https://jsfiddle.net/2oeb569z/1/

HTML:

<div class="container"> 
    <div class="wrapper"> 
    <div class="content"> 

    </div> 
    </div> 
</div>

CSS:

.container { 
    margin: auto; 
    margin-top: 20px; 
    width: 400px; 
    height: 300px; 
    background: #131313; 
    position: relative; 
} 

.wrapper { 
    position: absolute; 
    margin-top: 30px; 
    margin-left: 20px; 
    width: 330px; 
    height: 230px; 
    background: white; 
    padding: 10px 15px; 
} 

.content { 
    height: 90%; 
    border: 0px solid teal; 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(teal), to(transparent)); 
    background-image: -webkit-linear-gradient(teal, transparent); 
    background-image: -moz-linear-gradient(teal, transparent), -moz-linear-gradient(teal, transparent); 
    background-image: -o-linear-gradient(teal, transparent), -o-linear-gradient(teal, transparent); 
    background-image: linear-gradient(teal, transparent), linear-gradient(teal, transparent); 
    -moz-background-size: 7px 100%; 
    background-size: 7px 100%; 
    background-position: 0% 0, 100% 0; 
    background-repeat: no-repeat; 
}

источник

2016-07-30 Qwerty

Что вы имеете в виду границы «чирок»? Вы можете использовать изображения в качестве границ. Это означает, что вы можете добиться любого эффекта, который вы хотите. –

Я имел в виду цвет. В отличие от других изображений границ, это не симметрично. Это случайное исчезновение. Любая идея, где я могу найти такие границы. Спасибо. – Qwerty

-2

, возможно, это будет работать?

border: 2px solid rgba(79, 211, 255, 0.2);

rgba(red, green, blue, hardness) позволяет как задать цвет и придать ему некоторый уровень непрозрачности, следовательно, вы можете создать некоторые замирания влияют

источник

2016-07-30 09:32:37 DrPrItay

О, это был не тот эффект, который я хотел. Это непрозрачность. Если вы видите, граница сломана/исчезла в случайных местах. – Qwerty

Вы можете создать изображение с каким-то шаблоном случайно выцветшими границ. Вы можете сделать его достаточно большим, чтобы он соответствовал любому объекту, который вы хотите иметь границу. Когда вы создаете границу, вы обрезаете изображение. Вы также можете иметь отдельные изображения для верхней и левой границы.

источник

2016-07-30 09:40:14

Я нашел некоторые рамки границы here, в основном в psd.

Вам нужно будет использовать фотошоп для редактирования, или лучший способ будет делать ваш собственный фотошоп. Это будет легко достичь, используя образы границ.

источник

2016-07-30 09:55:52 bhansa

Я предоставил ссылку, потому что вы просили, почему downvotes? Вы должны использовать пограничные изображения. – bhansa

Это смешно. Никто не знает, кто ниспослан и почему. Это случилось и с этим вопросом. :) Но спасибо за ссылку. Я все еще ищу ближайшую границу. Два вопроса. Могу ли я использовать эти изображения с поддержкой border-image. & могут ли эти цвета границ быть изменены? Я так не думаю. – Qwerty

-1

Я создал один эффект, используя градиент попробовать это, Вы можете использовать изображение, которое лучше

#grad1 { 
 
    
 

 
height: 200px; 
 
width:300px; 
 
background: -webkit-repeating-linear-gradient(90deg,#eaeaea,#fbfbfb 7%,#e6e6e6 10%); /* For Safari 5.1 to 6.0 */ 
 
background: -o-repeating-linear-gradient(); /* For Opera 11.1 to 12.0 */ 
 
background: -moz-repeating-linear-gradient(90deg,#eaeaea,#fbfbfb 7%,#e6e6e6 10%);/* For Firefox 3.6 to 15 */ 
 
background: repeating-linear-gradient(90deg,#eaeaea,#fbfbfb 7%,#e6e6e6 10%); /* Standard syntax (must be last) */ 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 

 
</head> 
 
<body> 
 

 

 
<div id="grad1"></div> 
 

 

 

 
</body> 
 
</html>

источник

2016-07-30 10:08:15

Мне жаль, Ринто, но я не знаю, как этот ответ мне поможет. Я ищу прямоугольную рамку. Не могли бы вы показать, что вы хотели в прямоугольном направлении. Надеюсь, мой оригинальный пост был вам понятен о том, что нужно. – Qwerty

Здесь я использую gradient-linear_repeating. Если вы хотите получить более подробную информацию об этом методе, перейдите по этой ссылке http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_repeating –

Вы пытаетесь достичь фона в изображении, которым я поделился. правильно? – Qwerty

Сломанный утрачен эффект границы в CSS

ответ

Смежные вопросы