Aspect-oriented tabs

Developer
Orion Drummond
Size
4,693 Kb
Views
32,384
  1. Aspect-oriented tabs Previews
  2. Aspect-oriented tabs HTML Codes
  3. Aspect-oriented tabs CSS Codes

How do I make an aspect-oriented tabs?

What is a aspect-oriented tabs? How do you make a aspect-oriented tabs? This script and codes were developed by Orion Drummond on 22 August 2022, Monday.

Aspect-oriented tabs Previews
IQ Test

Aspect-oriented tabs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Aspect-oriented tabs</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://codepen.io/tappily/pen/raqmzW.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h1> Aspect-oriented tabs </h1> <p> This approach perserves the tab interaction model across wide and narrow viewports. The element structure eliminates the need for nth child selections. </p>
</header>
<main> <h2>vanilla</h2> <div class='ao-tabs ao-tabs-vanilla'> <input id="vanilla-1" type="radio" name="vanilla" checked> <label for='vanilla-1'>label 1</label> <section class='columns'> <h2>Section 1</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> <input id="vanilla-2" type="radio" name="vanilla" > <label for='vanilla-2'>label 2</label> <section class='columns'> <h2>Section 2</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> <input id="vanilla-3" type="radio" name="vanilla" > <label for='vanilla-3'>label 3</label> <section class='columns'> <h2>Section 3</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> <input id="vanilla-4" type="radio" name="vanilla" > <label for='vanilla-4'>label 4</label> <section class='columns'> <h2>Section 4</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> <input id="vanilla-5" type="radio" name="vanilla" > <label for='vanilla-5'>label 5</label> <section class='columns'> <h2>Section 5</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> <input id="vanilla-6" type="radio" name="vanilla" > <label for='vanilla-6'>label 6</label> <section class='columns'> <h2>Section 6</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> </div> <h2>bubbles</h2> <div class='ao-tabs ao-tabs-bubbles'> <input id="bubbles-1" type="radio" name="bubbles" checked> <label for='bubbles-1'>label 1</label> <section class='columns'> <h2>Section 1</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> <input id="bubbles-2" type="radio" name="bubbles" > <label for='bubbles-2'>label 2</label> <section class='columns'> <h2>Section 2</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> <input id="bubbles-3" type="radio" name="bubbles" > <label for='bubbles-3'>label 3</label> <section class='columns'> <h2>Section 3</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> <input id="bubbles-4" type="radio" name="bubbles" > <label for='bubbles-4'>label 4</label> <section class='columns'> <h2>Section 4</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> <input id="bubbles-5" type="radio" name="bubbles" > <label for='bubbles-5'>label 5</label> <section class='columns'> <h2>Section 5</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> <input id="bubbles-6" type="radio" name="bubbles" > <label for='bubbles-6'>label 6</label> <section class='columns'> <h2>Section 6</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> </div> <h2>bar</h2> <div class='ao-tabs ao-tabs-bar'> <input id="bar-1" type="radio" name="bar" checked> <label for='bar-1'>label 1</label> <section class='columns'> <h2>Section 1</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> <input id="bar-2" type="radio" name="bar" > <label for='bar-2'>label 2</label> <section class='columns'> <h2>Section 2</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> <input id="bar-3" type="radio" name="bar" > <label for='bar-3'>label 3</label> <section class='columns'> <h2>Section 3</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> <input id="bar-4" type="radio" name="bar" > <label for='bar-4'>label 4</label> <section class='columns'> <h2>Section 4</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> <input id="bar-5" type="radio" name="bar" > <label for='bar-5'>label 5</label> <section class='columns'> <h2>Section 5</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> <input id="bar-6" type="radio" name="bar" > <label for='bar-6'>label 6</label> <section class='columns'> <h2>Section 6</h2> <p> Vanquish the impossible decipherment, culture. Two ghostly white figures in coveralls and helmets are soflty dancing, at the edge of forever, how far away rich in heavy atoms hundreds of thousands! White dwarf, Tunguska event encyclopaedia galactica, Drake Equation! The sky calls to us as a patch of light, dream of the mind's eye quasar trillion circumnavigated rich in mystery courage of our questions birth dispassionate extraterrestrial observer the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions. </p> </section> </div>
</main>
</body>
</html>

Aspect-oriented tabs - Script Codes CSS Codes

.ao-tabs { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; position: relative; margin: 1em 0;
}
.ao-tabs :focus + label { text-decoration: underline;
}
.ao-tabs > label { text-transform: uppercase; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; position: relative; z-index: 1; padding: 1ex 1em; background-color: silver;
}
.ao-tabs > label + section { background-color: white; display: none; -webkit-box-flex: 1; -ms-flex: 1 0 100%; flex: 1 0 100%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding: 1em; margin: 0; box-sizing: border-box;
}
.ao-tabs > [type=radio] { position: absolute; left: 50%; top: 50%; z-index: -1;
}
.ao-tabs :checked + label { background-color: limegreen;
}
.ao-tabs :checked + label + section { display: block;
}
@media screen and (max-aspect-ratio: 1/1) { .ao-tabs, .ao-tabs label { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .ao-tabs :checked + label { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .ao-tabs :checked + label + section { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; }
}
.ao-tabs-bar:before,
.ao-tabs-bar:after { background-color: silver;
}
.ao-tabs-bar:before { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1;
}
.ao-tabs-bar:before,
.ao-tabs-bar:after { -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; content: "";
}
.ao-tabs-bar label + section { background-color: gray;
}
.ao-tabs-vanilla:before,
.ao-tabs-vanilla:after { -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; content: ""; border-bottom: .1em solid gray;
}
.ao-tabs-vanilla:before { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1;
}
.ao-tabs-vanilla label { border: .1em solid gray; border-top-left-radius: 1ex; border-top-right-radius: 1ex;
}
@media screen and (max-aspect-ratio: 1/1) { .ao-tabs-vanilla :not(:checked) + label:last-of-type { border-radius: 1ex; }
}
.ao-tabs-vanilla :checked + label { border-bottom-color: transparent; background-color: transparent;
}
.ao-tabs-vanilla > section { border-left: .1em solid gray; border-right: .1em solid gray;
}
.ao-tabs-bubbles label { background-clip: padding-box; margin: 0.5em; border-radius: 0.5em; position: relative; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; background-color: silver;
}
@media screen and (max-aspect-ratio: 1/1) { .ao-tabs-bubbles label { margin: 0.5em 0; }
}
.ao-tabs-bubbles :checked + label:after { content: ""; display: block; position: absolute; font-size: 1em; width: 1em; height: 1em; background: inherit; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; bottom: -0.25em; left: 50%;
}
.columns { -webkit-columns: 30em; -moz-columns: 30em; columns: 30em;
}
.columns > :nth-child(n) { margin: 0; font-size: 1rem; line-height: 1.5rem;
}
Aspect-oriented tabs - Script Codes
Aspect-oriented tabs - Script Codes
Home Page Home
Developer Orion Drummond
Username tappily
Uploaded August 22, 2022
Rating 3
Size 4,693 Kb
Views 32,384
Do you need developer help for Aspect-oriented tabs?

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
Studded wallpaper
Flex decorators
Responsive radio tabs
Flexbox scrollable table body
Conditional compiler test
A Pen by Orion Drummond
CSS Prompt
Google Web Font LESS Mixin
Neon wallpaper
Hash navigation pattern
Create amazing sales emails 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!