Hi, my name is yusukebe.
- List1
- List2
kazu2012
kazu2012
/ filter.css
Created
October 12, 2016 02:12
— forked from sayar/filter.css
Standard CSS3 Filters Example
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
| img { | |
| filter: grayscale(50%) opacity(10%); | |
| } | |
| @keyframes filter-animation { | |
| 0% { | |
| filter: opacity(0); | |
| } | |
| 50% { | |
| filter: opacity(100%); |
kazu2012
/ Skewed background with CSS.markdown
Created
March 2, 2016 20:42
— forked from rjagadishsingh/Skewed background with CSS.markdown
Skewed background with CSS
This is a quick example to show @AlbertGlezRoges how to get skewed backgrounds with plain HTML & CSS.
A Pen by Jose L Pimienta on CodePen.
more at: https://github.com/Nosenation/Light-SCSS-Semantic.gs
A Pen by Yannick Albert 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
| /** | |
| * animated gradient display | |
| */ | |
| body { | |
| padding: 75px 0; | |
| font-family: Helvetica; | |
| font-size: 15px; | |
| } | |
| h1 { | |
| margin: 0 0 8px; |
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
| /** | |
| * animated gradient display | |
| */ | |
| body { | |
| padding: 75px 0; | |
| font-family: Helvetica; | |
| font-size: 15px; | |
| } | |
| h1 { | |
| margin: 0 0 8px; |
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
| <!-- content to be placed inside <body>…</body> --> | |
| <p>Hover over the panels to see the effects :) | |
| <div class="panels"> | |
| <a class="panel p0" href="#"> | |
| <div class="panel-info"> | |
| <h1>Rainbow.</h1> | |
| Bouncing <code>transition</code> on | |
| <code>background-size</code> and | |
| <code>background-position</code>. | |
| </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
| /** | |
| * animated gradient display | |
| */ | |
| body { | |
| padding: 75px 0; | |
| font-family: Helvetica; | |
| font-size: 15px; | |
| } | |
| h1 { | |
| margin: 0 0 8px; |
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 with irregular shapes with css3 and html5 | |
| */ | |
| div { box-sizing: border-box; } | |
| .container { | |
| overflow: hidden; | |
| width: 32em; | |
| height: 32em; | |
| margin: 5.6em auto 0; | |
| background: silver; |
NewerOlder