Skip to content

Instantly share code, notes, and snippets.

View Polarhardboiled's full-sized avatar

Zylla Polarhardboiled

View GitHub Profile
@Polarhardboiled
Polarhardboiled / index.html
Created September 22, 2018 11:47
Menu toggle button
<div id="toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div id="menu">
Hello, I'm a menu!
</div>
@Polarhardboiled
Polarhardboiled / flexbox-navbar-with-toggle.markdown
Created September 22, 2018 11:50
Flexbox navbar with toggle
@Polarhardboiled
Polarhardboiled / index.html
Created September 22, 2018 13:19
Pure CSS Hamburger fold-out menu
<!-- Made by Erik Terwan -->
<!-- 24th of November 2015 -->
<!-- MIT License -->
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
@Polarhardboiled
Polarhardboiled / css-only-nested-dropdown-navigation-aria.markdown
Created September 23, 2018 12:57
CSS-Only Nested Dropdown Navigation (ARIA)
@Polarhardboiled
Polarhardboiled / css-dropdown-menu.markdown
Created September 23, 2018 12:59
CSS Dropdown Menu

CSS Dropdown Menu

Full CSS dropdown navigation. Drops down on click by the use of a hidden checkbox.

A Pen by Rlski on CodePen.

License.

@Polarhardboiled
Polarhardboiled / animated-menu.markdown
Created September 23, 2018 16:04
Animated Menu
@Polarhardboiled
Polarhardboiled / index.html
Created September 23, 2018 17:06
Pure CSS Hamburger Menu without JavaScript
<header>
<a href="#main-menu"
role="button"
id="main-menu-toggle"
class="menu-toggle"
aria-expanded="false"
aria-controls="main-menu"
aria-label="Open main menu">
<span class="sr-only">Open main menu</span>
@Polarhardboiled
Polarhardboiled / index.pug
Created September 25, 2018 07:10
Link hover effects
h1
a.gradient(href="##") Title link with <br> multiple lines - gradient hover</a></div>
p Хорошему дизайнеру не&nbsp;достаточно разбираться только в&nbsp;графике. Чтобы собрать сильное портфолио, искусно работать над разными задачами, придётся осваивать технический дизайн, знать основы вёрстки, работать с&nbsp;разными типами информации. Получить общее представление о&nbsp;веб-дизайне мне помогло обучение на&nbsp;<a href="##" class="gradient">Coursera</a>. Курс <a href="##" class="gradient">Human-Computer Interaction (University of&nbsp;California, San Diego)</a> даёт полезные знания о&nbsp;проектировании интерфейсов, быстром прототипировании и&nbsp;веб-технологиях в&nbsp;целом. Курс <a href="##" class="gradient">Design: Creation of&nbsp;Artifacts in&nbsp;Society (University of&nbsp;Pennsylvania)</a> вовлекает в&nbsp;сам процесс создания нового продукта, помогает понять потребности пользователя. Если вы&nbsp;предпочитаете офлайн-обучение, получить базовые знания о&nbsp;веб-дизайне, в&nbsp;частности о&nbsp
@Polarhardboiled
Polarhardboiled / index.html
Created September 25, 2018 07:13
Link Hover Arrow Idea
<p ontouchstart="true">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tamen <a href="#">intellego</a> quid velit. Quod quidem iam fit etiam in Academia. Si enim ad populum me vocas, eum. Contineo me ab exemplis. Non potes, <a href="#">nisi retexueris</a> illa. Tu vero, inquam, ducas licet, si sequetur; Quorum altera prosunt, nocent altera. Duo Reges: constructio interrete. Certe non potest.</p>
@Polarhardboiled
Polarhardboiled / index.html
Created October 11, 2018 12:41
Pure CSS panels
<!-- Home Panel -->
<div class="panel" id="home">
<div id="particles"></div>
<h1>Pure CSS panels</h1>
<p>by Mattia Astorino</p>
</div>
<div class="panel" id="slice">