Skip to content

Instantly share code, notes, and snippets.

@Ichinya

Ichinya/demo.screen.css

Created June 30, 2021 05:26
Show Gist options
  • Save Ichinya/9da8205c2005c001044a081c99c836ba to your computer and use it in GitHub Desktop.
Save Ichinya/9da8205c2005c001044a081c99c836ba to your computer and use it in GitHub Desktop.
Download ZIP
Модальные окна без JS
Raw
demo.screen.css
/* null margins and padding to give good cross-browser baseline */
html, body, address, blockquote, div,
form, fieldset, caption,
h1, h2, h3, h4, h5, h6,
hr, ul, li, ol, ul, dl, dt, dd,
table, tr, td, th, p, img {
margin:0;
padding:0;
}
img, fieldset {
border:none;
}
* {
box-sizing:border-box;
}
hr {
display:none;
/*
HR in my code are for semantic breaks in topic/section, NOT
style/presenation, so hide them from screen.css users
*/
}
@media (max-width:480px) {
/* Fix for pre "viewport <meta>" mobile browsers */
* {
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none;
}
}
html, body {
height:100%;
}
body, button, input, table, textarea, select {
font:normal 1em/1.5 arial, helvetica, sans-serif;
}
#fauxInner {
display:flex;
flex-direction:column;
min-height:100%;
background:hsl(220, 100%, 95%);
}
#fauxInner > header,
#fauxInner > footer {
flex:0 0 auto;
display:flex;
flex-wrap:wrap;
padding:1em;
background:hsl(220, 100%, 90%);
}
#fauxInner > header {
align-items:center;
border-bottom:1px solid hsl(220, 100%, 60%);
}
#fauxInner > footer {
align-items:top;
border-top:1px solid hsl(220, 100%, 60%);
}
#fauxInner > header > section,
#fauxInner > footer > section {
flex:1 0 auto;
}
#fauxInner > footer section:last-child {
text-align:right;
}
#fauxInner > footer h2 {
font-size:1.25em;
}
main {
flex:1 0 auto;
max-width:48em;
margin:0 auto;
padding:1.5em;
}
h1 {
flex:1 0 auto;
font-size:1.5em;
}
main h2 {
font-size:1.5em;
line-height:1.2em;
margin-bottom:0.33em;
}
p {
padding-bottom:1.5em;
}
#mainMenu {
flex:0 0 auto;
}
#mainMenu ul {
display:flex;
align-items:center;
justify-content:end;
}
#mainMenu li {
list-style:none;
margin-left:1.5em;
}
#mainMenu li a {
display:inline-block;
padding:0.25em 0;
text-decoration:none;
color:#048;
transition:transform 0.3s, color 0.3s;
}
#mainMenu li a:focus,
#mainMenu li a:hover {
color:#000;
transform:scale(1.2);
}
fieldset {
padding-bottom:1em;
}
fieldset input,
.submitsAndHiddens button {
border:1px solid #0006;
border-radius:0.25em;
}
fieldset input {
padding:0.25em 0.5em;
}
fieldset > label input {
width:100%;
margin:0.25em 0 0.5em;
}
.submitsAndHiddens {
text-align:center;
}
.submitsAndHiddens button {
padding:0.25em 1em;
background:#0481;
color:#000;
transition:background 0.3s;
}
.submitsAndHiddens button:focus,
.submitsAndHiddens button:hover {
background:#0483;
}
#fauxInner > footer ul {
list-style:none;
}
#fauxInner > footer a {
text-decoration:none;
color:#048C;
}
#fauxInner > footer a:focus,
#fauxInner > footer a:hover {
text-decoration:underline;
color:#000E;
}
@media (max-width:38em) {
#fauxInner > footer {
display:block;
}
#fauxInner > footer section {
padding-bottom:1.5em;
text-align:center;
}
#fauxInner > footer section:last-child {
text-align:center;
padding-bottom:0;
}
}
Raw
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
name="viewport"
content="width=device-width,height=device-height,initial-scale=1"
>
<link
rel="stylesheet"
href="demo.screen.css"
media="screen,projection,tv"
>
<link
rel="stylesheet"
href="modalSite.screen.css"
media="screen,projection,tv"
>
<title>
Modal Website Without JavaScript Demo
</title>
<div id="fauxBody"><div id="fauxInner">
<header id="top">
<h1>
Modal Site Demo
</h1>
<span class="trigger"></span>
<div id="mainMenu">
<a href="#" class="modalClose" hidden aria-hidden="true"></a>
<div><nav>
<a href="#" class="modalClose" hidden aria-hidden="true"></a>
<ul>
<li><a href="#submenu">Sub Menu</a></li>
<li><a href="#search">Search</a></li>
<li><a href="#login">Log In</a></li>
</ul>
</nav></div>
<!-- #mainMenu --></div>
<a href="#mainMenu" class="mainMenuOpen" hidden aria-hidden="true"></a>
<!-- #top --></header>
<main>
<h2>Modal Site Demo, No JavaScript Needed</h2>
<p>
Using the CSS3 <code>:target</code> attribute we no longer need JavaScript to create modal dialogs. In fact we can enhance an entire website's user interface to not rely on JS and improve the accessibility with semantic markup and techniques that gracefully degrade.
</p><p>
Try any of the menu items above to see the modal dialogs in action. The "sub menu" includes a link to the search dialog, so you can see how transitioning from one to another behaves.
</p><p>
Also if you're on desktop shrink the window to see the "hamburger" style menu for mobile, where the main menu itself ALSO becomes a modal dialog!
</p>
</main>
<footer>
<section>
<h2>About</h2>
This demo by Jason M. Knight, Sept 2020<br>
Released to the Public Domain.
</section><section>
<h2>Links</h2>
<div>
<ul>
<li><a href="https://medium.com/@deathshadow/modal-dialog-driven-websites-without-javascript-16e858615780">Medium Article Explaining This</a></li>
<li><a href="https://cutcodedown.com/for_others/medium_articles/modalSite/modalSite.rar">.RAR file of the complete code.</a>
<li><a href="#top">Back To Top</a></li>
</ul>
</div>
</section>
</footer>
<!-- #fauxInner, #fauxBody --></div></div>
<form id="login" action="#" method="post" class="modal">
<a href="#" class="modalClose" hidden aria-hidden="true"></a>
<div><section>
<a href="#" class="modalClose" hidden aria-hidden="true"></a>
<h2>Log In</h2>
<div>
<fieldset>
<label>
Username:<br>
<input type="text" name="name" required><br>
</label><label>
Password:<br>
<input type="password" name="pass" required><br>
</label>
</fieldset>
<div class="submitsAndHiddens">
<button>Submit</button>
<!-- .submitsAndHiddens --></div>
</div>
</section></div>
<!-- #login.modal --></form>
<form id="search" action="#" method="post" class="modal">
<a href="#" class="modalClose" hidden aria-hidden="true"></a>
<div><section>
<a href="#" class="modalClose" hidden aria-hidden="true"></a>
<h2><label for="search_q">Search</label></h2>
<div>
<fieldset>
<input type="text" name="q" placeholder="HTML, CSS, JavaScript, etc..." required>
<button>&#x1F50D;</button>
</fieldset>
<p>
<em>Note this search is just a layout demo, and is non-functional.</em>
</p>
</div>
</section></div>
<!-- #search.modal --></form>
<div id="submenu" class="modal modalMenu">
<a href="#" class="modalClose" hidden aria-hidden="true"></a>
<div><nav>
<a href="#" class="modalClose" hidden aria-hidden="true"></a>
<h2>Sub Menu</h2>
<div>
<ul>
<li><a href="#search">Search</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</nav></div>
<!-- #submenu.modal.menu --></div>
</body></html>
Raw
modalSite.screen
.modal .modalClose {
display:inline; /* undo hidden */
text-decoration:none;
}
.modal,
.modal > .modalClose,
#fauxBody {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
}
.modal {
left:-100vw;
opacity:0;
padding:1em;
transition:opacity 0.3s, left 0s 0.3s;
background:radial-gradient(
hsla(220, 100%, 100%, 0.8) 20%,
hsla(220, 100%, 85%, 0.95) 100%
);
}
.modal:target {
left:0;
opacity:1;
transition:opacity 0.3s, left 0s;
}
.modal > div {
display:flex;
align-items:center;
justify-content:center;
min-height:100%;
}
.modal > div > section,
.modal > div > nav {
position:relative;
overflow:hidden;
width:100%;
max-width:24em;
background:hsl(220, 100%, 95%);
border:1px solid #0484;
border-radius:0.5em;
box-shadow:0 0.25em 1em #0006;
transform:scale(0);
transition:transform 0.3s;
}
.modal:target > div > section,
.modal:target > div > nav {
transform:scale(1);
}
section .modalClose,
nav .modalClose {
position:absolute;
top:0;
right:0.325em;
font-size:1.75em;
color:#C00;
transition:transform 0.3s;
}
section .modalClose:after,
nav .modalClose:after {
content:"\1F5D9";
}
section .modalClose:focus,
section .modalClose:hover,
nav .modalClose:focus,
nav .modalClose:hover {
transform:scale(1.2);
}
.modal h2 {
padding:0.4em 2.8em 0.4em 0.8em;
font-size:1.25em;
background:#0482;
border-bottom:1px solid #0484;
}
.modal h2 + div {
padding:1.5em 1.5em 0;
}
.modal p,
.modal ul,
.modal ol,
.modal .submitsAndHiddens {
padding-bottom:1.5em;
}
.modalMenu > div > nav {
width:auto;
}
.modalMenu > div > nav > div {
padding:0.25em;
}
.modalMenu ul {
list-style:none;
padding:0;
}
.modalMenu li {
display:block;
}
.modalMenu ul a {
display:block;
padding:0.25em 1em;
margin-bottom:0.25em;
text-align:center;
text-decoration:none;
background:#0481;
border:1px solid #0006;
transition:background 0.3s;
}
.modalMenu li:last-child a {
margin:0;
border-radius:0 0 0.25em 0.25em;
}
.modalMenu ul a:focus,
.modalMenu ul a:hover {
background:#0483;
}
#search > div > section {
max-width:32em;
}
#search > div > section > div {
padding:1em 1em 0;
}
/*
Because fieldset and button are "no flex zones" in
Webkit/Blink we'll have to absolute position the button
to get full width and operating on the same line. Sucks.
*/
#search fieldset {
position:relative;
padding-right:2.5em;
}
#search fieldset input {
width:100%;
}
#search button {
position:absolute;
right:-0.1em;
top:0.25em;
padding:0;
font-size:1.5em;
line-height:1em;
background:transparent;
border:none;
}
@media (max-width:40em) {
.mainMenuOpen {
flex:0 0 auto;
display:block;
padding:0.25em;
text-decoration:none;
border-radius:0.5em;
transition:transform 0.3s;
}
.mainMenuOpen:focus,
.mainMenuOpen:hover {
transform:scale(1.2);
}
.mainMenuOpen:before,
.mainMenuOpen:after {
content:"";
display:block;
width:1.75em;
height:0.325em;
border:solid #000A;
border-width:0.325em 0;
}
.mainMenuOpen:after {
border-top:none;
}
#mainMenu .modalClose {
display:inline; /* undo hidden */
text-decoration:none;
}
#mainMenu,
#mainMenu > .modalClose {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
}
#mainMenu {
left:-100vw;
opacity:0;
padding:1em;
transition:opacity 0.3s, left 0s 0.3s;
background:radial-gradient(
hsla(220, 100%, 100%, 0.8) 20%,
hsla(220, 100%, 85%, 0.95) 100%
);
}
#mainMenu:target {
left:0;
opacity:1;
transition:opacity 0.3s, left 0s;
}
#mainMenu div {
display:flex;
align-items:center;
justify-content:center;
min-height:100%;
}
#mainMenu nav {
position:relative;
overflow:hidden;
width:100%;
max-width:24em;
background:hsl(220, 100%, 95%);
border:1px solid #0484;
border-radius:0.5em;
box-shadow:0 0.25em 1em #0006;
transform:scale(0);
transition:transform 0.3s;
}
#mainMenu:target nav {
transform:scale(1);
}
#mainMenu nav:before {
content:"Main Menu";
display:block;
padding:0.4em 2.8em 0.4em 0.8em;
font-size:1.25em;
background:#0482;
border-bottom:1px solid #0484;
}
#mainMenu > div > nav {
flex:0 0 auto;
width:auto;
}
#mainMenu ul {
display:block; /* disable flex */
list-style:none;
padding:0.25em;
}
#mainMenu li {
display:inline;
margin:0;
}
#mainMenu ul a {
display:block;
padding:0.25em 1em;
margin-bottom:0.25em;
text-align:center;
text-decoration:none;
background:#0481;
border:1px solid #0006;
transition:background 0.3s;
}
#mainMenu li:last-child a {
margin:0;
border-radius:0 0 0.25em 0.25em;
}
#mainMenu ul a:focus,
#mainMenu ul a:hover {
transform:scale(1);
background:#0483;
}
} /* max-width:40em */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment