background
Before we get started, let’s have a quick look at what cyberpunk is, and what cyberpunk 2077 is.
The background of Cyberpunk is mostly based on “the combination of low-end life and high technology”, with advanced science and technology, and the contrast is made with the broken social structure to a certain extent. With a variety of visual impact, such as street neon lights, street advertising and high-rise buildings, usually collocation of color is black, purple, green, blue, red. One, by Philip Dick, is “Do Bionic Men Dream of Electric Sheep?” Get the most attention. In general, the main line of cyberpunk style is to reflect the strong contrast between the highly developed human civilization and the fragile and insignificant human individuals, and at the same time, the contradiction between the outside world and the inside, the past and the future, the reality and the fantasy interweave among them.
Cyberpunk 2077 is an action character game that will hit all gaming platforms on December 10, 2020. Set in the Night City, the player takes on the role of V, an ambitious mercenary in search of a unique implant — the key to immortality. It has won a large number of players with its free exploration, high control and amazing visual effects. I like the design style of the official website of 2077 very much, so this article mainly takes the official website of 2077 as an example, through several examples, in turn to achieve the effect of elements of cyberpunk style.
implementation
High contrast
First of all, let’s take a look at the home page of 2077 Chinese official website. The page is mainly dominated by striking bright yellow color, and uses its contrast color light blue and rose red color blocks as decorations in small areas. The text and line borders use pure black. This step is very simple to achieve. When we implement the page of cyberpunk style, we can use the above mentioned black, purple, green, blue and red as the main colors, and then use their contrast colors as buttons and text prompt boxes, which can achieve strong visual impact.
Fault style button
Fault effect is a display device collapse effect, in the 2077 official website many applications, we first to achieve button in hover failure effect.
<button> </button>The fault effect is mainly achieved through clip-path: inset and animation. Using Button’s pseudo element ::after, define multiple slices –slice variables to it, and animate the position of the slices to achieve the shaking effect. The clip-path attribute creates the displayable area of the element using clipping. Parts within the region are shown, areas outside are hidden. The inSet () method is used to define a rectangle. It takes five arguments, corresponding to the clipping position of top, right, bottom, and left, as well as round and radius (optional). The basic syntax is as follows:
Inset (<length-percentage>{1,4} [round <border-radius>]?) clip-path: inset(2em 3em 2em 1em round 2em);Full implementation:
button, button::after { width: 300px; height: 86px; font-size: 40px; background: linear-gradient(45deg, transparent 5%, #FF013C 5%); border: 0; color: #fff; letter-spacing: 3px; line-height: 88px; box-shadow: 6px 0px 0px #00E6F6; outline: transparent; position: relative; } button::after { --slice-0: inset(50% 50% 50% 50%); --slice-1: inset(80% -6px 0 0); --slice-2: inset(50% -6px 30% 0); --slice-3: inset(10% -6px 85% 0); --slice-4: inset(40% -6px 43% 0); --slice-5: inset(80% -6px 5% 0); Content: 'join now '; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%); text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6; clip-path: var(--slice-0); } button:hover::after { animation: 1s glitch; animation-timing-function: steps(2, end); } @keyframes glitch { 0% { clip-path: var(--slice-1); transform: translate(-20px, -10px); } 10% { clip-path: var(--slice-3); transform: translate(10px, 10px); } 20% { clip-path: var(--slice-1); transform: translate(-10px, 10px); } 30% { clip-path: var(--slice-3); transform: translate(0px, 5px); } 40% { clip-path: var(--slice-2); transform: translate(-5px, 0px); } 50% { clip-path: var(--slice-3); transform: translate(5px, 0px); } 60% { clip-path: var(--slice-4); transform: translate(5px, 10px); } 70% { clip-path: var(--slice-2); transform: translate(-10px, 10px); } 80% { clip-path: var(--slice-5); transform: translate(20px, -10px); } 90% { clip-path: var(--slice-1); transform: translate(-10px, 0px); } 100% { clip-path: var(--slice-1); transform: translate(0); }}Fault style picture
Fault effect can also be applied to text, pictures, video and other media display, to create a full scientific and technological atmosphere. This section will look at how to achieve a fault style image display effect.
Glitch shows the body of the container for images, and its child element, glitch__item, is used to represent the fault bar, similar to the ::after pseudo-element in the above example.
<div class="glitch"> <div class="glitch__item"></div> <! -... --> <div class="glitch__item"></div> </div>The fault style image is implemented in the same way as the fault style button, except that this time we use clip-path: polygon. Polygon is used to crop polygons, and each pair of values represents the coordinate of the cropped element. The background-blend-mode attribute defines the blending mode for the background layer. Due to the limited space of this article, the following code only shows an animation of a fault bar. For a complete example, see the link at 🔗 at the end of this article:
:root { --gap-horizontal: 10px; --gap-vertical: 5px; --time-anim: 4s; --delay-anim: 2s; --blend-mode-1: none; --blend-color-1: transparent; } .glitch { position: relative; } .glitch .glitch__item { background: url("banner.png") no-repeat 50% 50%/cover; height: 100%; width: 100%; top: 0; left: 0; position: absolute; } .glitch .glitch__item:nth-child(1) { background-color: var(--blend-color-1); background-blend-mode: var(--blend-mode-1); animation-duration: var(--time-anim); animation-delay: var(--delay-anim); animation-timing-function: linear; animation-iteration-count: infinite; animation-name: glitch-anim-1; } @keyframes glitch-anim-1 { 0% { opacity: 1; transform: translate3d(var(--gap-horizontal), 0, 0); clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); } 2% { clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%); } 4% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); } 6% { clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); } 8% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); } 10% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); } 12% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 14% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); } 16% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); } 18% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); } 20% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); } 21.9% {opacity: 1; transform: translate3d(var(--gap-horizontal), 0, 0); } 22%, 100% { opacity: 0; transform: translate3d(0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0); }}Neon elements
Neon elements abound in cyberpunk scenes such as the films The Case, the games Watchdogs, and Cyberpunk 2077, both in abandoned buildings 🏠 and in the bustling Gomachi neighborhood. We can also use a lot of neon elements to decorate a page, such as page titles, buttons, form borders, etc. Neon effects can also be used. Here is a brief example of how the neon text works:
The.neon and.flux elements are two text carriers that will be applied to different neon effect styles and animations.
<div class="neon">CYBER</div>
<div class="flux">PUNK</div>The neon effect of the text is mainly achieved through the text-shadow property, and the flicker effect is also achieved by adding a text-shadow animation similar to the color of the text, where the. Neon element is applied to the ease-in-out motion curve. Flux element is applied to linear motion curve. Can you see the difference between the two? 😂
.neon { text-shadow: 0 0 3vw #F4BD0A; animation: neon 2s ease-in-out infinite; } .flux { text-shadow: 0 0 3vw #179E05; animation: flux 2s linear infinite; } @keyframes neon { 0%, 100% { text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914; color: #FFFC00; } 50% { text-shadow: 00. 5VW #800E0B, 00 1.5 VW #800E0B, 00. 5VW #800E0B, 00. 5VW #800E0B, 00. color: #806914; } } @keyframes flux { 0%, 100% { text-shadow: 0 0 1vw #10ff4c, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280; color: #03C03C; } 50% { text-shadow: 0.5VW #024218, 0 0 1.5VW #024713, 0 0 5VW #023812, 0 0 5VW #012707, 0 0.2VW #022201,.5VW. color: #179E05; }}To make the text look more neon, the above example is used
neonFont:
https://s3-us-west-2.amazonaw…
Irregular text box
In Cyberpunk 2077, you can see a lot of text display boxes with this kind of irregular shape. Isn’t that cool? This section will show you how to implement the 2077-style text box.
The above three text boxes are respectively composed of three P tags. The.inverse class represents the inverse background, while.dotted background is realized.
<p class="cyberpunk"> Classical cyberpunk characters are marginal and alienated loners. They live on the fringes of social groups, in a dystopian future in which everyday life is affected by radically changing technology, pervasive computerised information enveloped the world, and intrusive body modification. </p> <p class=" Cyberpunk inverse" </p> <p class=" Cyberpunk inverse" They live on the fringes of social groups, in a dystopian future in which everyday life is affected by radically changing technology, pervasive computerised information enveloped the world, and intrusive body modification. </p> <p class=" dotcom, dotcom, dotcom, dotcom, dotcom, dotcom, dotcom" They live on the fringes of social groups, in a dystopian future in which everyday life is affected by radically changing technology, pervasive computerised information enveloped the world, and intrusive body modification. </p>The irregular shape of the text box is mainly implemented by clip-path: polygon. By cropping the following coordinates, you can create a 2077 style polygon.
clip-path: polygon(
0px 25px,
26px 0px,
calc(60% - 25px) 0px,
60% 25px,
100% 25px,
100% calc(100% - 10px),
calc(100% - 15px) calc(100% - 10px),
calc(80% - 10px) calc(100% - 10px),
calc(80% - 15px) 100%,
80px calc(100% - 0px),
65px calc(100% - 15px),
0% calc(100% - 15px)
);Complete code:
:root { --yellow-color: #f9f002; --border-color: #8ae66e; } .cyberpunk { padding: 5px; position: relative; The font - size: 1.2 rem; color: var(--yellow-color); border: 30px solid var(--yellow-color); border-right: 5px solid var(--yellow-color); border-left: 5px solid var(--yellow-color); border-bottom: 24px solid var(--yellow-color); background-color: #000; clip-path: polygon(0px 25px, 26px 0px, calc(60% - 25px) 0px, 60% 25px, 100% 25px, 100% calc(100% - 10px), calc(100% - 15px) calc(100% - 10px), calc(80% - 10px) calc(100% - 10px), calc(80% - 15px) 100%, 80px calc(100% - 0px), 65px calc(100% - 15px), 0% calc(100% - 15px)); } .cyberpunk.inverse { border: none; padding: 40px 15px 30px; color: #000; background-color: var(--yellow-color); border-right: 2px solid var(--border-color); } .dotted, .dotted:before, .dotted:after { background: var(--yellow-color); background-image: radial-gradient(#00000021 1px, transparent 0); background-size: 5px 5px; background-position: -13px -3px; } /* Tailbox right small number style */. Cyberpunk :before {content: "p-14 "; display: block; position: absolute; bottom: -12px; right: 25px; padding: 2px 2px 0px 2px; The font - size: 0.6 rem; The line - height: 0.6 rem; color: #000; background-color: var(--yellow-color); border-left: 2px solid var(--border-color); } .cyberpunk.inverse:before { content: "T-71"; right: 90px; bottom: 9px; } .cyberpunk.inverse:before, .cyberpunk:before { background-color: #000; color: var(--yellow-color); }Cool form elements
2077 also features forms. Input and textarea elements can also use clip-path: polygon for irregular shapes, while checkboxes and multiple checkboxes can be decorated with pseudo-elements :before and :after.
<input class="cyberpunk" type="text" placeholder="textarea "class="cyberpunk" type=" textarea ></textarea> <label class="cyberpunk"><input class="cyberpunk" name="test" type="radio" /> </label> <label Class ="cyberpunk"><input class="cyberpunk" name="test" type="radio" </label><br /> <label class="cyberpunk"><input class="cyberpunk"><input class="cyberpunk" name="test" type="radio" </label><br /> <label class="cyberpunk"><input Class ="cyberpunk" type="checkbox" /> </label><br />The complete implementation is as follows:
input[type="text"].cyberpunk, textarea.cyberpunk {
width: calc(100% - 30px);
border: 30px solid #000;
border-left: 5px solid #000;
border-right: 5px solid #000;
border-bottom: 15px solid #000;
clip-path: polygon(0px 25px, 26px 0px, calc(60% - 25px) 0px, 60% 25px, 100% 25px, 100% calc(100% - 10px), calc(100% - 15px) calc(100% - 10px), calc(80% - 10px) calc(100% - 10px), calc(80% - 15px) calc(100% - 0px), 10px calc(100% - 0px), 0% calc(100% - 10px));
padding: 12px;
}
input[type="radio"].cyberpunk {
border-radius: 15%;
z-index: 100;
height: 14px;
width: 20px;
appearance: none;
outline: none;
background-color: #000;
cursor: pointer;
position: relative;
margin: 0px;
display: inline-block;
}
input[type="radio"].cyberpunk:after {
content: "";
display: block;
width: 8px;
height: 6px;
background-color: var(--yellow-color);
position: absolute;
top: 2px;
left: 2px;
transition: background 0.3s, left 0.3s;
}
input[type="radio"].cyberpunk:checked:after {
background-color: var(--border-color);
left: 10px;
}
input[type="checkbox"].cyberpunk {
border-radius: 15%;
z-index: 100;
height: 20px;
width: 20px;
appearance: none;
outline: none;
background-color: #000;
cursor: pointer;
position: relative;
margin: 0px;
margin-bottom: -3px;
display: inline-block;
}
input[type="checkbox"].cyberpunk:before {
content: "";
display: block;
width: 8px;
height: 8px;
border: 2px solid var(--yellow-color);
border-top: 2px solid transparent;
border-radius: 50%;
position: absolute;
top: 5px;
left: 4px;
}
input[type="checkbox"].cyberpunk:after {
content: "";
display: block;
width: 2px;
height: 7px;
background-color: var(--yellow-color);
position: absolute;
top: 3px;
left: 9px;
}
input[type="checkbox"].cyberpunk:checked:before {
border-color: var(--border-color);
border-top-color: transparent;
}
input[type="checkbox"].cyberpunk:checked:after {
background-color: var(--border-color);
}Title and text
In the text display of cyberpunk style web pages, the input cursor blinking style and screen fault style as shown in the following figure are often used. We can unify the H1-H5 title, HR and other elements to add underline decoration and fault animation effect. Let’s see how to achieve such text effect.
<h1 class="cyberpunk">H1 title</h1>
<h1 class="cyberpunk glitched">H1 title glitched</h1>h1.cyberpunk { position: relative; } h1.cyberpunk:before { content: ""; display: block; position: absolute; bottom: 0px; left: 2px; width: 100%; height: 10px; background-color: #000; clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px); } h1.cyberpunk.glitched { animation-name: glitched; Animation - duration: calc (. 9 s * 1.4); animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes glitched { 0% { left: -4px; transform: skew(-20deg); } 11% { left: 2px; transform: skew(0deg); } 50% { transform: skew(0deg); } 51% { transform: skew(10deg); } 60% { transform: skew(0deg); } 100% { transform: skew(0deg); } } h1.cyberpunk.glitched:before { animation-name: beforeglitched; animation-duration: calc(.9s * 2); animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes beforeglitched { 0% { left: -4px; transform: skew(-20deg); clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px); } 11% { left: 2px; transform: skew(0deg); clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px); } 50% { transform: skew(0deg); clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px); } 51% { transform: skew(0deg); clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 40% 5px, calc(40% - 30px) 0px, calc(40% + 30px) 0px, calc(45% - 15px) 5px, 100% 5px, 100% 6px, calc(45% - 14px) 6px, calc(40% + 29px) 1px, calc(40% - 29px) 1px, calc(40% + 1px) 6px, 85px 6px, 80px 10px, 0px 10px); } 60% { transform: skew(0deg); clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px); } 100% { transform: skew(0deg); clip-path: polygon(0px 0px, 85px 0px, 90px 5px, 100% 5px, 100% 6px, 85px 6px, 80px 10px, 0px 10px); }}Metallic simple sense
In Cyberpunk 2077, many of the page elements have a metallic feel, such as the background of the modal pop-up window and the border of the text display block, in order to make it feel more technical. This section looks at how to implement a simple metal background.
Four Button elements will be added with a metal background color effect of gold, silver, copper, and titanium.
</button class="gold" BBB </button class="bronze" BBB </button class="bronze" BBB </button class="bronze" BBB </button class="bronze" BBB </button BBB </button class="bronze < button class = "titanium" > titanium titanium < / button >To achieve the metallic sheen effect, there are several main CSS properties:
box-shadow: Add shadows and highlight the solid texture.background: radial-gradient: Radial Gradient, add bottom shadow.background: linear-gradient: Linear gradient, main color background.background: conic-gradient: Taper gradient, final reflective metal effect.
Add the above three gradients in turn as shown in the image below:
Sample complete implementation code:
button { padding: 2px; width: 250px; height: 250px; border-radius: 12px; border: groove 1px transparent; } .gold { box-shadow: Inset 00 0 1px #eedc00, inset 0 1px 2px rgba(255, 255, 255, 0.5), inset 0-1px 2px rgba(0, 0, 0, 0.5); background: conic-gradient(#edc800, #e3b600, #f3cf00, #ffe800, #ffe900, #ffeb00, #ffe000, #ebc500, #e0b100, #f1cc00, #fcdc00, #d4c005fb, #fad900, #eec200, #e7b900, #f7d300, #ffe800, #ffe300, #f5d100, #e6b900, #e3b600, #f4d000, #ffe400, #ebc600, #e3b600, #f6d500, #ffe900, #ffe90a, #edc800) content-box, linear-gradient(#f6d600, #f6d600) padding-box, Radial-gradient (RGBA (120, 120, 120, 0.9), RGBA (120, 120, 120, 0) 70%) 50% bottom/80% 0.46875em no-repeat border-box; } .silver { box-shadow: Inset 0 0 0 1px #c9c9c9, inset 0 1px 2px rgba(255, 255, 255, 0.5), inset 0-1px 2px rgba(0, 0, 0, 0.5); background: conic-gradient(#d7d7d7, #c3c3c3, #cccccc, #c6c6c6, #d3d3d3, #d8d8d8, #d5d5d5, #d8d8d8, #d3d3d3, #c5c5c5, #c0c0c0, #bfbfbf, #d0d0d0, #d9d9d9, #d1d1d1, #c5c5c5, #c8c8c8, #d7d7d7, #d5d5d5, #cdcdcd, #c4c4c4, #d9d9d9, #cecece, #c5c5c5, #c5c5c5, #cdcdcd, #d8d8d8, #d9d9d9, #d7d7d7) content-box, linear-gradient(#d4d4d4, #d4d4d4) padding-box, Radial-gradient (RGBA (120, 120, 120, 0.9), RGBA (120, 120, 120, 0) 70%) 50% bottom/80% 0.46875em no-repeat border-box; } .bronze { box-shadow: Inset 0 0 0 1px #bc7e6b, inset 0 1px 2px rgba(255, 255, 255, 0.5), inset 0-1px 2px rgba(0, 0, 0, 0.5); background: conic-gradient(#d95641, #b14439, #b2453a, #d25645, #d56847, #d05441, #b85137, #b2453a, #c34f40, #df4647, #a94338, #c94943, #c85442, #a4413c, #d9543a, #d1564e, #ab4338, #bb4a3c, #dc5843, #b94839, #aa4237, #c24e42, #ce523f, #ab4338, #dd5944, #ca4d33, #ab4338, #cb503e, #d95641) content-box, linear-gradient(#ad3b36, #ad3b36) padding-box, Radial-gradient (RGBA (120, 120, 120, 0.9), RGBA (120, 120, 120, 0) 70%) 50% bottom/80% 0.46875em no-repeat border-box; } .titanium { box-shadow: Inset 0 0 0 1px #c7aca0, inset 0 1px 2px rgba(255, 255, 255, 0.5), inset 0-1px 2px rgba(0, 0, 0, 0.5); background: conic-gradient(#e6c9bf, #d2b5aa, #cbaea3, #d4b5ab, #e5c3bd, #d9c0b4, #d9bcb1, #c5a399, #e3c6bc, #e7cac0, #dec0b5, #d3b6ab, #cfada1, #d4b6ac, #e2c6c0, #e2c6c0, #d2b1a6, #d2b1a6, #d1b4a9, #e1c4ba, #e5c9be, #dec1b6, #d3b6ab, #ceb0a6, #cfada3, #d2b5aa, #dabdb2, #e5c9be, #e6c9bf) content-box, linear-gradient(#e5c9be, #e5c9be) padding-box, Radial-gradient (RGBA (120, 120, 120, 0.9), RGBA (120, 120, 120, 0) 70%) 50% bottom/80% 0.46875em no-repeat border-box; }In combination with
3It can also create more complex and attractive metal effects. The full code can preview the link at the end of the article
🔗.
other
In addition to the above aspects, what other elements of cyberpunk style should we learn from? Do you have any better ideas on how to improve the technical art and user experience of web pages through the following points? 😊
- Use flat, pixelated fonts;
- Technology-filled page loading animations, scroll animations, scroll bars;
- The mixed Chinese/Japanese/English writing highlights the cultural integration of the future world;
- Add perspective with mouse movement, you can see my other article
How to map mouse position in CSS and control the effect of page elements by mouse movement. - .
To read more
- Fault image effect sample complete version https://codepen.io/dragonir/f…
- Effect of complex metal https://codepen.io/dragonir/f…
- Title text https://codepen.io/dragonir/f…
- Cyberpunk “404 page https://codepen.io/ltrademark…
Author: Dragonir
https://segmentfault.com/a/11…