About
Cyberpunk CSS is a CSS library, which provides Cyberpunk 2077 themed elements for your webpage.
It is not a complete frontend framework like bootstrap. Therefore it does not include structural elements like grid systems, page responsiveness, and so on.
I really recommend Metro UI for that.
Getting started
Just include cyberpunk.css in your HTML page.
Make sure to move the ./fonts folder to the same location as cyberpunk.css
This page is an example of what can be achived with this library. Take a look at the source code to check out the details.
Other files like cyber-grid.css, style.css, helper.js from the ./demo folder are not required. They are only used for the basic structural layout of this demo page. However, feel free to use them.
Elements
Colors
Use the .bg-* class for background colors and .fg-* for text colors. .ac-* is for the accent color of specific elements such as .cyber-input or .cyber-check
Most of the following elements are designed to work with these two classes (buttons for example).
Predefined colors from the Cyberpunk 2077 color palette, as well as some standard colors:
-yellow-cyan-red-purple-blue-green-white-black-darkInputs
See code examples below to create custom inputs.
Use for example .cyber-input-long and .cyber-input-full for even bigger input fields. Add the .ac-* classes to change the accent color of the input fields.
Text input
Works also with other textfield-like input types such as password, number, date,...
Select
Checkbox
Radio Buttons
System Status
Buttons
Example code for buttons:
You can remove the element with the .glitchtext class to remove the hover effect. Use fg-* bg-* for coloring.
Tiles
General purpose containers for text and/or images.
SourceCode();
Use the <code> tags or class .code to show inline code examples like this one here.
Use the following html to show blocks of code:
Fonts
Cyberpunk CSS also provides three fonts which fit the theme:BlenderProBook
Is the default font which is used for the whole page.Oxanium
Is the font used in<code> and .code-blocks. To use this font, you can apply the .oxanium-font class to desired elements.
Cyberpunk
Is the well known font used in the Cyberpunk 2077 logo.You should use the
.cyberpunk-font class to apply this font to your elements, because it transforms the text for a better look. Use .cyberpunk-font-og for the destinctive yellow/cyan look which comes close to the original logo.Hint: This font doesnt look good with small font sizes. To recreate the logo you have to do an a few tweaks in CSS. Take a look at the very top of this page for an example
Headings
Use class.cyber-h to apply styles to your headings.
Can be used with <h*> but also with other elements like <span> or <div>. All elements will be displayed as a block level element.
Heading h1
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6
A normal<span>
Tables
Add the .cyber-table class your <table> element. Use the .ac-* class for accent colors.
There are different styles of tables controlled by the .cyber-style-* classes.
.cyber-table .ac-purple
| No. | Module | Enabled | Description |
|---|---|---|---|
| 1 | mod_rewrite | true |
Provides a rule-based rewriting engine to rewrite requested URLs on the fly |
| 2 | mod_cache | false |
RFC 2616 compliant HTTP caching filter. Not to be confused with mod_cache_disk. |
| 3 | mod_ssl | true |
Strong cryptography using the Secure Sockets Layer (SSL) and Transport Layer Security (TLS) protocols |
.cyber-table .cyber-style-1 .ac-cyan
| No. | Module | Enabled | Description |
|---|---|---|---|
| 1 | mod_rewrite | true |
Provides a rule-based rewriting engine to rewrite requested URLs on the fly |
| 2 | mod_cache | false |
RFC 2616 compliant HTTP caching filter. Not to be confused with mod_cache_disk. |
| 3 | mod_ssl | true |
Strong cryptography using the Secure Sockets Layer (SSL) and Transport Layer Security (TLS) protocols |
.cyber-table .cyber-style-2
| No. | Module | Enabled | Description |
|---|---|---|---|
| 1 | mod_rewrite | true |
Provides a rule-based rewriting engine to rewrite requested URLs on the fly |
| 2 | mod_cache | false |
RFC 2616 compliant HTTP caching filter. Not to be confused with mod_cache_disk. |
| 3 | mod_ssl | true |
Strong cryptography using the Secure Sockets Layer (SSL) and Transport Layer Security (TLS) protocols |
Glitch effects
Cyberpunk CSS provides a set of glitching effects which fit the theme. Use the classes.cyber-glitch-0 to .cyber-glitch-4They create an impression of instable tech an small errors/glitches in the matrix. Not all effects work well with every element. Some are good for texts, other are good for images or containers.
.cyber-glitch-0
Good for images. Effect of a flickering screen. Sometimes bright, sometimes dark.
.cyber-glitch-1
Good for images. Little shakes first, then distorting/breaking effect by rotating and inverting colors.
.cyber-glitch-2
Good for containers with text. Squeeze effect by removing top an bottom of the element, shake left to right, apply glitchy text-shadow.
If your element uses uses css clip-path, this might not look good. You can try to set the variable --og-clip-path to the clip path of your element, so this animation can revert back to the original state.
.glitch-3
Good for text. Especially small parts like dots or underlines. Steady blinking.
.cyber-glitch-4
Good for text. Blinking with different pauses in between.
Razors
Show "razor" shaped borders at the top and bottom of your containers by adding the .cyber-razor-top and .cyber-razor-bottom classes.
Use <div> <section> as well as page headers or footer like here. The razor border takes up 30px of space.
<div> with some sharp edges at the top now.
<div> with some sharp edges at the bottom.
Banners
Colorfull banner for important messages.
Use classes .cyber-banner and cyber-banner-short.
You can use .bg-red, .bg-yellow and .bg-purple to change the primary color of the gradient. Cyan is the default.