In this blog, This code is an HTML document with some CSS styles applie to it. The HTML document has a basic structure with a head and a body.
In the body section, there is an unordered list (ul) with 8 list items (li) containing the letters “c”, “o”, “d”, “e”, “h”, “a”, “c”, “k”.
The CSS styles affect the body and unordered list elements, as well as the list items. The body is use to display as a flex container, with items centered both horizontally and vertically. The background color is use to a dark gray and the overflow is use to hidden.
The unordered list is also set to display as a flex container with no margins or padding. Each list item is set to have a white color, large font size, and a specific font family. The text is capitalized and there is a large letter spacing. There is a transition effect of 2 seconds when the mouse hovers over the list. The font weight is set to be bold.
On hover, the list items rotate 45 degrees, move up 200 pixels, and become transparent and blurred. Each list item has a transition delay, starting with the first child and increasing by 0.4 seconds for each consecutive child. This creates a cascading effect where each list item animates one after the other.
Overall, this code creates a webpage with a smoky effect on hovering over the text “codehack” and centered on the screen with a dark background.
Video Tutorial of Smoky Effect
To see a live demonstration of the Smoky Effect, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
Smoky Effect
HTML:
Create a new file with the name “index.html” and add the provide code to it. Ensure the file has a “.html” extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Smoky Effect</title>
</head>
<body>
<ul>
<li>c</li>
<li>o</li>
<li>d</li>
<li>e</li>
<li>h</li>
<li>a</li>
<li>c</li>
<li>k</li>
</ul>
</body>
</html>
The body of this code is the section where the content of the webpage is placed. In this example, it contains a simple unordered list with the letters “c”, “o”, “d”, “e”, “h”, “a”, “c”, and “k”. This content is style using the link CSS file “style.css”, which can be use to control the appearance of the webpage. It is important to note that the body section is placed between the opening and closing <body> tags, and is the main area where the majority of the webpage’s content will be placed.
CSS:
Create a new CSS file name “style.css” and copy the provide code into it. Ensure that the file has a “.css” extension.
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #4b4b4b;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
display: flex;
}
ul li{
list-style: none;
color: #fff;
font-size: 100px;
text-transform: capitalize;
font-family: Verdana, Geneva, Tahoma, sans-serif;
letter-spacing: 10px;
transition: 2s;
font-weight: 700;
}
ul:hover li{
transform: rotate(45deg) translateY(-200px);
opacity: 0;
filter: blur(20px);
}
ul li:nth-child(1){
transition-delay: 0;
}
ul li:nth-child(2){
transition-delay: 0.4s;
}
ul li:nth-child(3){
transition-delay: 0.8s;
}
ul li:nth-child(4){
transition-delay: 1.2s;
}
ul li:nth-child(5){
transition-delay: 1.6s;
}
ul li:nth-child(6){
transition-delay: 2s;
}
ul li:nth-child(7){
transition-delay: 2.4s;
}
ul li:nth-child(8){
transition-delay: 2.8s;
}
This code is CSS styles that are applie to an HTML webpage. The styles are applied to the <body>, <ul>, and <li> elements to create a smoky effect. The body element is use to display as a flex container, with its contents centered both horizontally and vertically. The background color is use to a dark grey color and the overflow is use to hidden.
The <ul> element has its margins and padding use to 0 and is also use to display as a flex container. The <li> elements have their list-style set to none and their color set to white. The font size and letter spacing are use to large values and the font family is use to Verdana, Geneva, Tahoma, or sans-serif. The <li> elements also have a transition effect that rotates them 45 degrees, moves them 200px up, and sets their opacity and blur to 0 when hovered over.
The transition delay is also use for each <li> element to create a cascading effect. When an user hover over the ul element, all the li elements will rotate by 45 degrees, move up by 200px, become transparent and blur by 20px. And the transition delay is use for each li element to create a cascading effect.
Summary:
This code is an HTML file that creates a webpage with a smoky effect. It includes a <ul> element with 8 <li> elements that spell out the word “codehack”. The CSS styles are applied to the <body>, <ul>, and <li> elements to create the smoky effect. The body element is use to display as a flex container, with its contents centered both horizontally and vertically. The background color is use to a dark grey color and the overflow is use to hidden.
The <ul> element is also use to display as a flex container and all <li> elements have their list-style set to none and their color set to white. The font size and letter spacing are use to large values and the font family is use to Verdana, Geneva, Tahoma, or sans-serif.
The <li> elements also have a transition effect that rotates them 45 degrees, moves them 200px up, and sets their opacity and blur to 0 when hovered over. The transition delay is also use for each <li> element to create a cascading effect.
