-
-
Save ShawnRong/310c2f6105568eb39555177674ee2e52 to your computer and use it in GitHub Desktop.
CSS timeline// source http://jsbin.com/tukujofexo
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| @import url("https://fonts.googleapis.com/css?family=Oswald|Roboto:400,700"); | |
| body { | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-family: "Oswald", sans-serif; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| margin-bottom: 0.5em; | |
| } | |
| p { | |
| font-family: "Roboto", sans-serif; | |
| font-size: 0.8rem; | |
| } | |
| .container { | |
| max-width: 1024px; | |
| width: 90%; | |
| margin: 0 auto; | |
| } | |
| .timeline-item { | |
| padding: 3em 2em 2em; | |
| position: relative; | |
| color: rgba(0, 0, 0, 0.7); | |
| border-left: 2px solid rgba(0, 0, 0, 0.3); | |
| } | |
| .timeline-item p { | |
| font-size: 1rem; | |
| } | |
| .timeline-item::before { | |
| content: attr(date-is); | |
| position: absolute; | |
| left: 2em; | |
| font-weight: bold; | |
| top: 1em; | |
| display: block; | |
| font-family: "Roboto", sans-serif; | |
| font-weight: 700; | |
| font-size: 0.785rem; | |
| } | |
| .timeline-item::after { | |
| width: 10px; | |
| height: 10px; | |
| display: block; | |
| top: 1em; | |
| position: absolute; | |
| left: -7px; | |
| border-radius: 10px; | |
| content: ""; | |
| border: 2px solid rgba(0, 0, 0, 0.3); | |
| background: white; | |
| } | |
| .timeline-item:last-child { | |
| -o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%; | |
| border-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%; | |
| border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="timeline-item" date-is='20-07-1990'> | |
| <h1>Hello, 'Im a single div responsive timeline without mediaQueries!</h1> | |
| <p> | |
| I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far... While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card. | |
| </p> | |
| </div> | |
| <div class="timeline-item" date-is='20-07-1990'> | |
| <h1>Oeehhh, that's awesome.. Me too!</h1> | |
| <p> | |
| I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far... While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card. | |
| </p> | |
| </div> | |
| <div class="timeline-item" date-is='20-07-1990'> | |
| <h1>I'm ::last-child so my border fades ^__^</h1> | |
| <p> | |
| I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. I write the best placeholder text, and I'm the biggest developer on the web by far... While that's mock-ups and this is politics, are they really so different? I think the only card she has is the Lorem card. | |
| </p> | |
| </div> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">@import url("https://fonts.googleapis.com/css?family=Oswald|Roboto:400,700"); | |
| body { | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-family: "Oswald", sans-serif; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| margin-bottom: 0.5em; | |
| } | |
| p { | |
| font-family: "Roboto", sans-serif; | |
| font-size: 0.8rem; | |
| } | |
| .container { | |
| max-width: 1024px; | |
| width: 90%; | |
| margin: 0 auto; | |
| } | |
| .timeline-item { | |
| padding: 3em 2em 2em; | |
| position: relative; | |
| color: rgba(0, 0, 0, 0.7); | |
| border-left: 2px solid rgba(0, 0, 0, 0.3); | |
| } | |
| .timeline-item p { | |
| font-size: 1rem; | |
| } | |
| .timeline-item::before { | |
| content: attr(date-is); | |
| position: absolute; | |
| left: 2em; | |
| font-weight: bold; | |
| top: 1em; | |
| display: block; | |
| font-family: "Roboto", sans-serif; | |
| font-weight: 700; | |
| font-size: 0.785rem; | |
| } | |
| .timeline-item::after { | |
| width: 10px; | |
| height: 10px; | |
| display: block; | |
| top: 1em; | |
| position: absolute; | |
| left: -7px; | |
| border-radius: 10px; | |
| content: ""; | |
| border: 2px solid rgba(0, 0, 0, 0.3); | |
| background: white; | |
| } | |
| .timeline-item:last-child { | |
| -o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%; | |
| border-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%; | |
| border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%; | |
| } | |
| </script> | |
| </body> | |
| </html> |
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
| @import url("https://fonts.googleapis.com/css?family=Oswald|Roboto:400,700"); | |
| body { | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-family: "Oswald", sans-serif; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| margin-bottom: 0.5em; | |
| } | |
| p { | |
| font-family: "Roboto", sans-serif; | |
| font-size: 0.8rem; | |
| } | |
| .container { | |
| max-width: 1024px; | |
| width: 90%; | |
| margin: 0 auto; | |
| } | |
| .timeline-item { | |
| padding: 3em 2em 2em; | |
| position: relative; | |
| color: rgba(0, 0, 0, 0.7); | |
| border-left: 2px solid rgba(0, 0, 0, 0.3); | |
| } | |
| .timeline-item p { | |
| font-size: 1rem; | |
| } | |
| .timeline-item::before { | |
| content: attr(date-is); | |
| position: absolute; | |
| left: 2em; | |
| font-weight: bold; | |
| top: 1em; | |
| display: block; | |
| font-family: "Roboto", sans-serif; | |
| font-weight: 700; | |
| font-size: 0.785rem; | |
| } | |
| .timeline-item::after { | |
| width: 10px; | |
| height: 10px; | |
| display: block; | |
| top: 1em; | |
| position: absolute; | |
| left: -7px; | |
| border-radius: 10px; | |
| content: ""; | |
| border: 2px solid rgba(0, 0, 0, 0.3); | |
| background: white; | |
| } | |
| .timeline-item:last-child { | |
| -o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%; | |
| border-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%; | |
| border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, transparent) 1 100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment