CSS Camera inspired by: https://dribbble.com/shots/3027693-White-Leica
A Pen by Cassidy Williams on CodePen.
<nav class="toc"> | |
<ul> | |
<li><a href="#intro">Intro</a></li> | |
<li> | |
<a href="#dev">Developer Mode</a> | |
<ul> | |
<li><a href="#dev-edit-html">Edit HTML</a></li> | |
<li><a href="#dev-element-classes">Element Classes</a></li> | |
<li><a href="#dev-slide-classes">Slide Classes</a></li> | |
<li><a href="#dev-export-html">Export HTML</a></li> |
CSS Camera inspired by: https://dribbble.com/shots/3027693-White-Leica
A Pen by Cassidy Williams on CodePen.
<body> | |
<div class="MainContent"> | |
Here is a bunch of text up at the top. But there isn't enough content to push the footer to the bottom of the page. | |
</div> | |
<div class="Footer"> | |
However, thanks to flexbox, I've been put in my place. | |
</div> | |
</body> |
<div class="row middle-on-small center-on-small"> | |
<div class="column small-12 medium-6 large-4"> | |
<a href="#!" class="c-button c-button--gooey"> | |
Need mana | |
<div class="c-button__blobs"> | |
<div></div> | |
<div></div> | |
<div></div> | |
</div> | |
</a> |
<!-- Instead of using the 'title' attribute, simply use 'data-info' --> | |
<h1>Info on Hover!</h1> | |
<h2>Prettifying the 'title' attribute without Javascript!</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <dfn data-info="Lorem ipsum dolor sit amet, perspiciatis consectetur dolor.">Perspiciatis consectetur</dfn> Et delectus ut neque quod porro maiores est. Asperiores aspernatur rerum, explicabo ipsa consequatur, accusantium <dfn data-info="Lorem ipsum dolor sit amet.">provident optio</dfn> officia maxime libero sint esse.</p> | |
<p>Lorem ipsum dolor sit amet, perspiciatis consectetur adipisicing elit. Dolor perspiciatis deserunt adipisci rem deserunt iste nulla tenetur. <dfn data-info="Lorem ipsum dolor sit amet, perspiciatis consectetur dolor.">Iste aliquid perspiciatis</dfn> dolorem laborum, nulla fugit accusamus possimus id tenetur officiis, impedit necessitatibus illo!</p> |
A Pen by Manuel Matuzovic on CodePen.
This is an experiment on how SVG patterns can help us create masked-like images for a CSS-only image slider.
CHANGELOG
Added will-change
property to improve performance.
A Pen by Damián Muti on CodePen.
<div class="container"> | |
<svg class="lineSVG" version="1.1" x="0px" y="0px" width="900px" height="600px" viewBox="0 0 900 600"> | |
<defs> | |
<filter id="glow" width="400%" x="-50%" y="-50%" height="200%"> | |
<feGaussianBlur stdDeviation="2 2" result="coloredBlur"/> | |
<feMerge> | |
<feMergeNode in="coloredBlur"/> | |
<feMergeNode in="SourceGraphic"/> | |
</feMerge> |
<input maxlength='7' value='0123456'/> |