937written posts
offlinecurrently
All birds and men are sure to die but songs may live forever
No. 9: Trilogy - When I think of trilogies, I think of book series, which led to bookshelves. Technically it's a quartet now, but the proportions worked better. Featuring four Makimas in the absence of other filler images.
[nospaces] [attr="class","gim-bookshelf"] [attr="class","gim-bookshelf_inner"] [attr="class","gim-bookend"] [attr="class","gim-bookend_text"] [attr="class","gim-book_h1"]
Hello, [break]Gimmick here.
[attr="class","gim-book_h2"]
I like to write about pork belly, turkey shoulder beef drumstick ullamco ham fatback. Ut sed officia, laboris labore pork belly hamburger chuck beef minim.
[attr="class","gim-hatch gim-thin"] [attr="class","gim-hatch gim-thick"] [attr="class","gim-books"] [attr="class","gim-book charFour"] [attr="class","gim-book_spine"] [attr="class","spine_image"] [attr="class","spine_color"] [attr="class","spine_overlay"] [attr="class","spine_text"]IV [attr="class","spine_decor"] [attr="class","gim-hatch gim-thin"] [attr="class","gim-hatch gim-thick"] [attr="class","gim-book_page"] [attr="class","gim-page_content"] [attr="class","gim-book_h3"]Azure Spicy jalapeno incididunt excepteur consectetur laboris beef andouille tempor biltong aliquip sed fugiat irure swine est. Pastrami cillum sunt irure laboris, sint esse sausage. Cow officia ut ullamco shoulder. Mollit qui non biltong beef ribs ut corned beef. Duis sausage porchetta do dolore commodo sint, excepteur filet mignon. Minim aliqua in kielbasa, chislic non short ribs venison rump turkey eiusmod chuck. Cupidatat pork belly ham hock pastrami mollit chislic enim bacon. [break][break] Hook One / Chicken dolore capicola, pastrami ground round sirloin nulla in picanha corned beef fugiat fatback. Voluptate t-bone jerky nostrud, alcatra capicola sunt ham hock non cillum tri-tip pork belly. Short loin ex in cupidatat turkey reprehenderit. Pariatur corned beef duis, ball tip kielbasa sausage sint adipisicing jerky. [attr="class","gim-book charThree"] [attr="class","gim-book_spine"] [attr="class","spine_image"] [attr="class","spine_color"] [attr="class","spine_overlay"] [attr="class","spine_text"]III [attr="class","spine_decor"] [attr="class","gim-hatch gim-thin"] [attr="class","gim-hatch gim-thick"] [attr="class","gim-book_page"] [attr="class","gim-page_content"] [attr="class","gim-book_h3"]Cloverleaf Spicy jalapeno incididunt excepteur consectetur laboris beef andouille tempor biltong aliquip sed fugiat irure swine est. Pastrami cillum sunt irure laboris, sint esse sausage. Cow officia ut ullamco shoulder. Mollit qui non biltong beef ribs ut corned beef. Duis sausage porchetta do dolore commodo sint, excepteur filet mignon. Minim aliqua in kielbasa, chislic non short ribs venison rump turkey eiusmod chuck. Cupidatat pork belly ham hock pastrami mollit chislic enim bacon. [break][break] Hook One / Chicken dolore capicola, pastrami ground round sirloin nulla in picanha corned beef fugiat fatback. Voluptate t-bone jerky nostrud, alcatra capicola sunt ham hock non cillum tri-tip pork belly. Short loin ex in cupidatat turkey reprehenderit. Pariatur corned beef duis, ball tip kielbasa sausage sint adipisicing jerky. [attr="class","gim-book charTwo"] [attr="class","gim-book_spine"] [attr="class","spine_image"] [attr="class","spine_color"] [attr="class","spine_overlay"] [attr="class","spine_text"]II [attr="class","spine_decor"] [attr="class","gim-hatch gim-thin"] [attr="class","gim-hatch gim-thick"] [attr="class","gim-book_page"] [attr="class","gim-page_content"] [attr="class","gim-book_h3"]Goldenrod Spicy jalapeno incididunt excepteur consectetur laboris beef andouille tempor biltong aliquip sed fugiat irure swine est. Pastrami cillum sunt irure laboris, sint esse sausage. Cow officia ut ullamco shoulder. Mollit qui non biltong beef ribs ut corned beef. Duis sausage porchetta do dolore commodo sint, excepteur filet mignon. Minim aliqua in kielbasa, chislic non short ribs venison rump turkey eiusmod chuck. Cupidatat pork belly ham hock pastrami mollit chislic enim bacon. [break][break] Hook One / Chicken dolore capicola, pastrami ground round sirloin nulla in picanha corned beef fugiat fatback. Voluptate t-bone jerky nostrud, alcatra capicola sunt ham hock non cillum tri-tip pork belly. Short loin ex in cupidatat turkey reprehenderit. Pariatur corned beef duis, ball tip kielbasa sausage sint adipisicing jerky. [attr="class","gim-book charOne"] [attr="class","gim-book_spine"] [attr="class","spine_image"] [attr="class","spine_color"] [attr="class","spine_overlay"] [attr="class","spine_text"]I [attr="class","spine_decor"] [attr="class","gim-hatch gim-thin"] [attr="class","gim-hatch gim-thick"] [attr="class","gim-book_page"] [attr="class","gim-page_content"] [attr="class","gim-book_h3"]Carmine Spicy jalapeno excepteur consectetur laboris beef andouille tempor biltong aliquip sed fugiat irure swine est. Pastrami cillum sunt irure laboris, sint esse sausage. Cow officia ut ullamco shoulder. Mollit qui non biltong beef ribs ut corned beef. Duis sausage porchetta do dolore commodo sint, excepteur filet mignon. Minim aliqua in kielbasa, chislic non short ribs venison rump turkey eiusmod chuck. Cupidatat pork belly ham hock pastrami mollit chislic enim bacon. [break][break] Hook One / Chicken dolore capicola, pastrami ground round sirloin nulla in picanha corned beef fugiat fatback. Voluptate t-bone jerky nostrud, alcatra capicola sunt ham hock non cillum tri-tip pork belly. Short loin ex in cupidatat turkey reprehenderit. Pariatur corned beef duis, ball tip kielbasa sausage sint adipisicing jerky. [break][break] Hook Two / Adipiscing nunc duis a nisl. Leo proin vitae sagittis in. Mattis volutpat viverra nulla amet amet, felis. Neque, elit gravida mauris ac praesent in amet. Vestibulum scelerisque lacus aliquam volutpat non massa nulla purus. Tellus turpis lorem amet nec, non. Congue aliquet nunc in viverra. Habitant at felis placerat sed facilisis velit amet nec amet. Sed sollicitudin enim nec pellentesque. Posuere volutpat eu lacinia quam. Aliquam mauris volutpat nisl at id scelerisque varius in ullamcorper.
[googlefont=Crimson Text:400,700][googlefont=Varta:400,700]
[newclass=.charOne]--charAccent: #A52A2A[/newclass]
[newclass=.charTwo]--charAccent: #927A01[/newclass]
[newclass=.charThree]--charAccent: #23A735[/newclass]
[newclass=.charFour]--charAccent: #567EAE [/newclass]
[newclass=.gim-bookshelf]width: max-content; margin: 30px auto; --clearstripe: transparent; --fontserif: 'Crimson Text'; --fontsans: 'Varta'; } .gim-book, .gim-book div { transition: transform .5s ease, opacity .5s 0s ease; } .gim-page_content { transition: opacity 1s .25s ease; } .gim-bookshelf a.gimcredits { display: block; text-align: right; margin-top: 4px; font: 700 7px/10px sans-serif; letter-spacing: .8px; text-decoration: none; text-transform: uppercase; margin-right: 6px; } .gim-bookshelf_inner { background: radial-gradient(ellipse farthest-corner at 75% 100%, rgba(0, 0, 0, .1) 0%, #f9f9f9 100%), #f9f9f9; width: 600px; border-radius: 6px; position: relative; transform: translateZ(0); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .25); padding: 6px; } .gim-books { display: flex; flex-direction: row-reverse; justify-content: flex-end; width: 600px; overflow-x: hidden; border-radius: 6px; } .gim-bookend { display: block; width: 312px; height: calc(100% - 12px); position: absolute; --colorstripe: gray; } .gim-bookend_text { height: 417px; margin: 12px 0 0 12px; color: black; } .gim-book_h1 { font: 400 42px/42px var(--fontserif), serif; opacity: .5; letter-spacing: -1px; margin-bottom: 9px; width: 250px; } .gim-book_h2 { font: 400 13px/18px var(--fontsans), sans-serif; opacity: .5; width: 260px; } .gim-bookend .gim-hatch { opacity: .5; margin-left: -6px; } .gim-book { display: grid; grid-template-columns: 75px 300px; grid-template-areas: 'spine page'; --colorstripe: var(--charAccent); box-sizing: border-box; } .gim-book_spine { grid-area: spine; position: relative; display: flex; justify-content: center; border: 1px solid white; border-radius: 6px 0 0 6px; overflow: hidden; transform: translateZ(0); -webkit-transform: translateZ(0); } .spine_image { filter: saturate(1.25) contrast(.5) brightness(1.3); -webkit-filter: saturate(1.25) contrast(.5) brightness(1.3); position: absolute; width: 100%; height: 100%; top: 0; } .spine_color { background: var(--charAccent); position: absolute; width: 100%; height: 100%; top: 0; mix-blend-mode: color; opacity: .5; } .spine_overlay { background: linear-gradient(to top, rgba(255, 255, 255, 0.2) 0%, #FFFFFF 100%), rgba(220, 220, 220, .65); mix-blend-mode: luminosity; opacity: 0.9; position: absolute; width: 100%; height: 100%; top: 0; z-index: 0; } .spine_text { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background: transparent; margin-top: 21px; color: var(--charAccent); font: 400 21px/1em var(--fontserif), serif; margin-right: 3px; height: 43px; width: 100%; z-index: 100; } .spine_text:after { content: ''; display: block; width: 81px; margin-right: -2px; height: 10px; background-image: linear-gradient(to bottom left, var(--colorstripe) 12.50%, var(--clearstripe) 12.50%, var(--clearstripe) 50%, var(--colorstripe) 50%, var(--colorstripe) 62.50%, var(--clearstripe) 62.50%, var(--clearstripe) 100%); background-size: 6px 6px; height: 1px; } .spine_decor { position: absolute; z-index: 100; width: 100%; bottom: 15px; } .gim-hatch { background-image: linear-gradient(to bottom left, var(--colorstripe) 12.50%, var(--clearstripe) 12.50%, var(--clearstripe) 50%, var(--colorstripe) 50%, var(--colorstripe) 62.50%, var(--clearstripe) 62.50%, var(--clearstripe) 100%); background-size: 6px 6px; } .gim-thin { height: 15px; margin-bottom: 10px; } .gim-thick { height: 20px; } .gim-book_page { grid-area: page; background: #f9f9f9; padding: 21px 9px 16px 0; position: relative; overflow-x: hidden; width: 305px; } .gim-book_page:before { content: ''; position: absolute; width: 100%; top: 0; left: 0; height: 100%; z-index: 1; opacity: .05; background: linear-gradient(to right, white 0%, var(--charAccent) 100%); } .gim-page_content { position: relative; z-index: 100; padding: 0 18px 3px 18px; height: calc(500px - 50px); overflow: auto; font: 400 13px/17px var(--fontsans), sans-serif; color: #555 } .gim-books b { color: var(--charAccent); } .gim-books a { color: var(--charAccent); text-decoration-style: dotted; font: inherit } .gim-books br+br { content: ' '; display: block; margin: 8px 0; } .gim-book_h3 { color: var(--charAccent); font: 400 21px/1em var(--fontserif), serif; margin: 0 0 15px; font-style: normal; } /* ACCORDION POSITIONING */ .gim-books .charOne { transform: translate(309px); -webkit-transform: translate(309px); z-index: 10; } .gim-books .charTwo { transform: translate(6px); -webkit-transform: translate(6px); z-index: 20; } .gim-books .charThree { transform: translate(-297px); -webkit-transform: translate(-297px); z-index: 30 } .gim-books .charFour { transform: translate(-600px); -webkit-transform: translate(-600px); z-index: 40; } /* SLIDE OVER */ .gim-books .charOne:hover, .gim-books .charTwo:hover~.charOne, .gim-books .charThree:hover~.charOne, .gim-books .charFour:hover~.charOne { transform: translate(0); -webkit-transform: translate(0); margin-left: 0; } .gim-books .charTwo:hover, .gim-books .charThree:hover~.charTwo, .gim-books .charFour:hover~.charTwo { transform: translate(-303px); -webkit-transform: translate(-303px); } .gim-books .charThree:hover, .gim-books .charFour:hover~.charThree { transform: translate(-606px); -webkit-transform: translate(-606px); } .gim-books .charFour:hover { transform: translate(-909px); -webkit-transform: translate(-909px); } /* FADE-IN */ .gim-book:hover .spine_overlay { opacity: .75; } .gim-book:hover~.gim-books .charOne .spine_overlay { opacity: .9; } .gim-book .gim-page_content, .gim-book:hover~.gim-books .charOne .gim-page_content { opacity: 0; } .gim-book:hover .gim-page_content { opacity: 1; } .gim-bookshelf ::-webkit-scrollbar { -webkit-appearance: none; width: 4px !important; border: 0 !important; background: rgba(0,0,0,0); } .gim-bookshelf ::-webkit-scrollbar-thumb { background: #dedede; border: 0; } .gim-bookshelf ::-webkit-scrollbar-track { background: background: rgba(0,0,0,0); border: 0; [/newclass]
|
last edit on Apr 25, 2021 18:13:18 GMT by gimmick |
