Я пытаюсь создать матричный эффект, используя только HTML/CSS, и способ, которым я нашел, - применить твердую границу и теперь стереть часть сверху и снизу, кто-то знает, как я могу создать этот эффект, только используя CSS (если это возможно)?
Есть ясность, чтобы лучше объяснить мою цель:
Семантический путь - не дать фактическому элементу границы вообще! Вы используете псевдонимы :before и :after как прозрачные поля справа и слева. Псевдоэлементы получают прозрачные фоны и границы, которые не перекрывают контент, создающий эффект.
Это работает с любым фоном: http://jsfiddle.net/kkYrP/8/
.box{
position:relative;
}
.box:before{
content: "";
position: absolute;
top: -2px;
left: -2px;
bottom: -2px;
width: 8%;
border: 2px solid #333;
border-right:none;
z-index:1;
}
.box:after{
content: "";
position: absolute;
top: -2px;
right: -2px;
bottom:-2px;
width: 8%;
border: 2px solid #333;
border-left:none;
z-index:1;
}
Примечание. Если у вас проблемы с щелчком/зависанием, попробуйте добавить pointer-events:none; в :before и :after.
Дайте границу слева и справа:
.box {
border-left:2px solid #333;
border-right:2px solid #333;
}
И добавьте псевдоэлементы с отрицательным z-индексом:
.box:before{
content:"";
background:#333;
position:absolute;
z-index: -1;
left:-2px;
width: 20px;
top:-2px;
bottom:-2px;
}
.box:after{
content:"";
background:#333;
position:absolute;
z-index: -1;
right:-2px;
width: 20px;
top:-2px;
bottom:-2px;
}
Этот адрес вызывает проблемы @David и основан на решении @James.
рабочий пример: http://jsfiddle.net/awesome/4gB43/1/
с помощью background-image и linear-gradient:
CSS
.wrapper {
display: inline-block;
padding: 2px;
background-repeat: no-repeat;
background-position: center;
background-size: 90% 100%;
background-color: black;
background-image: linear-gradient(white, white);
}
.wrapper-inner {
display: block;
background: white;
padding: 5px;
}
table td {
border-top: none !important;
}
table {
margin-bottom: 0 !important;
}
HTML:
<div class="wrapper">
<div class="wrapper-inner">
<table class="table">
<thead class="sr-only">
<tr>
<th>Whatever</th>
<th>Again, Whatever</th>
<th>Finally, Whatever</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>71571</td>
<td>26157</td>
</tr>
<tr>
<td>0</td>
<td>-497461.35798</td>
<td>-143674.72856</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>-6391.62859</td>
</tr>
</tbody>
</table>
</div>
</div>
Расширение ответа Джеймса Брукнера, мне недавно пришлось сделать что-то подобное, но мне пришлось делать это с фигурными фигурными скобками. В основном, вы добавляете фигурные скобки как содержимое в :after и :before, и вы устанавливаете их абсолютные. Вы можете увидеть реализацию в ссылке ниже.
Ваш HTML
<div class="box">This is a test. This is a test. This is a test. This is a test. This is a test. </div>
Ваш CSS
div {
padding:3em;
font-size:1em;
width:20em;
position:relative;
}
div:after,
div:before {
font-size:6.7em;
color:#999;
position:absolute;
top:0;
}
div:before {
content: "[";
left:0;
}
div:after {
right:0;
content:"]";
}
Я хотел бы дать простейшую альтернативу, используя linear-gradient на псевдоэлементе.
Этот способ не использует дополнительную разметку, и у вас не будет проблем с событиями мыши.
table.matrix {
position: relative;
background: white;
}
table.matrix:before {
content: ' ';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -1;
background-image: linear-gradient(to right, black 10%, white 10%, white 90%, black 90%);
}
/* Non-required stuff */
td {
padding: 3px 5px;
}<table class="matrix">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>рабочий пример: http://jsfiddle.net/awesome/bA7d3/
CSS
.table.table-custom tr:first-child td:first-child {
border-top: 2px solid black;
}
.table.table-custom tr:last-child td:first-child {
border-bottom: 2px solid black;
}
.table.table-custom tr:first-child td:last-child {
border-top: 2px solid black;
}
.table.table-custom tr:last-child td:last-child {
border-bottom: 2px solid black;
}
.table.table-custom {
border-right: 2px solid black;
border-left: 2px solid black;
}
.table.table-custom td {
border-top: none;
}
Вы можете нарисовать фигурные скобки в элементах рядом с тем, который содержит числа. Это даст вам эффект, который вы хотите.
span.leftBrace
{
width:10px;
height:100px;
float:left;
border-width:5px;
border-top-style:solid;
border-right-style:none;
border-bottom-style:solid;
border-left-style:solid;
}
span.rightBrace
{
float:right;
width:10px;
height:100px;
border-width:5px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:none;
}
span.Brace
{
height:100px;
display:inline;
width:200px;
}
<span class="Brace">
<span class ="leftBrace"> </span>
<span class =""> TEXT</span>
<span class ="rightBrace"> </span>
</span>
Пример рабочего кода здесь: JSFiddle