Reproducing content box from RSI

Developer
Ilia
Size
2,998 Kb
Views
34,408
  1. Reproducing content box from RSI Previews
  2. Reproducing content box from RSI HTML Codes
  3. Reproducing content box from RSI CSS Codes

How do I make an reproducing content box from rsi?

I've seen this box design on robertsspaceindustries.com, for example here https://robertsspaceindustries.com/comm-link/engineering/13106-Banu-Reveal. What is a reproducing content box from rsi? How do you make a reproducing content box from rsi? This script and codes were developed by Ilia on 04 August 2022, Thursday.

Reproducing content box from RSI Previews
IQ Test

Reproducing content box from RSI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Reproducing content box from RSI</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background:#030d1f; margin:20px 30px }
.rsi-box { border:1px solid #0d1f2c; border-top-color:#286e80; position:relative; width:800px; background:rgba(0,0,0,.2);
}
.rsi-corner:after, .rsi-corner:before,
.rsi-box:after, .rsi-box:before { content:''; display:block; position:absolute;
}
.rsi-box:after { background:#37aac1; width:66%; height:1px; top:-1px; right:0;
}
.rsi-box:before { background:#37aac1; width:33%; height:2px; top:0; right:0;
}
.rsi-corner { width:0; height:0; border:12px solid transparent; border-bottom-color:#09daff; position:absolute;
}
.rsi-corner:after { width:0; height:0; border:4px solid transparent; border-bottom-color:#001120; top:1px; left:-4px;
}
.rsi-corner:before { width:32px; border:6px solid transparent; border-bottom-color:rgba(9, 94, 124, .8); left:-18px; top:6px;
}
.rsi-corner.crnr-tl { top:-12px; left:-12px; transform:rotate(-45deg) }
.rsi-corner.crnr-tr { top:-12px; right:-12px; transform:rotate(45deg) }
.rsi-corner.crnr-bl { bottom:-12px; left:-12px; transform:rotate(-135deg) }
.rsi-corner.crnr-br { bottom:-12px; right:-12px; transform:rotate(135deg) }
.rsi-content { color:#6abbcf; padding:2em 3em; font:normal 14px/2 Tahoma;
}
.rsi-content p:first-letter { font-size:72px; line-height:50px; margin-right:10px; float:left;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="rsi-box"> <div class="rsi-content"> <p>You’ve seen the Xi’an and the Vanduul… now we’re proud to reveal the third Chris Olivia-designed alien race for Star Citizen, the Banu! Banu traders will be a mainstay in Star Citizen’s expansive world… you’re likely to encounter them frequently as you explore the depths of the galaxy.</p> </div> <div class="rsi-corner crnr-tl"></div> <div class="rsi-corner crnr-tr"></div> <div class="rsi-corner crnr-bl"></div> <div class="rsi-corner crnr-br"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Reproducing content box from RSI - Script Codes CSS Codes

body { background:#030d1f; margin:20px 30px }
.rsi-box { border:1px solid #0d1f2c; border-top-color:#286e80; position:relative; width:800px; background:rgba(0,0,0,.2);
}
.rsi-corner:after, .rsi-corner:before,
.rsi-box:after, .rsi-box:before { content:''; display:block; position:absolute;
}
.rsi-box:after { background:#37aac1; width:66%; height:1px; top:-1px; right:0;
}
.rsi-box:before { background:#37aac1; width:33%; height:2px; top:0; right:0;
}
.rsi-corner { width:0; height:0; border:12px solid transparent; border-bottom-color:#09daff; position:absolute;
}
.rsi-corner:after { width:0; height:0; border:4px solid transparent; border-bottom-color:#001120; top:1px; left:-4px;
}
.rsi-corner:before { width:32px; border:6px solid transparent; border-bottom-color:rgba(9, 94, 124, .8); left:-18px; top:6px;
}
.rsi-corner.crnr-tl { top:-12px; left:-12px; transform:rotate(-45deg) }
.rsi-corner.crnr-tr { top:-12px; right:-12px; transform:rotate(45deg) }
.rsi-corner.crnr-bl { bottom:-12px; left:-12px; transform:rotate(-135deg) }
.rsi-corner.crnr-br { bottom:-12px; right:-12px; transform:rotate(135deg) }
.rsi-content { color:#6abbcf; padding:2em 3em; font:normal 14px/2 Tahoma;
}
.rsi-content p:first-letter { font-size:72px; line-height:50px; margin-right:10px; float:left;
}
Reproducing content box from RSI - Script Codes
Reproducing content box from RSI - Script Codes
Home Page Home
Developer Ilia
Username iliadraznin
Uploaded August 04, 2022
Rating 3
Size 2,998 Kb
Views 34,408
Do you need developer help for Reproducing content box from RSI?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ilia (iliadraznin) Script Codes
Name
CSS3 Working Clock
Map Controls
Dynamic SVG creation
Canvas drawing app
A Pen by Ilia
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!