mirror of
https://github.com/codrops/TextStylesHoverEffects.git
synced 2025-12-08 20:26:25 +00:00
initial commit
This commit is contained in:
Manoela Ilic
commit
cb8993c1a4
20
README.md
Executable file
20
README.md
Executable file
@ -0,0 +1,20 @@
|
||||
Inspiration for Text Styles and Hover Effects
|
||||
=========
|
||||
|
||||
A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.
|
||||
|
||||
[Article on Codrops](http://tympanus.net/codrops/?p=24024)
|
||||
|
||||
[Demo](http://tympanus.net/Development/TextStylesHoverEffects/)
|
||||
|
||||
Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".
|
||||
|
||||
Read more here: [License](http://tympanus.net/codrops/licensing/)
|
||||
|
||||
Mouse icon made by [Sebastien Gabriel](http://sebastien-gabriel.com "Sebastien Gabriel") from [www.flaticon.com](http://www.flaticon.com "Flaticon") is licensed under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0/ "Creative Commons BY 3.0")
|
||||
|
||||
Follow us: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/)
|
||||
|
||||
[© Codrops 2015](http://www.codrops.com)
|
||||
|
||||
|
||||
BIN
TextStylesHoverEffects.zip
Normal file
BIN
TextStylesHoverEffects.zip
Normal file
Binary file not shown.
252
css/demo.css
Normal file
252
css/demo.css
Normal file
@ -0,0 +1,252 @@
|
||||
@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700,900|Dosis:800|Playfair+Display:400,400italic,900italic|Lora:700|Syncopate:700|Roboto+Condensed:300italic|Oswald:700);
|
||||
|
||||
@font-face {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: 'codropsicons';
|
||||
src:url('../fonts/codropsicons/codropsicons.eot');
|
||||
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
|
||||
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
|
||||
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
|
||||
}
|
||||
|
||||
*, *:after, *:before { box-sizing: border-box; }
|
||||
.clearfix:before, .clearfix:after {display: table; content: ''; }
|
||||
.clearfix:after { clear: both; }
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
color: #1e1a1b;
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
font-family: 'Raleway', Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
outline: none;
|
||||
color: #dd3e62;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #1e1a1b;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.codrops-header {
|
||||
padding: 2em 1em 4em;
|
||||
text-align: center;
|
||||
height: calc(100vh - 40px);
|
||||
margin: 20px 20px 20px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
background: url(../img/mouse.svg) no-repeat left 50% bottom 40px;
|
||||
}
|
||||
|
||||
.codrops-header::before,
|
||||
.codrops-header::after {
|
||||
content: 'Lorizzleipsizzledolorcrazy amizzlefoshizzleizzleelit Nullizzlesapienvelizzle aliquetvolutpatfoshizzlefo shizzlemynizzlegravidafoshizzle Lorizzleipsizzledolorcrazy amizzlefoshizzleizzleelit Nullizzlesapienvelizzle aliquetvolutpatfoshizzlefo shizzlemynizzlegravidafoshizzle';
|
||||
font-size: 13em;
|
||||
line-height: 0.5;
|
||||
letter-spacing: -15px;
|
||||
z-index: 10;
|
||||
text-align: justify;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
background: #cdced2;
|
||||
color: rgba(255,255,255,0.15);
|
||||
font-family: 'Playfair Display', cursive;
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
z-index: -1;
|
||||
width: 120%;
|
||||
height: 120%;
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
}
|
||||
|
||||
.codrops-header h1 {
|
||||
margin: 0;
|
||||
padding: 0 0 1em;
|
||||
font-weight: 800;
|
||||
font-size: 2.75em;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
color: #49484a;
|
||||
}
|
||||
|
||||
.codrops-header h1 span {
|
||||
font-style: italic;
|
||||
font-family: 'Playfair Display', serif;
|
||||
}
|
||||
|
||||
.codrops-header h1 .sub {
|
||||
display: block;
|
||||
padding: 0.75em 0;
|
||||
color: #F9F9F9;
|
||||
font-weight: 400;
|
||||
font-size: 68%;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/* Top Navigation Style */
|
||||
.codrops-links {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.codrops-links::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
content: '';
|
||||
-webkit-transform: rotate3d(0,0,1,22.5deg);
|
||||
transform: rotate3d(0,0,1,22.5deg);
|
||||
}
|
||||
|
||||
.codrops-icon {
|
||||
display: inline-block;
|
||||
margin: 15px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.codrops-icon span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.codrops-icon:before {
|
||||
margin: 0 5px;
|
||||
text-transform: none;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-family: 'codropsicons';
|
||||
line-height: 1;
|
||||
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.codrops-icon--drop:before {
|
||||
content: "\e001";
|
||||
}
|
||||
|
||||
.codrops-icon--prev:before {
|
||||
content: "\e004";
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
.grid__item {
|
||||
height: calc(100vh - 40px);
|
||||
min-height: 460px;
|
||||
max-width: calc(100vw - 40px);
|
||||
background: #DDD;
|
||||
margin: 20px;
|
||||
padding: 100px 0;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-transform: translate3d(0,0,0); /* Solves Safari bug because of SVG clipping mask */
|
||||
}
|
||||
|
||||
.grid__item p {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
/* Background colors */
|
||||
.color-1 { background: #E8E0DA; }
|
||||
.color-2 { background: #576b67; }
|
||||
.color-3 { background: #383A35; }
|
||||
.color-4 { background: #333; }
|
||||
.color-5 { background: #fda9a9; }
|
||||
.color-7 { background: #cde7d3; }
|
||||
.color-8 { background: #DCECDD; }
|
||||
.color-9 { background: #dedbba; }
|
||||
.color-10 { background: #222; }
|
||||
.color-11 { background: #515151; }
|
||||
|
||||
/* Related demos */
|
||||
.content--related {
|
||||
padding: 3em 0;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.media-item {
|
||||
display: inline-block;
|
||||
padding: 1em;
|
||||
vertical-align: top;
|
||||
-webkit-transition: color 0.3s;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.media-item__img {
|
||||
max-width: 100%;
|
||||
opacity: 0.3;
|
||||
-webkit-transition: opacity 0.3s;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.media-item:hover .media-item__img,
|
||||
.media-item:focus .media-item__img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.media-item__title {
|
||||
margin: 0;
|
||||
padding: 0.5em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 50em) {
|
||||
.codrops-header {
|
||||
padding: 3em 10% 4em;
|
||||
}
|
||||
.grid__item {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40em) {
|
||||
.codrops-header h1 {
|
||||
font-size: 1.85em;
|
||||
}
|
||||
}
|
||||
751
css/linkstyles.css
Executable file
751
css/linkstyles.css
Executable file
@ -0,0 +1,751 @@
|
||||
/* General link styles */
|
||||
.link {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
font-size: 8em;
|
||||
line-height: 1;
|
||||
color: #9e9ba4;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Kukuri */
|
||||
.link--kukuri {
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
overflow: hidden;
|
||||
line-height: 0.75;
|
||||
color: #c5c2b8;
|
||||
}
|
||||
|
||||
.link--kukuri:hover {
|
||||
color: #c5c2b8;
|
||||
}
|
||||
|
||||
.link--kukuri::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
right: 0;
|
||||
background: #F9F9F9;
|
||||
-webkit-transform: translate3d(-100%,0,0);
|
||||
transform: translate3d(-100%,0,0);
|
||||
-webkit-transition: -webkit-transform 0.4s;
|
||||
transition: transform 0.4s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
|
||||
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
|
||||
}
|
||||
|
||||
.link--kukuri:hover::after {
|
||||
-webkit-transform: translate3d(100%,0,0);
|
||||
transform: translate3d(100%,0,0);
|
||||
}
|
||||
|
||||
.link--kukuri::before {
|
||||
content: attr(data-letters);
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
color: #424242;
|
||||
white-space: nowrap;
|
||||
width: 0%;
|
||||
-webkit-transition: width 0.4s 0.3s;
|
||||
transition: width 0.4s 0.3s;
|
||||
}
|
||||
|
||||
.link--kukuri:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Takiri */
|
||||
.link--takiri {
|
||||
font-style: italic;
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-weight: 700;
|
||||
font-size: 7em;
|
||||
padding: 0 10px 20px;
|
||||
-webkit-transition: color 0.5s;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.link--takiri:hover {
|
||||
color: #1e1a1b;
|
||||
}
|
||||
|
||||
.link--takiri::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 36px;
|
||||
width: 120%;
|
||||
top: 50%;
|
||||
margin-top: -18px;
|
||||
left: -10%;
|
||||
z-index: -1;
|
||||
background: #F9F9F9;
|
||||
-webkit-transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
|
||||
transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
|
||||
-webkit-transition: -webkit-transform 0.5s;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.link--takiri:hover::before {
|
||||
-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
|
||||
transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
|
||||
}
|
||||
|
||||
.link--takiri span {
|
||||
font-size: 20%;
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
color: #e53369;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-10px,-10px,0);
|
||||
transform: translate3d(-10px,-10px,0);
|
||||
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
|
||||
transition: transform 0.5s, opacity 0.5s;
|
||||
}
|
||||
|
||||
.link--takiri:hover span {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
/* Surinami */
|
||||
.link--surinami {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
font-size: 9em;
|
||||
color: #3A4945;
|
||||
padding: 0 0 0.125em;
|
||||
}
|
||||
|
||||
.link--surinami::before,
|
||||
.link--surinami::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
z-index: -1;
|
||||
background: #3A4945;
|
||||
position: absolute;
|
||||
-webkit-transform: scale3d(0,1,1);
|
||||
transform: scale3d(0,1,1);
|
||||
-webkit-transition: -webkit-transform 0.5s;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.link--surinami::before {
|
||||
right: 0;
|
||||
top: 0;
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
transform-origin: 100% 50%;
|
||||
}
|
||||
|
||||
.link--surinami::after {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
-webkit-transform-origin: 0 50%;
|
||||
transform-origin: 0 50%;
|
||||
}
|
||||
|
||||
.link--surinami:hover::before,
|
||||
.link--surinami:hover::after {
|
||||
-webkit-transform: scale3d(1,1,1);
|
||||
transform: scale3d(1,1,1);
|
||||
}
|
||||
|
||||
.link--surinami span {
|
||||
position: relative;
|
||||
-webkit-transition: color 0.5s;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.link--surinami:hover span {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.link--surinami span::before,
|
||||
.link--surinami span::after {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
|
||||
transition: transform 0.5s, opacity 0.5s;
|
||||
}
|
||||
|
||||
.link--surinami span::before {
|
||||
content: attr(data-letters-l);
|
||||
left: 0;
|
||||
-webkit-transform: translate3d(-5px,0,0);
|
||||
transform: translate3d(-5px,0,0);
|
||||
}
|
||||
|
||||
.link--surinami span::after {
|
||||
content: attr(data-letters-r);
|
||||
right: 0;
|
||||
-webkit-transform: translate3d(5px,0,0);
|
||||
transform: translate3d(5px,0,0);
|
||||
}
|
||||
|
||||
.link--surinami:hover span::before,
|
||||
.link--surinami:hover span::after {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
/* Nukun */
|
||||
.link--nukun {
|
||||
color: #E3E8DC;
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
padding: 10px 0;
|
||||
-webkit-transition: color 0.3s;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.link--nukun:hover {
|
||||
color: #1e1a1b;
|
||||
}
|
||||
|
||||
.link--nukun::before,
|
||||
.link--nukun::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 30%;
|
||||
height: 5px;
|
||||
background: #E3E8DC;
|
||||
bottom: 0;
|
||||
left: 35%;
|
||||
-webkit-transition: -webkit-transform 0.5s;
|
||||
transition: transform 0.5s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
|
||||
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
|
||||
}
|
||||
|
||||
.link--nukun::after {
|
||||
background: #ACD07A;
|
||||
-webkit-transform: translate3d(-300%,0,0) scale3d(0,1,1);
|
||||
transform: translate3d(-300%,0,0) scale3d(0,1,1);
|
||||
}
|
||||
|
||||
.link--nukun:hover::before {
|
||||
-webkit-transform: translate3d(300%,0,0) scale3d(0,1,1);
|
||||
transform: translate3d(300%,0,0) scale3d(0,1,1);
|
||||
}
|
||||
|
||||
.link--nukun:hover::after {
|
||||
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
|
||||
transform: translate3d(0,0,0) scale3d(1,1,1);
|
||||
}
|
||||
|
||||
.link--nukun span {
|
||||
color: #E3E8DC;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
-webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
|
||||
transform: perspective(1000px) rotate3d(0,1,0,0deg);
|
||||
-webkit-transition: -webkit-transform 0.5s, color 0.5s;
|
||||
transition: transform 0.5s, color 0.5s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
|
||||
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
|
||||
}
|
||||
|
||||
.link--nukun:hover span {
|
||||
color: #fff;
|
||||
-webkit-transform: perspective(1000px) rotate3d(0,1,0,180deg);
|
||||
transform: perspective(1000px) rotate3d(0,1,0,180deg);
|
||||
}
|
||||
|
||||
/* Kumya */
|
||||
.link--kumya {
|
||||
font-family: 'Syncopate', sans-serif;
|
||||
font-size: 6.5em;
|
||||
overflow: hidden;
|
||||
padding: 10px 10px 0;
|
||||
line-height: 1;
|
||||
color: #242424;
|
||||
}
|
||||
|
||||
.link--kumya:hover {
|
||||
color: #242424;
|
||||
}
|
||||
|
||||
.link--kumya::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
background: #242424;
|
||||
-webkit-transform: translate3d(101%,0,0);
|
||||
transform: translate3d(101%,0,0);
|
||||
-webkit-transition: -webkit-transform 0.5s;
|
||||
transition: transform 0.5s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
|
||||
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
|
||||
}
|
||||
|
||||
.link--kumya:hover::after {
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
.link--kumya span {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.link--kumya span::before {
|
||||
content: attr(data-letters);
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 0%;
|
||||
-webkit-transition: width 0.5s;
|
||||
transition: width 0.5s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
|
||||
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
|
||||
}
|
||||
|
||||
.link--kumya:hover span::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Urpi */
|
||||
.link--urpi {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-size: 10em;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: #e78383;
|
||||
-webkit-transition: color 0s 0.5s;
|
||||
transition: color 0s 0.5s;
|
||||
}
|
||||
|
||||
.link--urpi:hover {
|
||||
color: transparent;
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.link--urpi::before,
|
||||
.link--urpi::after {
|
||||
content: attr(data-letters);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #e78383;
|
||||
overflow: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-transition: color 0.5s, -webkit-transform 0.5s;
|
||||
transition: color 0.5s, transform 0.5s;
|
||||
}
|
||||
|
||||
.link--urpi::before {
|
||||
-webkit-clip-path: url(#cp_up);
|
||||
clip-path: url(../index.html#cp_up);
|
||||
}
|
||||
|
||||
.link--urpi::after {
|
||||
-webkit-clip-path: url(#cp_down);
|
||||
clip-path: url(../index.html#cp_down);
|
||||
}
|
||||
|
||||
.link--urpi:hover::before,
|
||||
.link--urpi:hover::after {
|
||||
color: #fff;
|
||||
-webkit-transition: color 0.5s, -webkit-transform 0.5s;
|
||||
transition: color 0.5s, transform 0.5s;
|
||||
}
|
||||
|
||||
.link--urpi:hover::before {
|
||||
-webkit-transform: translate3d(4px,1px,0);
|
||||
transform: translate3d(4px,1px,0);
|
||||
}
|
||||
|
||||
.link--urpi:hover::after {
|
||||
-webkit-transform: translate3d(-4px,-1px,0);
|
||||
transform: translate3d(-4px,-1px,0);
|
||||
}
|
||||
|
||||
/* Mallki */
|
||||
.link--mallki {
|
||||
font-weight: 800;
|
||||
color: #81a689;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
-webkit-transition: color 0.5s 0.25s;
|
||||
transition: color 0.5s 0.25s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.link--mallki:hover {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.link--mallki::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
margin: -3px 0 0 0;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
-webkit-transform: translate3d(-100%,0,0);
|
||||
transform: translate3d(-100%,0,0);
|
||||
-webkit-transition: -webkit-transform 0.4s;
|
||||
transition: transform 0.4s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
|
||||
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
|
||||
}
|
||||
|
||||
.link--mallki:hover::before {
|
||||
-webkit-transform: translate3d(100%,0,0);
|
||||
transform: translate3d(100%,0,0);
|
||||
}
|
||||
|
||||
.link--mallki span {
|
||||
position: absolute;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.link--mallki span::before {
|
||||
content: attr(data-letters);
|
||||
color: red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
-webkit-transition: -webkit-transform 0.5s;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.link--mallki span:nth-child(2) {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.link--mallki span:first-child::before {
|
||||
top: 0;
|
||||
-webkit-transform: translate3d(0,100%,0);
|
||||
transform: translate3d(0,100%,0);
|
||||
}
|
||||
|
||||
.link--mallki span:nth-child(2)::before {
|
||||
bottom: 0;
|
||||
-webkit-transform: translate3d(0,-100%,0);
|
||||
transform: translate3d(0,-100%,0);
|
||||
}
|
||||
|
||||
.link--mallki:hover span::before {
|
||||
-webkit-transition-delay: 0.3s;
|
||||
transition-delay: 0.3s;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
|
||||
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
|
||||
}
|
||||
|
||||
/* Manko */
|
||||
.link--manko {
|
||||
color: #B1C0B2;
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
padding: 0.65em 0 0.8em;
|
||||
-webkit-transition: color 0.5s;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.link--manko:hover {
|
||||
color: #1e1a1b;
|
||||
}
|
||||
|
||||
.link--manko::before,
|
||||
.link--manko::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-width: 4px 0;
|
||||
border-style: solid;
|
||||
border-color: #fff;
|
||||
pointer-events: none;
|
||||
-webkit-transform: scale3d(0,1,1);
|
||||
transform: scale3d(0,1,1);
|
||||
-webkit-transition: -webkit-transform 0.4s;
|
||||
transition: transform 0.4s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
|
||||
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
|
||||
}
|
||||
|
||||
.link--manko::before {
|
||||
width: 50%;
|
||||
left: 25%;
|
||||
height: 80%;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.link--manko::after {
|
||||
width: 30%;
|
||||
left: 35%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.link--manko:hover::before,
|
||||
.link--manko:hover::after {
|
||||
-webkit-transform: scale3d(1,1,1);
|
||||
transform: scale3d(1,1,1);
|
||||
}
|
||||
|
||||
.link--manko span {
|
||||
color: #60AB64;
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
font-size: 0.2em;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
|
||||
transition: opacity 0.5s, transform 0.5s;
|
||||
}
|
||||
|
||||
.link--manko span:first-of-type {
|
||||
bottom: 100%;
|
||||
margin-bottom: 15px;
|
||||
-webkit-transform: scale3d(0.8,0.8,1) translate3d(0,10px,0);
|
||||
transform: scale3d(0.8,0.8,1) translate3d(0,10px,0);
|
||||
}
|
||||
|
||||
.link--manko span:last-of-type {
|
||||
top: 100%;
|
||||
margin-top: 10px;
|
||||
-webkit-transform: scale3d(0.8,0.8,1) translate3d(0,-10px,0);
|
||||
transform: scale3d(0.8,0.8,1) translate3d(0,-10px,0);
|
||||
}
|
||||
|
||||
.link--manko:hover span {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
.link--manko:hover span:first-of-type {
|
||||
-webkit-transition-delay: 0.15s;
|
||||
transition-delay: 0.15s;
|
||||
}
|
||||
|
||||
.link--manko:hover span:last-of-type {
|
||||
-webkit-transition-delay: 0.20s;
|
||||
transition-delay: 0.20s;
|
||||
}
|
||||
|
||||
/* Ilin */
|
||||
.link--ilin {
|
||||
font-weight: 900;
|
||||
text-transform: uppercase;
|
||||
line-height: 0.8;
|
||||
overflow: hidden;
|
||||
color: #adaa88;
|
||||
}
|
||||
|
||||
.link--ilin span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
-webkit-transition: color 0.5s;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.link--ilin:hover span:first-of-type {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.link--ilin:hover span:last-of-type {
|
||||
color: #1e1a1b;
|
||||
}
|
||||
|
||||
.link--ilin span::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
line-height: 0.8;
|
||||
-webkit-transition: -webkit-transform 0.5s;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.link--ilin span:last-of-type::before {
|
||||
background: #1e1a1b;
|
||||
}
|
||||
|
||||
.link--ilin:hover span:last-of-type::before,
|
||||
.link--ilin span:first-of-type::before {
|
||||
-webkit-transform: translate3d(0,-150%,0);
|
||||
transform: translate3d(0,-150%,0);
|
||||
}
|
||||
|
||||
.link--ilin:hover span:first-of-type::before,
|
||||
.link--ilin span:last-of-type::before {
|
||||
-webkit-transform: translate3d(0,150%,0);
|
||||
transform: translate3d(0,150%,0);
|
||||
}
|
||||
|
||||
/* Asiri */
|
||||
.link--asiri {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.link--asiri .text-fill {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.link--asiri canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.link--asiri .svg-inverted-mask {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-shadow: inset 0 0 0 2px #222; /* FF rendering issue */
|
||||
}
|
||||
|
||||
.link--asiri .shape--fill {
|
||||
fill: #222;
|
||||
}
|
||||
|
||||
.link--asiri .text--transparent {
|
||||
fill: #95D384;
|
||||
-webkit-transition: fill 0.2s;
|
||||
transition: fill 0.2s;
|
||||
}
|
||||
|
||||
.link--asiri:hover .text--transparent {
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
.svg--asiri .mask__shape {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.text--asiri {
|
||||
font-size: 150px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
stroke: #fff;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
/* Yaku */
|
||||
.link--yaku {
|
||||
color: #D3D3D3;
|
||||
font-family: 'Playfair Display';
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
font-size: 10em;
|
||||
overflow: hidden;
|
||||
padding: 0 0 10px;
|
||||
}
|
||||
|
||||
.link--yaku::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-width: 2px 0;
|
||||
border-color: #282828;
|
||||
border-style: solid;
|
||||
left: 0;
|
||||
-webkit-transform: translate3d(-101%,0,0);
|
||||
transform: translate3d(-101%,0,0);
|
||||
-webkit-transition: -webkit-transform 0.5s;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.link--yaku:hover::before {
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
.link--yaku span {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
-webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
|
||||
transform: perspective(1000px) rotate3d(0,1,0,0deg);
|
||||
-webkit-transition: -webkit-transform 0.5s, color 0.5s;
|
||||
transition: transform 0.5s, color 0.5s;
|
||||
}
|
||||
|
||||
.link--yaku:hover span {
|
||||
color: #1e1a1b;
|
||||
-webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg);
|
||||
transform: perspective(1000px) rotate3d(0,1,0,360deg);
|
||||
}
|
||||
|
||||
.link--yaku span:nth-child(4),
|
||||
.link--yaku:hover span:first-child {
|
||||
-webkit-transition-delay: 0s;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.link--yaku span:nth-child(3),
|
||||
.link--yaku:hover span:nth-child(2) {
|
||||
-webkit-transition-delay: 0.1s;
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
|
||||
.link--yaku span:nth-child(2),
|
||||
.link--yaku:hover span:nth-child(3) {
|
||||
-webkit-transition-delay: 0.2s;
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
.link--yaku span:first-child,
|
||||
.link--yaku:hover span:nth-child(4) {
|
||||
-webkit-transition-delay: 0.3s;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
@media screen and (max-width: 50em) {
|
||||
.link--surinami { font-size: 3em; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 42em) {
|
||||
.link--takiri { font-size: 3.5em; }
|
||||
.link--kukuri { font-size: 3.5em; }
|
||||
.link--nukun { font-size: 3.5em; }
|
||||
.link--kumya { font-size: 3em; }
|
||||
.link--manko { font-size: 3.5em; }
|
||||
.link--urpi { font-size: 5em; }
|
||||
.link--mallki { font-size: 3.5em; }
|
||||
.link--ilin { font-size: 5em; }
|
||||
.link--asiri { -webkit-transform: scale3d(0.65,0.65,1); transform: scale3d(0.65,0.65,1); }
|
||||
.link--yaku { font-size: 4em; }
|
||||
}
|
||||
1
css/normalize.css
vendored
Normal file
1
css/normalize.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
fonts/codropsicons/codropsicons.eot
Normal file
BIN
fonts/codropsicons/codropsicons.eot
Normal file
Binary file not shown.
24
fonts/codropsicons/codropsicons.svg
Normal file
24
fonts/codropsicons/codropsicons.svg
Normal file
@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>
|
||||
This is a custom SVG font generated by IcoMoon.
|
||||
<iconset grid="14"></iconset>
|
||||
</metadata>
|
||||
<defs>
|
||||
<font id="codropsicons" horiz-adv-x="448" >
|
||||
<font-face units-per-em="448" ascent="384" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="448" />
|
||||
<glyph unicode="" d="M 221.657,359.485 ,m0.00,0.00,c 0.00,0.00 -132.984-182.838 -132.205-286.236 0.515-68.522 61.089-123.688 135.314-123.218 74.202,0.479 133.943,56.421 133.428,124.943 C 357.414,178.368 221.657,359.485 221.657,359.485 z" />
|
||||
<glyph unicode="" d="M 384.00,160.00l0.00-32.00 q0.00-13.25 -8.125-22.625t-21.125-9.375l-176.00,0.00 l 73.25-73.50q 9.50-9.00 9.50-22.50t-9.50-22.50l-18.75-19.00q-9.25-9.25 -22.50-9.25q-13.00,0.00 -22.75,9.25l-162.75,163.00q-9.25,9.25 -9.25,22.50q0.00,13.00 9.25,22.75l 162.75,162.50q 9.50,9.50 22.75,9.50q 13.00,0.00 22.50-9.50l 18.75-18.50q 9.50-9.50 9.50-22.75t-9.50-22.75l-73.25-73.25l 176.00,0.00 q 13.00,0.00 21.125-9.375 t 8.125-22.625z" horiz-adv-x="384" />
|
||||
<glyph unicode="" d="M 407.273-23.273c0.00,0.00-325.818,0.00-366.545,0.00s-40.727,40.727-40.727,40.727l0.00,142.545 l 101.818,183.273l 244.364,0.00 l 101.818-183.273c0.00,0.00,0.00-101.818,0.00-142.545S 407.273-23.273, 407.273-23.273z M 325.818,302.545L 122.182,302.545
|
||||
l-71.273-142.545L 142.545,160.00 c0.00,0.00, 40.727,0.00, 40.727-40.727l0.00-20.364 l 81.455,0.00 l0.00,20.364 c0.00,0.00,0.00,40.727, 40.727,40.727l 91.636,0.00 L 325.818,302.545z M 407.273,119.273l-96.911,0.00 C 307.532,113.917, 305.455,107.503, 305.455,98.909c0.00-40.727-40.727-40.727-40.727-40.727L 183.273,58.182 c0.00,0.00-40.727,0.00-40.727,40.727
|
||||
c0.00,8.593-2.077,15.008-4.908,20.364L 40.727,119.273 l0.00-101.818 l 366.545,0.00 L 407.273,119.273 z M 132.364,221.091l 183.273,0.00 L 325.818,200.727L 122.182,200.727 L 132.364,221.091z M 152.727,261.818l 142.545,0.00 L 305.455,241.455L 142.545,241.455 L 152.727,261.818z" />
|
||||
<glyph unicode="" d="M 368.00,144.00q0.00-13.50 -9.25-22.75l-162.75-162.75q-9.75-9.25 -22.75-9.25q-12.75,0.00 -22.50,9.25l-18.75,18.75q-9.50,9.50 -9.50,22.75t 9.50,22.75l 73.25,73.25l-176.00,0.00 q-13.00,0.00 -21.125,9.375t-8.125,22.625l0.00,32.00 q0.00,13.25 8.125,22.625t 21.125,9.375l 176.00,0.00 l-73.25,73.50q-9.50,9.00 -9.50,22.50t 9.50,22.50l 18.75,18.75q 9.50,9.50 22.50,9.50q 13.25,0.00 22.75-9.50l 162.75-162.75q 9.25-8.75 9.25-22.50z" horiz-adv-x="384" />
|
||||
<glyph unicode="" d="M 224.00-64.00C 100.291-64.00,0.00,36.291,0.00,160.00S 100.291,384.00, 224.00,384.00s 224.00-100.291, 224.00-224.00S 347.709-64.00, 224.00-64.00z
|
||||
M 224.00,343.273c-101.228,0.00-183.273-82.045-183.273-183.273s 82.045-183.273, 183.273-183.273s 183.273,82.045, 183.273,183.273S 325.228,343.273, 224.00,343.273z M 244.364,122.164C 244.364,111.005, 244.364,98.909, 244.364,98.909l-40.727,0.00 c0.00,0.00,0.00,29.466,0.00,40.727
|
||||
s 9.123,20.364, 20.364,20.364l0.00,0.00c 22.481,0.00, 40.727,18.246, 40.727,40.727s-18.246,40.727-40.727,40.727S 183.273,223.209, 183.273,200.727c0.00-7.453, 2.138-14.356, 5.641-20.364L 145.437,180.364 C 143.727,186.90, 142.545,193.661, 142.545,200.727
|
||||
c0.00,44.983, 36.471,81.455, 81.455,81.455s 81.455-36.471, 81.455-81.455C 305.455,162.831, 279.45,131.247, 244.364,122.164z M 244.364,37.818l-40.727,0.00 l0.00,40.727 l 40.727,0.00 L 244.364,37.818 z" />
|
||||
<glyph unicode=" " horiz-adv-x="224" />
|
||||
<glyph class="hidden" unicode="" d="M0,384L 448 -64L0 -64 z" horiz-adv-x="0" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
BIN
fonts/codropsicons/codropsicons.ttf
Normal file
BIN
fonts/codropsicons/codropsicons.ttf
Normal file
Binary file not shown.
BIN
fonts/codropsicons/codropsicons.woff
Normal file
BIN
fonts/codropsicons/codropsicons.woff
Normal file
Binary file not shown.
6
fonts/codropsicons/license.txt
Normal file
6
fonts/codropsicons/license.txt
Normal file
@ -0,0 +1,6 @@
|
||||
Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/
|
||||
License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
|
||||
|
||||
|
||||
Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico
|
||||
License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/
|
||||
11
img/mouse.svg
Normal file
11
img/mouse.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="80px" height="80px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||
<g id="mouse">
|
||||
<path fill="#fff" d="M32,16c-4.971,0-9,4.029-9,9v14c0,4.971,4.029,9,9,9c4.971,0,9-4.029,9-9V25C41,20.029,36.971,16,32,16z M39,39
|
||||
c0,3.866-3.134,7-7,7s-7-3.134-7-7V25c0-3.866,3.134-7,7-7s7,3.134,7,7V39z M32,21c-0.552,0-1,0.448-1,1v5c0,0.553,0.448,1,1,1
|
||||
c0.553,0,1-0.447,1-1v-5C33,21.448,32.553,21,32,21z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 836 B |
BIN
img/related/CaptionHoverEffect.png
Normal file
BIN
img/related/CaptionHoverEffect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
img/related/CreativeLinkEffects.png
Normal file
BIN
img/related/CreativeLinkEffects.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
235
index.html
Executable file
235
index.html
Executable file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Inspiration for Text Styles and Hover Effects</title>
|
||||
<meta name="description" content="A set of modern text styles and hover effects for your inspiration" />
|
||||
<meta name="keywords" content="text style, link style, link hover, effect, animation, inspiration, web design" />
|
||||
<meta name="author" content="Codrops" />
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/linkstyles.css" />
|
||||
<!--[if IE]>
|
||||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<style> /* Firefox seems to have issues loading the clip path from inside the CSS */
|
||||
.link--urpi::before {
|
||||
-webkit-clip-path: url(#cp_up);
|
||||
clip-path: url(#cp_up);
|
||||
}
|
||||
|
||||
.link--urpi::after {
|
||||
-webkit-clip-path: url(#cp_down);
|
||||
clip-path: url(#cp_down);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- clipping mask for style "Urpi" -->
|
||||
<svg class="hidden" viewBox="0 0 310 160">
|
||||
<defs>
|
||||
<clippath id="cp_up">
|
||||
<polygon id="cp_poly_up" points="0,0 310,0 310,160" />
|
||||
</clippath>
|
||||
<clippath id="cp_down">
|
||||
<polygon id="cp_poly_down" points="0,0 0,160 310,160" />
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
<!-- SVG for effect "Asiri" -->
|
||||
<!-- Inverted masking technique by Yoksel http://tympanus.net/codrops/2015/02/16/create-animated-text-fills/ -->
|
||||
<svg class="hidden svg--asiri" viewBox="0 0 400 200">
|
||||
<!-- Symbol with text -->
|
||||
<symbol id="s-text">
|
||||
<text text-anchor="middle" x="50%" y="50%" dy="0.35em" textLength="280" class="text--asiri">Asiri</text>
|
||||
</symbol>
|
||||
<!-- Mask with text -->
|
||||
<mask id="m-text" maskunits="userSpaceOnUse" maskcontentunits="userSpaceOnUse">
|
||||
<rect width="100%" height="100%" class="mask__shape">
|
||||
</rect>
|
||||
<use xlink:href="#s-text" class="mask__text"></use>
|
||||
</mask>
|
||||
</svg>
|
||||
<div class="container">
|
||||
<header class="codrops-header">
|
||||
<div class="codrops-links">
|
||||
<a class="codrops-icon codrops-icon--prev" href="http://tympanus.net/Development/PhotographyWebsiteConcept/" title="Previous Demo"><span>Previous Demo</span></a>
|
||||
<a class="codrops-icon codrops-icon--drop" href="http://tympanus.net/codrops/?p=24024" title="Back to the article"><span>Back to the Codrops article</span></a>
|
||||
</div>
|
||||
<h1><span class="sub">Inspiration for</span> Text Styles <span class="amp">&</span> Hover Effects</h1>
|
||||
</header>
|
||||
<div class="grid">
|
||||
<div class="grid__item color-1">
|
||||
<a class="link link--kukuri" href="#" data-letters="Kukuri">Kukuri</a>
|
||||
</div>
|
||||
<div class="grid__item">
|
||||
<a class="link link--takiri" href="#">Takiri <span>Where do you want to be?</span></a>
|
||||
</div>
|
||||
<div class="grid__item color-2">
|
||||
<a class="link link--surinami" href="#"><span data-letters-l="Suri" data-letters-r="nami">Surinami</span></a>
|
||||
</div>
|
||||
<div class="grid__item color-3">
|
||||
<a class="link link--nukun" href="#">Nu<span>k</span>un</a>
|
||||
</div>
|
||||
<div class="grid__item color-4">
|
||||
<a class="link link--kumya" href="#"><span data-letters="Kumya">Kumya</span></a>
|
||||
</div>
|
||||
<div class="grid__item color-8">
|
||||
<a class="link link--manko" href="#">Manko <span>one step</span> <span>at a time</span></a>
|
||||
</div>
|
||||
<div class="grid__item color-11">
|
||||
<a class="link link--yaku" href="#">
|
||||
<span>Y</span><span>a</span><span>k</span><span>u</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="grid__item color-7">
|
||||
<a class="link link--mallki" href="#">Mallki<span data-letters="Mallki"></span><span data-letters="Mallki"></span></a>
|
||||
</div>
|
||||
<div class="grid__item color-9">
|
||||
<a class="link link--ilin" href="#"><span>Il</span><span>in</span></a>
|
||||
</div>
|
||||
<div class="grid__item">
|
||||
<p>The next effects only work in Firefox and Chrome.</p>
|
||||
</div>
|
||||
<div class="grid__item color-5">
|
||||
<a class="link link--urpi" href="#" data-letters="Urpi">Urpi</a>
|
||||
</div>
|
||||
<div class="grid__item color-10">
|
||||
<a class="link link--asiri" href="#">
|
||||
<!-- Content for text -->
|
||||
<div class="text-fill">
|
||||
<canvas id="canv"></canvas>
|
||||
</div>
|
||||
<!-- SVG to cover text fill -->
|
||||
<svg viewBox="0 0 400 200" class="svg-inverted-mask">
|
||||
<!-- Big shape with hole in form of text -->
|
||||
<rect width="100%" height="100%" mask="url(#m-text)" class="shape--fill" />
|
||||
<!-- Transparent copy of text to keep
|
||||
patterned text selectable -->
|
||||
<use xlink:href="#s-text" class="text--transparent"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Related demos -->
|
||||
<section class="content content--related">
|
||||
<p>If you enjoyed this demo you might also like:</p>
|
||||
<a class="media-item" href="http://tympanus.net/Development/CreativeLinkEffects/">
|
||||
<img class="media-item__img" src="img/related/CreativeLinkEffects.png">
|
||||
<h3 class="media-item__title">Creative Link Effects</h3>
|
||||
</a>
|
||||
<a class="media-item" href="http://tympanus.net/Tutorials/CaptionHoverEffects/">
|
||||
<img class="media-item__img" src="img/related/CaptionHoverEffect.png">
|
||||
<h3 class="media-item__title">Caption Hover Effects</h3>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
<!-- /container -->
|
||||
<!-- Jolt by Tiffany Rayside: http://codepen.io/tmrDevelops/pen/dPjYYP/ -->
|
||||
<script>
|
||||
window.requestAnimFrame = (function(callback) {
|
||||
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
|
||||
function(callback) {
|
||||
window.setTimeout(callback, 1000 / 60);
|
||||
};
|
||||
})();
|
||||
|
||||
var requestId, jolttime;
|
||||
|
||||
var c = document.getElementById('canv');
|
||||
var $ = c.getContext('2d');
|
||||
|
||||
var s = 18; //grid square size
|
||||
var mv = 10; //moving areas
|
||||
var sp = 1; //move speed
|
||||
var clm = 23; //columns
|
||||
var rw = 10; //rows
|
||||
var x = []; //x array
|
||||
var y = []; //y array
|
||||
var X = []; //starting X array
|
||||
var Y = []; //starting Y array
|
||||
|
||||
c.width = c.offsetWidth;
|
||||
c.height = c.offsetHeight;
|
||||
|
||||
for (var i = 0; i < clm * rw; i++) {
|
||||
x[i] = ((i % clm) - 0.5) * s;
|
||||
y[i] = (Math.floor(i / clm) - 0.5) * s;
|
||||
X[i] = x[i];
|
||||
Y[i] = y[i];
|
||||
}
|
||||
var t = 0;
|
||||
|
||||
function jolt() {
|
||||
$.fillRect(0, 0, c.width, c.height);
|
||||
|
||||
for (var i = 0; i < clm * rw; i++) {
|
||||
if (i % clm != clm - 1 && i < clm * (rw - 1) - 1) {
|
||||
$.fillStyle = "hsla(0,0,0,1)";
|
||||
$.strokeStyle = "#95D384";
|
||||
$.lineWidth = 1;
|
||||
$.beginPath();
|
||||
$.moveTo(x[i], y[i]);
|
||||
$.lineTo(x[i + 1], y[i + 1]);
|
||||
$.lineTo(x[i + clm + 1], y[i + clm + 1]);
|
||||
$.lineTo(x[i + clm], y[i + clm]);
|
||||
$.closePath();
|
||||
$.stroke();
|
||||
$.fill();
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < rw * clm; i++) {
|
||||
if ((x[i] < X[i] + mv) && (x[i] > X[i] - mv) && (y[i] < Y[i] + mv) && (y[i] > Y[i] - mv)) {
|
||||
x[i] = x[i] + Math.floor(Math.random() * (sp * 2 + 1)) - sp;
|
||||
y[i] = y[i] + Math.floor(Math.random() * (sp * 2 + 1)) - sp;
|
||||
} else if (x[i] >= X[i] + mv) {
|
||||
x[i] = x[i] - sp;
|
||||
} else if (x[i] <= X[i] - mv) {
|
||||
x[i] = x[i] + sp;
|
||||
} else if (y[i] >= Y[i] + mv) {
|
||||
y[i] = y[i] - sp;
|
||||
} else if (y[i] <= Y[i] + mv) {
|
||||
y[i] = y[i] + sp;
|
||||
}
|
||||
}
|
||||
//controls time of electric shake> when counter equals 0, it will reset for 5s then start again.
|
||||
if (t % c.width == 0) {
|
||||
jolttime = setTimeout('jolt()', 5);
|
||||
t++;
|
||||
} else {
|
||||
jolttime = setTimeout('jolt()', 5);
|
||||
t++;
|
||||
}
|
||||
}
|
||||
|
||||
function start() {
|
||||
if (!requestId) {
|
||||
requestId = window.requestAnimFrame(jolt);
|
||||
}
|
||||
}
|
||||
|
||||
function stop() {
|
||||
if (requestId) {
|
||||
clearTimeout(jolttime);
|
||||
window.cancelAnimationFrame(requestId);
|
||||
requestId = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector('a.link--asiri').addEventListener('mouseenter', start);
|
||||
document.querySelector('a.link--asiri').addEventListener('mouseleave', stop);
|
||||
</script>
|
||||
<script>
|
||||
// For Demo purposes only (show hover effect on mobile devices)
|
||||
[].slice.call( document.querySelectorAll('.grid a') ).forEach( function(el) {
|
||||
el.onclick = function() { return false; }
|
||||
} );
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user