3rd try

Developer
Orion Drummond
Size
3,465 Kb
Views
28,336
  1. 3rd try Previews
  2. 3rd try HTML Codes
  3. 3rd try CSS Codes

How do I make an 3rd try?

Almost there. Using text-shadow looks like a winner.. What is a 3rd try? How do you make a 3rd try? This script and codes were developed by Orion Drummond on 22 August 2022, Monday.

3rd try Previews
IQ Test

3rd try - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3rd try</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Lato:100'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <figure class='chord chord--A'> <figcaption class='chord-caption'>A</figcaption>
</figure>
<figure class='chord chord--Am'> <figcaption class='chord-caption'>Am</figcaption>
</figure>
<figure class='chord chord--B'> <figcaption class='chord-caption'>B</figcaption>
</figure>
<figure class='chord chord--Bm'> <figcaption class='chord-caption'>Bm</figcaption>
</figure>
<figure class='chord chord--C'> <figcaption class='chord-caption'>C</figcaption>
</figure>
<figure class='chord chord--D'> <figcaption class='chord-caption'>D</figcaption>
</figure>
<figure class='chord chord--Dm'> <figcaption class='chord-caption'>Dm</figcaption>
</figure>
<figure class='chord chord--E'> <figcaption class='chord-caption'>E</figcaption>
</figure>
<figure class='chord chord--Em'> <figcaption class='chord-caption'>Em</figcaption>
</figure>
<figure class='chord chord--F'> <figcaption class='chord-caption'>F</figcaption>
</figure>
<figure class='chord chord--Fm'> <figcaption class='chord-caption'>Fm</figcaption>
</figure>
<figure class='chord chord--G'> <figcaption class='chord-caption'>G</figcaption>
</figure>
</body>
</html>

3rd try - Script Codes CSS Codes

.chord { font-size: 2em; font-family: 'Lato', sans-serif; position: relative; padding: 0 0.5em; border-top: 1em solid transparent; height: 5em; width: 5em; color: black; display: inline-block; background-size: 1em 1em; background-image: -webkit-linear-gradient(bottom, black 2px, transparent 2px), -webkit-linear-gradient(left, black 1px, transparent 1px), -webkit-linear-gradient(bottom, black 4px, transparent 4px); background-image: linear-gradient(0deg, black 2px, transparent 2px), linear-gradient(90deg, black 1px, transparent 1px), linear-gradient(0deg, black 4px, transparent 4px); background-position: 0 4px, 0.5em 1px, 0.5em 4px; background-origin: padding-box, padding-box, border-box; background-clip: content-box, padding-box, content-box; background-repeat: repeat, repeat, repeat-x;
}
.chord:before,
.chord:after { position: absolute; top: 2px; left: 0; top: -1em; text-indent: -1em; text-align: center; line-height: 1; color: transparent;
}
.chord:before { content: "○";
}
.chord:after { padding-top: 4px; content: "●";
}
.chord-caption { text-align: center; position: absolute; padding: 0.5ex; left: 100%; bottom: 0; box-sizing: border-box;
}
.chord--A:before { text-shadow: 2em 0em 0 black, 6em 0em 0 black;
}
.chord--A:after { text-shadow: 3em 2em 0 black, 4em 2em 0 black, 5em 2em 0 black;
}
.chord--Am:before { text-shadow: 2em 0em 0 black, 6em 0em 0 black;
}
.chord--Am:after { text-shadow: 3em 2em 0 black, 4em 2em 0 black, 5em 1em 0 black;
}
.chord--B:after { text-shadow: 2em 1em 0 black, 3em 3em 0 black, 4em 3em 0 black, 5em 3em 0 black, 6em 1em 0 black;
}
.chord--Bm:after { text-shadow: 2em 1em 0 black, 3em 3em 0 black, 4em 3em 0 black, 5em 2em 0 black, 6em 1em 0 black;
}
.chord--C:before { text-shadow: 4em 0em 0 black, 6em 0em 0 black;
}
.chord--C:after { text-shadow: 2em 3em 0 black, 3em 2em 0 black, 5em 1em 0 black;
}
.chord--D:before { text-shadow: 3em 0em 0 black;
}
.chord--D:after { text-shadow: 4em 2em 0 black, 5em 3em 0 black, 6em 2em 0 black;
}
.chord--Dm:before { text-shadow: 3em 0em 0 black;
}
.chord--Dm:after { text-shadow: 4em 2em 0 black, 5em 3em 0 black, 6em 1em 0 black;
}
.chord--E:before { text-shadow: 1em 0em 0 black, 5em 0em 0 black, 6em 0em 0 black;
}
.chord--E:after { text-shadow: 2em 2em 0 black, 3em 2em 0 black, 4em 1em 0 black;
}
.chord--Em:before { text-shadow: 1em 0em 0 black, 4em 0em 0 black, 5em 0em 0 black, 6em 0em 0 black;
}
.chord--Em:after { text-shadow: 2em 2em 0 black, 3em 2em 0 black;
}
.chord--F:after { text-shadow: 1em 1em 0 black, 2em 3em 0 black, 3em 3em 0 black, 4em 2em 0 black, 5em 1em 0 black, 6em 1em 0 black;
}
.chord--Fm:after { text-shadow: 1em 1em 0 black, 2em 3em 0 black, 3em 3em 0 black, 4em 1em 0 black, 5em 1em 0 black, 6em 1em 0 black;
}
.chord--G:before { text-shadow: 3em 0em 0 black, 4em 0em 0 black, 5em 0em 0 black;
}
.chord--G:after { text-shadow: 1em 3em 0 black, 2em 2em 0 black, 6em 3em 0 black;
}
3rd try - Script Codes
3rd try - Script Codes
Home Page Home
Developer Orion Drummond
Username tappily
Uploaded August 22, 2022
Rating 3
Size 3,465 Kb
Views 28,336
Do you need developer help for 3rd try?

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!

Orion Drummond (tappily) Script Codes
Name
Aspect-oriented tabs
Studded wallpaper
Image based blurry background
Responsive Background Image Loading
Responsive radio tabs
Menu toggle with unicode icons
Blue folds wallpaper
Hash navigation pattern
Flex-wrapped columns
Conditional compiler test
Create amazing web content 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!