A Pen by Alexander Erlandsson on CodePen.
Enza enzienza
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <h1>Responsive Map</h1> | |
| <div id="map_container"></div> | |
| <div id="map"></div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="wrap"> | |
| <div class="info"> | |
| <div class="info-col info-col-left"> | |
| <div class="info-item orange"> | |
| <div class="info-item-text"> | |
| <h3>Lorem <span class="mark">ipsum.</span></h3> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque ex nisi sapiente consectetur quis quaerat vitae commodi, dolores tempora, in quasi fugiat sequi.</p> | |
| </div> | |
| <div class="info-item-wrap"> | |
| <div class="info-item-triangle"> |
enzienza
/ direction-aware-text-shadow.markdown
Created
November 3, 2018 10:00
Direction-aware text-shadow
Direction-aware text-shadow, use of css variables to create perspective and 3D light effect on text
A Pen by Martin Picod on CodePen.
A Pen by Matt Litzinger on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="toolbar mb2 mt2"> | |
| <button class="btn fil-cat" href="" data-rel="all">All</button> | |
| <button class="btn fil-cat" data-rel="web">Websites</button> | |
| <button class="btn fil-cat" data-rel="flyers">Flyers</button> | |
| <button class="btn fil-cat" data-rel="bcards">Business Cards</button> | |
| </div> | |
| <div id="portfolio"> | |
| <div class="tile scale-anm web all"> | |
| <img src="http://demo.themerain.com/charm/wp-content/uploads/2015/04/2-mon_1092-300x234.jpg" alt="" /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- App --> | |
| <div id="app"> | |
| <component :is="state.view"> | |
| <h1>{{ state.view }}</h1> | |
| </component> | |
| <controls></controls> | |
| </div> | |
| <!-- Controls --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet"> | |
| <div class="container" ng-class="{'no-scroll': selected.length}" ng-app="app" ng-controller="mainCtrl"> | |
| <div class="page"> | |
| <div class="grid"> | |
| <div class="grid-item" ng-repeat="item in boxes"> | |
| <box class="box" item="item" on-select="selectBox" ng-class="{'selected': selected[0].item.name == item.name}"></box> | |
| </div> | |
| </div> |
Contact Us Form with envelope animation
A Pen by Justin Felcan on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <button class="error-code"> | |
| <div class="number five"> | |
| <div class="cell filled"><div class="bug"></div></div> | |
| <div class="cell filled"><div class="bug"></div></div> | |
| <div class="cell filled"><div class="bug"></div></div> | |
| <div class="cell filled"><div class="bug"></div></div> | |
| <div class="cell filled"><div class="bug"></div></div> | |
| <div class="cell empty"></div> | |
| <div class="cell empty"></div> |