This file contains 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
http://codepen.io/MadeByMike/pen/bEEGvv |
This file contains 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
.truncate { | |
width: 250px; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} |
This file contains 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
.typewriter h1 { | |
overflow: hidden; /* Ensures the content is not revealed until the animation */ | |
border-right: .15em solid orange; /* The typwriter cursor */ | |
white-space: nowrap; /* Keeps the content on a single line */ | |
margin: 0 auto; /* Gives that scrolling effect as the typing happens */ | |
letter-spacing: .15em; /* Adjust as needed */ | |
animation: | |
typing 3.5s steps(40, end), | |
blink-caret .75s step-end infinite; | |
} |
This file contains 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
blockquote { | |
background: #f9f9f9; | |
border-left: 10px solid #ccc; | |
margin: 1.5em 10px; | |
padding: 0.5em 10px; | |
quotes: "\201C""\201D""\2018""\2019"; | |
} | |
blockquote:before { | |
color: #ccc; | |
content: open-quote; |
This file contains 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
a:active { | |
outline: none; | |
} |
This file contains 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
.filtered { | |
background: yellow; | |
position: relative; | |
} | |
.filtered img { | |
-webkit-filter: grayscale(100%); | |
filter: grayscale(100%); | |
opacity: 0.5; | |
} |
This file contains 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
.filtered { | |
-webkit-filter: grayscale(100%); | |
filter: grayscale(100%); | |
} |
This file contains 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
.layered-paper { | |
background: #eee; | |
box-shadow: | |
0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */ | |
0 10px 0 -5px #eee, /* The second layer */ | |
0 10px 1px -4px rgba(0,0,0,0.15), /* The second layer shadow */ | |
0 20px 0 -10px #eee, /* The third layer */ | |
0 20px 1px -9px rgba(0,0,0,0.15); /* The third layer shadow */ | |
} |
This file contains 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
.dont-break-out { | |
/* These are technically the same, but use both */ | |
overflow-wrap: break-word; | |
word-wrap: break-word; | |
-ms-word-break: break-all; | |
/* This is the dangerous one in WebKit, as it breaks things wherever */ | |
word-break: break-all; | |
/* Instead use this non-standard one: */ |
This file contains 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
a { | |
position: relative; | |
padding-bottom: 2px; | |
text-decoration: none; | |
} | |
a:hover::after { | |
content: ""; | |
position: absolute; | |
bottom: 2px; |
NewerOlder