Currently, I'm attempting to achieve a matrix effect purely through HTML and CSS. One method I have come across involves applying a solid border and then removing certain parts at the top and bottom. Does anyone know if it's possible to create this effect using only CSS?
I have included a picture below to provide a clearer depiction of my goal:
An effective approach is to create a border effect without applying an actual border directly to the element. By utilizing the :before and :after pseudo-elements as transparent boxes positioned on the left and right sides, we can achieve the desired outcome. These pseudo-elements have transparent backgrounds and borders that do not interfere with the content, producing the desired visual effect.
This technique is compatible with various backgrounds: 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;
}
Tip: To address any clicking or hovering issues, consider adding pointer-events:none; to both the :before and :after pseudo-elements.
Visit this link for more details
To create a border on the left and right side of a box:
.box {
border-left:2px solid #333;
border-right:2px solid #333;
}
You can also use pseudo elements with a negative z-index like so:
.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;
}
This solution addresses issues raised by @David and is inspired by the approach taken by @James.
Example in action: http://example.com/awesome/demo/
utilizing background-image and linear-gradient:
Cascading Style Sheets (CSS):
.container {
display: block;
padding: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: grey;
background-image: linear-gradient(black, black);
}
.container-inner {
display: inline-block;
background: black;
padding: 15px;
}
table td {
border-top: none !important;
}
table {
margin-bottom: 0 !important;
}
Hypertext Markup Language (HTML):
<div class="container">
<div class="container-inner">
<table class="data-table">
<thead class="hidden">
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>10</td>
<td>$20</td>
</tr>
<tr>
<td>Banana</td>
<td>7</td>
<td>$10</td>
</tr>
<tr>
<td>Orange</td>
<td>12</td>
<td>$25</td>
</tr>
</tbody>
</table>
</div>
</div>
In addition to James Bruckner's advice, I recently tackled a similar task using curly braces instead. The solution involved inserting the braces as content in the :after and :before pseudo-elements with absolute positioning. Check out the code implementation in the following link:
http://example.com/codeimplementation
Your HTML snippet:
<div class="container">This is just a sample text. This is just a sample text. This is just a sample text.</div>
Your CSS styles:
div {
padding:2em;
font-size:1.2em;
width:15em;
position:relative;
}
div:before,
div:after {
font-size:5em;
color:#777;
position:absolute;
top:0;
}
div:before {
content: "{";
left:0;
}
div:after {
right:0;
content:"}";
}
Here is a straightforward solution using a linear-gradient on a pseudo-element without the need for extra markup or potential mouse-event issues.
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%);
}
/* Additional styling */
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>To achieve the desired effect, you can visually represent braces alongside numerical values by placing them in separate elements.
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>
See a live demo of this code in action: Live Demo
Here is a live example you can check out: http://jsfiddle.net/awesome/bA7d3/
This is the CSS code snippet:
.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;
}
Is there a way to retrieve the value of an <input>, especially what is contained within its value attribute even if the input is not visible? I am using testcafé, but it seems like this could be a challenge. Does anyone have any suggestions or opti ...
I am currently working on creating a draggable menu for my website. The menu is functional and can be moved around the page as intended. However, I have encountered an issue where the menu disappears when scrolling down the page due to its position attrib ...
I have a vision for my chart based on the mockup: However, here is what I've been able to achieve using chartjs so far: This is the code I'm working with: datasets: [ { data: [3, 8, 13, 9, 2], backgroun ...
When pages contain the AddThis code, they tend to become very wide due to the code itself, resulting in a horizontal scroll bar appearing. However, by removing the code or changing the page direction to LTR, the issue is resolved and the page width return ...
Trying to translate a Curl command into Angular JS code has been a challenge for me as a newcomer to AngularJS. This specific instance involves a mobile app built on the ionic framework, which utilizes Angular JS. The original curl command looks like this ...
As a beginner in angularJS, I come with prior experience writing common functions for binding html controls in JS. However, I am looking to apply the same approach in angularJS. I understand the angular way of binding html controls, but my goal is to str ...
After numerous attempts to simplify a code execution, I find myself struggling with loading DOM objects from the server using the .load() function. Specifically, I am encountering issues with implementing a datepicker plugin called jdpicker on an input tex ...
I want to trigger a search after my user finishes typing (without hitting enter) in AngularJS. Here is a simplified version of my HTML: <div ng-class="input-append" ng-controller="searchControl"> <input type="text" ng-model="ajaxSearch" ng-cha ...
This unique ajax question arises: within a table lies the users' information, displayed based on individual settings and timing. Sometimes, users instantly see the data, other times they must wait for it - their choice determines when it appears. Wha ...
What should happen when the form is empty and the Login button is pressed? Currently, the page opens without any errors. However, I want to display an error message under such circumstances. How can I modify the function to achieve this? const login = (e ...
Currently delving into the realms of Node.JS, Express.JS, and Socket.IO. The tutorials I've come across so far showcase a complex series of code to kickstart each of these modules: var express = require("express"); var app = express(); var server = ...
Looking to incorporate a button that moves with the user's scroll or remains fixed at the bottom of the window. I have detailed instructions on certain pages (e.g. /georgia-insurance-license) that contain links to other related posts (e.g. How to Pas ...
My current project utilizes the eslint vue plugin with specific rules set in place. "rules": { "vue/html-closing-bracket-newline": ["error", { "singleline": "never", "multiline": "always" }], "vue/html-closi ...
After creating a comment, I can only see it when rendering the same page again. However, if I navigate to posts or myposts page and then return to the post where I created the comment, it disappears. Can someone please help me understand why this is happen ...
Currently, I am working on a JavaScript module that includes an object of default options. Here is a snippet of the code: var myModule = function() { // Define option defaults var defaults = { foo: 'bar', fooObject: { option1 ...
Can you create a diagonal cut in a background color using CSS? Check out this example https://i.sstatic.net/vtpYf.jpg .item { color: #fff; font-size: 30px; background-color: #565453; padding: 10px 10px 10px 10px; width: 52%; text-align: ce ...
Currently, I am facing an issue with creating a child class ModalCtrlChild extends ModalCtrl from my controller class ModalCtrl. Whenever I attempt to do this, I encounter an unknown provider error related to the modules injected in ModalCtrl. The project ...
Hey there! I've been experimenting with the react-bootstrap library recently, trying to get better at using it. While going through the tutorial, I came across some ES6 code that caught my attention. function FieldGroup({ id, label, help, ...props } ...
Need help with vue.js code. It's not working as intended, any suggestions? Below is the code snippet: mounted(){ fetch('/', { method: 'POST', // *GET, POST, PUT, DELETE, etc. mode: 'cors', // no-cors, *cors, ...
I've been working with an API and managed to fetch some data successfully. However, I'm having trouble displaying the data properly in my project. Can anyone provide assistance? Below is a screenshot of the fetched data from the console along wit ...