New Brandings

Developer
Chris Burnell
Size
5,617 Kb
Views
26,312
  1. New Brandings Previews
  2. New Brandings HTML Codes
  3. New Brandings CSS Codes

How do I make an new brandings?

And hovery animation experimentations.. What is a new brandings? How do you make a new brandings? This script and codes were developed by Chris Burnell on 16 September 2022, Friday.

New Brandings Previews
IQ Test

New Brandings - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>New Brandings</title> <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! */ /* One */
.one { text-shadow: -5px -5px salmon, 5px 5px lightblue;
}
.one:hover { text-shadow: 5px 5px salmon, -5px -5px lightblue;
}
/* Two */
.two { text-shadow: -6px 0px salmon, 6px 0px lightblue;
}
.two:hover { text-shadow: 6px 0px salmon, -6px 0px lightblue;
}
/* Three */
.three { text-shadow: -5px -5px salmon, 5px 5px lightblue;
}
.three:hover { text-shadow: -5px -5px lightblue, 5px 5px salmon;
}
/* Four */
.four { text-shadow: -3px -3px salmon, -6px -6px lightblue;
}
.four:hover { text-shadow: -6px -6px salmon, -12px -12px lightblue;
}
/* Five */
.five { text-shadow: -3px -3px salmon;
}
.five:hover { text-shadow: -6px -6px lightblue;
}
/* Six */
.six { text-shadow: -3px -3px salmon, -3px -3px lightblue;
}
.six:hover { text-shadow: -6px -6px 6px salmon, -11px -11px 6px lightblue;
}
/* Seven */
.seven { text-shadow: 0px 0px salmon, 0px 0px salmon, 0px 0px salmon, 0px 0px salmon;
}
.seven:hover { text-shadow: -1px -1px salmon, -2px -2px salmon, -3px -3px salmon, -4px -4px salmon;
}
/* Eight */
.eight { text-shadow: -1px -1px salmon, -2px -2px salmon, -3px -3px salmon, -4px -4px salmon, 1px 1px lightblue, 2px 2px lightblue, 3px 3px lightblue, 4px 4px lightblue;
}
.eight:hover { text-shadow: -1px -1px lightblue, -2px -2px lightblue, -3px -3px lightblue, -4px -4px lightblue, 1px 1px salmon, 2px 2px salmon, 3px 3px salmon, 4px 4px salmon;
}
/* Nine */
.nine { text-shadow: 0px 0px salmon, 1px 1px salmon, 2px 2px salmon, 3px 3px salmon;
}
.nine:hover { text-shadow: -1px -1px lightblue, -2px -2px lightblue, -3px -3px lightblue, -4px -4px lightblue;
}
/* Ten */
.ten { text-shadow: -1px -1px salmon, -2px -2px salmon, -3px -3px salmon, -4px -4px salmon;
}
.ten:hover { text-shadow: 1px -1px lightblue, 2px -2px lightblue, 3px -3px lightblue, 4px -4px lightblue;
}
/* Eleven */
.eleven { text-shadow: 0px -5px salmon, 0px -10px lightblue;
}
.eleven:hover { text-shadow: 0px -6px 10px salmon, 0px -11px 10px lightblue;
}
/* Twelve */
.twelve { color: salmon;
}
.twelve:hover { color: lightblue;
}
/* Thirteen */
.thirteen { color: salmon; text-shadow: 5px 5px lightblue;
}
.thirteen:hover { color: lightblue; text-shadow: 5px 5px salmon;
}
/* Fourteen */
.fourteen { color: salmon; text-shadow: 1px 1px lightblue, 2px 2px lightblue, 3px 3px lightblue, 4px 4px lightblue;
}
.fourteen:hover { color: lightblue; text-shadow: 1px 1px salmon, 2px 2px salmon, 3px 3px salmon, 4px 4px salmon;
}
/* Fifteen */
.fifteen { color: salmon; text-shadow: 1px 1px lightblue, 2px 2px lightblue, 3px 3px lightblue;
}
.fifteen:hover { color: lightblue; text-shadow: -1px -1px salmon, -2px -2px salmon, -3px -3px salmon;
}
/* Sixteen */
.sixteen { text-shadow: 0px 0px 0px salmon, 0px 0px 0px lightblue;
}
.sixteen:hover { color: rgba(0, 0, 0, 0.75); text-shadow: -6px 0px 4px salmon, 6px 0px 4px lightblue;
}
/* Seventeen */
.seventeen:hover { animation: seventeen 1s;
}
@keyframes seventeen { 0% { color: #000; } 33% { color: salmon; } 66% { color: lightblue; }
}
/* Eighteen */
.eighteen { text-shadow: -5px -5px salmon;
}
.eighteen:hover { animation: eighteen 0.8s; text-shadow: -5px -5px lightblue;
}
@keyframes eighteen { 0% { text-shadow: -5px -5px lightblue; } 25% { text-shadow: 5px -5px salmon; } 50% { text-shadow: 5px 5px lightblue; } 75% { text-shadow: -5px 5px salmon; }
}
/* Ninteen */
.nineteen { text-shadow: -3px -3px 8px salmon, -6px -6px 8px lightblue;
}
.nineteen:hover { animation: nineteen 2.5s infinite;
}
@keyframes nineteen { 25% { text-shadow: -3px -3px 7px lightblue, -6px -6px 7px salmon; } 50% { text-shadow: -3px -3px 8px salmon, -6px -6px 8px lightblue; } 75% { text-shadow: -3px -3px 7px lightblue, -6px -6px 7px salmon; }
}
/* Other styles */
html, body { margin: 7px; padding: 0px;
}
.description { font-size: 12px; vertical-align: top; line-height: 1.4em; padding: 10px;
}
.description:before { display: none;
}
span { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQAOvX7/+z4gsBhIQFRVlhAvCBECKwILIAmBBdAGQIAACIhPGO7psSwAAAABJRU5ErkJggg=="); font-family: Consolas, monaco, monospace; transition: all 200ms linear; border: 1px solid #eee; box-sizing: border-box; display: inline-block; position: relative; line-height: 160px; text-align: center; font-size: 100px; cursor: pointer; height: 150px; margin: 5px; width: 150px;
}
span:before { font-family: monospace; position: absolute; line-height: normal; text-shadow: none; font-size: 12px; color: #444; bottom: 4px; left: 4px; content: "1";
}
.two:before { content: "2";
}
.three:before { content: "3";
}
.four:before { content: "4";
}
.five:before { content: "5";
}
.six:before { content: "6";
}
.seven:before { content: "7";
}
.eight:before { content: "8";
}
.nine:before { content: "9";
}
.ten:before { content: "10";
}
.eleven:before { content: "11";
}
.twelve:before { content: "12";
}
.thirteen:before { content: "13";
}
.fourteen:before { content: "14";
}
.fifteen:before { content: "15";
}
.sixteen:before { content: "16";
}
.seventeen:before { content: "17";
}
.eighteen:before { content: "18";
}
.nineteen:before { content: "19";
}
.twenty:before { content: "20";
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <span class="description"> Branding/Animation ideas. <br><br> Which # do you prefer? <br><br> Tweet me <a href="https://twitter.com/twholman" target="_blank"> @twholman </a> </span>
<span class="one">T</span>
<span class="two">T</span>
<span class="three">T</span>
<span class="four">T</span>
<span class="five">T</span>
<span class="six">T</span>
<span class="seven">T</span>
<span class="eight">T</span>
<span class="nine">T</span>
<span class="ten">T</span>
<span class="eleven">T</span>
<span class="twelve">T</span>
<span class="thirteen">T</span>
<span class="fourteen">T</span>
<span class="fifteen">T</span>
<span class="sixteen">T</span>
<span class="seventeen">T</span>
<span class="eighteen">T</span>
<span class="nineteen">T</span>
</body>
</html>

New Brandings - Script Codes CSS Codes

/* One */
.one { text-shadow: -5px -5px salmon, 5px 5px lightblue;
}
.one:hover { text-shadow: 5px 5px salmon, -5px -5px lightblue;
}
/* Two */
.two { text-shadow: -6px 0px salmon, 6px 0px lightblue;
}
.two:hover { text-shadow: 6px 0px salmon, -6px 0px lightblue;
}
/* Three */
.three { text-shadow: -5px -5px salmon, 5px 5px lightblue;
}
.three:hover { text-shadow: -5px -5px lightblue, 5px 5px salmon;
}
/* Four */
.four { text-shadow: -3px -3px salmon, -6px -6px lightblue;
}
.four:hover { text-shadow: -6px -6px salmon, -12px -12px lightblue;
}
/* Five */
.five { text-shadow: -3px -3px salmon;
}
.five:hover { text-shadow: -6px -6px lightblue;
}
/* Six */
.six { text-shadow: -3px -3px salmon, -3px -3px lightblue;
}
.six:hover { text-shadow: -6px -6px 6px salmon, -11px -11px 6px lightblue;
}
/* Seven */
.seven { text-shadow: 0px 0px salmon, 0px 0px salmon, 0px 0px salmon, 0px 0px salmon;
}
.seven:hover { text-shadow: -1px -1px salmon, -2px -2px salmon, -3px -3px salmon, -4px -4px salmon;
}
/* Eight */
.eight { text-shadow: -1px -1px salmon, -2px -2px salmon, -3px -3px salmon, -4px -4px salmon, 1px 1px lightblue, 2px 2px lightblue, 3px 3px lightblue, 4px 4px lightblue;
}
.eight:hover { text-shadow: -1px -1px lightblue, -2px -2px lightblue, -3px -3px lightblue, -4px -4px lightblue, 1px 1px salmon, 2px 2px salmon, 3px 3px salmon, 4px 4px salmon;
}
/* Nine */
.nine { text-shadow: 0px 0px salmon, 1px 1px salmon, 2px 2px salmon, 3px 3px salmon;
}
.nine:hover { text-shadow: -1px -1px lightblue, -2px -2px lightblue, -3px -3px lightblue, -4px -4px lightblue;
}
/* Ten */
.ten { text-shadow: -1px -1px salmon, -2px -2px salmon, -3px -3px salmon, -4px -4px salmon;
}
.ten:hover { text-shadow: 1px -1px lightblue, 2px -2px lightblue, 3px -3px lightblue, 4px -4px lightblue;
}
/* Eleven */
.eleven { text-shadow: 0px -5px salmon, 0px -10px lightblue;
}
.eleven:hover { text-shadow: 0px -6px 10px salmon, 0px -11px 10px lightblue;
}
/* Twelve */
.twelve { color: salmon;
}
.twelve:hover { color: lightblue;
}
/* Thirteen */
.thirteen { color: salmon; text-shadow: 5px 5px lightblue;
}
.thirteen:hover { color: lightblue; text-shadow: 5px 5px salmon;
}
/* Fourteen */
.fourteen { color: salmon; text-shadow: 1px 1px lightblue, 2px 2px lightblue, 3px 3px lightblue, 4px 4px lightblue;
}
.fourteen:hover { color: lightblue; text-shadow: 1px 1px salmon, 2px 2px salmon, 3px 3px salmon, 4px 4px salmon;
}
/* Fifteen */
.fifteen { color: salmon; text-shadow: 1px 1px lightblue, 2px 2px lightblue, 3px 3px lightblue;
}
.fifteen:hover { color: lightblue; text-shadow: -1px -1px salmon, -2px -2px salmon, -3px -3px salmon;
}
/* Sixteen */
.sixteen { text-shadow: 0px 0px 0px salmon, 0px 0px 0px lightblue;
}
.sixteen:hover { color: rgba(0, 0, 0, 0.75); text-shadow: -6px 0px 4px salmon, 6px 0px 4px lightblue;
}
/* Seventeen */
.seventeen:hover { animation: seventeen 1s;
}
@keyframes seventeen { 0% { color: #000; } 33% { color: salmon; } 66% { color: lightblue; }
}
/* Eighteen */
.eighteen { text-shadow: -5px -5px salmon;
}
.eighteen:hover { animation: eighteen 0.8s; text-shadow: -5px -5px lightblue;
}
@keyframes eighteen { 0% { text-shadow: -5px -5px lightblue; } 25% { text-shadow: 5px -5px salmon; } 50% { text-shadow: 5px 5px lightblue; } 75% { text-shadow: -5px 5px salmon; }
}
/* Ninteen */
.nineteen { text-shadow: -3px -3px 8px salmon, -6px -6px 8px lightblue;
}
.nineteen:hover { animation: nineteen 2.5s infinite;
}
@keyframes nineteen { 25% { text-shadow: -3px -3px 7px lightblue, -6px -6px 7px salmon; } 50% { text-shadow: -3px -3px 8px salmon, -6px -6px 8px lightblue; } 75% { text-shadow: -3px -3px 7px lightblue, -6px -6px 7px salmon; }
}
/* Other styles */
html, body { margin: 7px; padding: 0px;
}
.description { font-size: 12px; vertical-align: top; line-height: 1.4em; padding: 10px;
}
.description:before { display: none;
}
span { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQAOvX7/+z4gsBhIQFRVlhAvCBECKwILIAmBBdAGQIAACIhPGO7psSwAAAABJRU5ErkJggg=="); font-family: Consolas, monaco, monospace; transition: all 200ms linear; border: 1px solid #eee; box-sizing: border-box; display: inline-block; position: relative; line-height: 160px; text-align: center; font-size: 100px; cursor: pointer; height: 150px; margin: 5px; width: 150px;
}
span:before { font-family: monospace; position: absolute; line-height: normal; text-shadow: none; font-size: 12px; color: #444; bottom: 4px; left: 4px; content: "1";
}
.two:before { content: "2";
}
.three:before { content: "3";
}
.four:before { content: "4";
}
.five:before { content: "5";
}
.six:before { content: "6";
}
.seven:before { content: "7";
}
.eight:before { content: "8";
}
.nine:before { content: "9";
}
.ten:before { content: "10";
}
.eleven:before { content: "11";
}
.twelve:before { content: "12";
}
.thirteen:before { content: "13";
}
.fourteen:before { content: "14";
}
.fifteen:before { content: "15";
}
.sixteen:before { content: "16";
}
.seventeen:before { content: "17";
}
.eighteen:before { content: "18";
}
.nineteen:before { content: "19";
}
.twenty:before { content: "20";
}
New Brandings - Script Codes
New Brandings - Script Codes
Home Page Home
Developer Chris Burnell
Username chrisburnell
Uploaded September 16, 2022
Rating 3
Size 5,617 Kb
Views 26,312
Do you need developer help for New Brandings?

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!

Chris Burnell (chrisburnell) Script Codes
Name
Interesting Hover Animation
Category Hover Demo
Square Illusion
Flyknife Comics
The power of transform for centering
Modal Container without JS
Simple CSS Checkbox
The power of transform for centering - INTERACTIVE
Zoomy Anchor Thing
Globule Bleu Jobs Page Anchor Rollover Effect
Create amazing Facebook ads 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!