Element Query Demo with EQCSS
How do I make an element query demo with eqcss?
This demo uses EQCSS, a vanilla JavaScript plugin that adds element queries, style scoping, JavaScript-powered variables, a parent selector, and more to CSS. The plugin works in all browsers IE8 and up.. What is a element query demo with eqcss? How do you make a element query demo with eqcss? This script and codes were developed by Tommy Hodgins on 11 July 2022, Monday.
Element Query Demo with EQCSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Element Query Demo with EQCSS</title> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Tauri|Playfair+Display:400,400italic|Playfair+Display+SC&subset=latin,latin-ext'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <h1>Super Awesome Movies</h1>
</header>
<article> <section data-best-picture> <h1>2015 Best Picture Nominees</h1> <ol> <li> <a href=#> <img src=http://trailers.apple.com/trailers/wb/americansniper/images/poster-large.jpg> <div> <h2>American Sniper</h2> <p>Clint Eastwood</p> </div> </a> </li> <li class=winner> <a href=#> <img src=http://trailers.apple.com/trailers/fox_searchlight/birdman/images/poster-large.jpg> <div> <h2>Birdman</h2> <p>Alejandro G. Iñarritu</p> </div> </a> </li> <li> <a href=#> <img src=http://trailers.apple.com/trailers/ifcfilms/boyhood/images/poster-large.jpg> <div> <h2>Boyhood</h2> <p>Richard Linklater</p> </div> </a> </li> <li> <a href=#> <img src=http://trailers.apple.com/trailers/fox_searchlight/thegrandbudapesthotel/images/poster-large.jpg> <div> <h2>The Grand Budapest Hotel</h2> <p>Wes Anderson</p> </div> </a> </li> <li> <a href=#> <img src=http://trailers.apple.com/trailers/weinstein/theimitationgame/images/poster-large.jpg> <div> <h2>The Imitation Game</h2> <p>Morten Tyldum</p> </div> </a> </li> <li> <a href=#> <img src=http://trailers.apple.com/trailers/paramount/selma/images/poster-large.jpg> <div> <h2>Selma</h2> <p>Ava DuVernay</p> </div> </a> </li> <li> <a href=#> <img src=http://trailers.apple.com/trailers/focus_features/thetheoryofeverything/images/poster-large.jpg> <div> <h2>The Theory of Everything</h2> <p>James Marsh</p> </div> </a> </li> <li> <a href=#> <img src=http://trailers.apple.com/trailers/sony/whiplash/images/poster-large.jpg> <div> <h2>Whiplash</h2> <p>Damien Chazelle</p> </div> </a> </li> </ol> </section> <aside data-best-picture> <h1>2015 Best Picture Nominees</h1> <ol> <li> <a href=#> <img src=http://trailers.apple.com/trailers/wb/americansniper/images/poster-large.jpg> <div> <h2>American Sniper</h2> <p>Clint Eastwood</p> </div> </a> </li> <li class=winner> <a href=#> <img src=http://trailers.apple.com/trailers/fox_searchlight/birdman/images/poster-large.jpg> <div> <h2>Birdman</h2> <p>Alejandro G. Iñarritu</p> </div> </a> </li> <li> <a href=#> <img src=http://trailers.apple.com/trailers/ifcfilms/boyhood/images/poster-large.jpg> <div> <h2>Boyhood</h2> <p>Richard Linklater</p> </div> </a> </li> <li> <a href=#> <img src=http://trailers.apple.com/trailers/fox_searchlight/thegrandbudapesthotel/images/poster-large.jpg> <div> <h2>The Grand Budapest Hotel</h2> <p>Wes Anderson</p> </div> </a> </li> <li> <a href=#> <img src=http://trailers.apple.com/trailers/weinstein/theimitationgame/images/poster-large.jpg> <div> <h2>The Imitation Game</h2> <p>Morten Tyldum</p> </div> </a> </li> <li> <a href=#> <img src=http://trailers.apple.com/trailers/paramount/selma/images/poster-large.jpg> <div> <h2>Selma</h2> <p>Ava DuVernay</p> </div> </a> </li> <li> <a href=#> <img src=http://trailers.apple.com/trailers/focus_features/thetheoryofeverything/images/poster-large.jpg> <div> <h2>The Theory of Everything</h2> <p>James Marsh</p> </div> </a> </li> <li> <a href=#> <img src=http://trailers.apple.com/trailers/sony/whiplash/images/poster-large.jpg> <div> <h2>Whiplash</h2> <p>Damien Chazelle</p> </div> </a> </li> </ol> </aside> <footer> <p>Movie images and information via <a href=http://trailers.apple.com>Apple Trailers</a></p> </footer>
</article> <script src='https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.2.1/EQCSS.min.js'></script>
</body>
</html>
Element Query Demo with EQCSS - Script Codes CSS Codes
*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto;
}
html { font-size: 10pt; line-height: 1.4; font-weight: 400; font-family: 'Open Sans', 'Source Sans Pro', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif; -webkit-text-size-adjust: 100%;
}
body { margin: 0;
}
header { padding: 1em; background: -webkit-linear-gradient(270deg, #cc0000, #660000); background: linear-gradient(180deg, #cc0000, #660000);
}
header h1 { margin: 0; font-family: "Playfair Display SC", serif; font-weight: 900; font-style: italic; color: white; text-shadow: 0 2px 2px black;
}
article { max-width: 1440px; margin: 0 auto; padding: 1em;
}
article:after { content: ''; display: block; clear: both;
}
footer p { font-family: "Source Sans Pro", sans-serif; font-size: 10pt; color: #555;
}
[data-best-picture] h1 { font-family: "Playfair Display SC", serif; font-size: 1.125em; font-weight: 400; font-style: smallcaps; text-align: center; background: -webkit-linear-gradient(270deg, #333, #111); background: linear-gradient(180deg, #333, #111); color: white; padding: 1rem;
}
aside[data-best-picture] h1 { background: linear-gradient(180deg, #333, #111); color: white;
}
[data-best-picture] ol { list-stlye: none; padding: 0; margin: 1em;
}
[data-best-picture] li { display: block;
}
[data-best-picture] li + li { border-top: 1px solid #ddd; padding-top: 0.5em; margin-top: 0.5em;
}
[data-best-picture] a { text-decoration: none; display: block; position: relative;
}
[data-best-picture] a:after { content: ''; display: table; clear: both;
}
[data-best-picture] img { float: left; width: 20%; -webkit-transition: -webkit-transform 150ms ease-in-out; transition: -webkit-transform 150ms ease-in-out; transition: transform 150ms ease-in-out; transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
}
[data-best-picture] a:hover [data-best-picture] img { -webkit-transform: scale(0.9); transform: scale(0.9);
}
[data-best-picture] div { float: left; width: 80%; padding-left: 0.5em; box-sizing: border-box;
}
[data-best-picture] h2 { color: #333; margin: 0; font-family: "Playfair Display", serif; font-weight: 400; font-size: 1em;
}
[data-best-picture] .winner h2 { font-weight: 700; font-style: italic; color: #C69F24;
}
[data-best-picture] p { margin: 0; color: #666; font-family: "Tauri", sans-serif; font-size: 0.75em; font-weight: 400;
}
[data-best-picture] .winner p { color: #888;
}
[data-best-picture] p:before { content: 'Directed by: '; font-weight: 400; color: #999; display: none;
}
aside { display: none;
}
@element '[data-best-picture] p' and (min-width: 220px) { $this:before { display: inline; }
}
@element '[data-best-picture] .winner div' and (min-width: 220px) { $this:before { content: 'Best Picture Winner'; }
}
@element '[data-best-picture]' and (min-width: 400px) { $this h1 { background: none; color: #333; font-size: 1.25em; } $this li { display: inline-block; width: 50%; } $this li + li { border-top: none; padding-top: auto; margin-top: auto; margin-left: -4px; } $this a { overflow: hidden; margin: 0.5em; border: 1px solid #333; box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.5); } $this a:after { display: block; content: ''; padding-top: 147.5095785%; } $this img { float: none; width: 100%; position: absolute; display: block; } $this a:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } $this div { float: none; width: 100%; position: absolute; bottom: 0; padding: 1.5em 1em; background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)); background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9)); } $this .winner div { background: -webkit-linear-gradient(270deg, rgba(193, 165, 32, 0.9), rgba(137, 100, 14, 0.9)); background: linear-gradient(180deg, rgba(193, 165, 32, 0.9), rgba(137, 100, 14, 0.9)); padding: 0.5em 1em 1.5em; } $this .winner div:before { content: '2015 Winner'; color: white; font-family: "Tauri", sans-serif; font-size: 0.675em; text-shadow: 0px -1px rgba(0, 0, 0, 0.3); text-transform: uppercase; display: block; text-align: center; letter-spacing: 0.25em; margin: 0 -1em 0.5em; } $this h2 { font-size: 1.125em; color: white; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); } $this .winner h2 { font-weight: 700; color: white; text-shadow: 0 -1px #89640E; } $this p { color: white; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); } $this p:before { color: #aaa; } $this .winner p { color: #312A05; text-shadow: 0 1px rgba(214, 188, 46, 0.4); } [data-best-picture] .winner p:before { color: #413806; }
}
@element '[data-best-picture]' and (min-width: 600px) { $this h1 { font-size: 1.75em; } $this ol { margin: 1em; } $this li { width: 33.333%; }
}
@element '[data-best-picture]' and (min-width: 900px) { $this h1 { font-size: 2.5em; } $this li { width: 25%; }
}
@element 'article' and (min-width: 900px) { $this section, $this aside { float: left; } $this section { width: 75%; } $this aside { display: block; width: 25% }
}
Developer | Tommy Hodgins |
Username | tomhodgins |
Uploaded | July 11, 2022 |
Rating | 3.5 |
Size | 4,286 Kb |
Views | 32,384 |
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!
Name | Size |
Amazing Reviews | 3,475 Kb |
Basic HTML Slideshow | 3,386 Kb |
CSS Parent Selector | 2,143 Kb |
Responsive Scrolling Sticky Header | 4,143 Kb |
My CSS Wishlist | 4,039 Kb |
Using JavaScript variables in CSS | 2,478 Kb |
Responsive Pagination | 2,446 Kb |
Matching height via EH units | 2,085 Kb |
Alternating Blockquotes | 2,845 Kb |
Self-Responsive Social Buttons | 2,016 Kb |
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!
Name | Username | Size |
Mario | Takaneichinose | 3,902 Kb |
Double box-shadow | Daubac402 | 1,436 Kb |
Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
Slides-07-1 POSITION | Exhtml | 1,909 Kb |
Boxes | H3l1um | 2,563 Kb |
Parallax.js | Zmeeey5 | 2,330 Kb |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
Main page display | BarryKe | 4,562 Kb |
Modular Flip Card | Bbodine1 | 4,009 Kb |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!