commit cb8993c1a4c90d13b816829615b5a47b3f67ffd0 Author: Manoela Ilic Date: Wed May 13 12:01:28 2015 +0100 initial commit diff --git a/README.md b/README.md new file mode 100755 index 0000000..f85fd7b --- /dev/null +++ b/README.md @@ -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) + + diff --git a/TextStylesHoverEffects.zip b/TextStylesHoverEffects.zip new file mode 100644 index 0000000..6d22efe Binary files /dev/null and b/TextStylesHoverEffects.zip differ diff --git a/css/demo.css b/css/demo.css new file mode 100644 index 0000000..da92d65 --- /dev/null +++ b/css/demo.css @@ -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; + } +} diff --git a/css/linkstyles.css b/css/linkstyles.css new file mode 100755 index 0000000..5bfcf8f --- /dev/null +++ b/css/linkstyles.css @@ -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; } +} \ No newline at end of file diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..77feb20 --- /dev/null +++ b/css/normalize.css @@ -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;} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..cf335fb Binary files /dev/null and b/favicon.ico differ diff --git a/fonts/codropsicons/codropsicons.eot b/fonts/codropsicons/codropsicons.eot new file mode 100644 index 0000000..f46c7f4 Binary files /dev/null and b/fonts/codropsicons/codropsicons.eot differ diff --git a/fonts/codropsicons/codropsicons.svg b/fonts/codropsicons/codropsicons.svg new file mode 100644 index 0000000..d202d21 --- /dev/null +++ b/fonts/codropsicons/codropsicons.svg @@ -0,0 +1,24 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/codropsicons/codropsicons.ttf b/fonts/codropsicons/codropsicons.ttf new file mode 100644 index 0000000..72bed1f Binary files /dev/null and b/fonts/codropsicons/codropsicons.ttf differ diff --git a/fonts/codropsicons/codropsicons.woff b/fonts/codropsicons/codropsicons.woff new file mode 100644 index 0000000..1003218 Binary files /dev/null and b/fonts/codropsicons/codropsicons.woff differ diff --git a/fonts/codropsicons/license.txt b/fonts/codropsicons/license.txt new file mode 100644 index 0000000..88a5cbc --- /dev/null +++ b/fonts/codropsicons/license.txt @@ -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/ \ No newline at end of file diff --git a/img/mouse.svg b/img/mouse.svg new file mode 100644 index 0000000..7ed09dd --- /dev/null +++ b/img/mouse.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/img/related/CaptionHoverEffect.png b/img/related/CaptionHoverEffect.png new file mode 100644 index 0000000..f23e85f Binary files /dev/null and b/img/related/CaptionHoverEffect.png differ diff --git a/img/related/CreativeLinkEffects.png b/img/related/CreativeLinkEffects.png new file mode 100644 index 0000000..e6ae0f6 Binary files /dev/null and b/img/related/CreativeLinkEffects.png differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..c09af53 --- /dev/null +++ b/index.html @@ -0,0 +1,235 @@ + + + + + + + + Inspiration for Text Styles and Hover Effects + + + + + + + + + + + + + + + + + +
+
+
+ Previous Demo + Back to the Codrops article +
+

Inspiration for Text Styles & Hover Effects

+
+
+
+ Kukuri +
+
+ Takiri Where do you want to be? +
+
+ Surinami +
+
+ Nukun +
+
+ Kumya +
+
+ Manko one step at a time +
+
+ + Yaku + +
+
+ Mallki +
+
+ Ilin +
+
+

The next effects only work in Firefox and Chrome.

+
+
+ Urpi +
+
+ + +
+ +
+ + + + + + + + +
+
+ +
+

If you enjoyed this demo you might also like:

+ + +

Creative Link Effects

+ + + +

Caption Hover Effects

+ +
+
+ + + + + + +