Благодарим за выбор нашего сервиса!
Тестовое сообщение
Страница: 1
Сообщений 1 страница 4 из 4
Поделиться22018-07-06 15:26:18
Код:
<div class="spiritbox"> <div class="spirit_pic"><img src="https://i.imgur.com/7THunWU.gif"></div> <div class="spirit_title">вещий дух <div class="spirit_subtitle">собирает дизайны из говна и палок</div></div> <div class="spirit_txt"><div> Cras velit mauris, consequat ullamcorper luctus ut, vehicula quis enim. Fusce vehicula nunc sit amet ligula venenatis sodales. Vivamus ac arcu dui. Cras turpis justo, ullamcorper non tellus vel, facilisis venenatis velit. Aliquam elementum risus ultrices nisi gravida efficitur. Aenean pulvinar tellus convallis varius tincidunt. Cras molestie diam at dui vehicula viverra. Fusce id sapien neque. Suspendisse egestas varius arcu, quis lobortis augue. Ut ultricies semper lacus. Quisque sed commodo augue. Vestibulum leo risus, viverra vitae magna id, volutpat scelerisque felis. Proin aliquam elit et ipsum posuere malesuada. </div> </div> </div> <style> @import url('https://fonts.googleapis.com/css?family=Oswald:400,700|Play:400,700&subset=cyrillic'); .spiritbox {width: 245px; height: 130px; overflow: hidden; position: relative; display: block; margin: auto} .spirit_pic {width: 245px; height: 130px; transition: all 0.7s ease-in-out 0s} .spirit_pic img { max-height: 130px;} .spirit_title {width: 200px; position: absolute; text-align: center; margin-top:-90px; font-family: oswald; font-size: 16px; font-weight: 700; margin-left: 23px; color: #999; text-shadow: 1px 1px 1px #000; text-transform: lowercase; transition: all 0.7s ease-in-out 0s; background: radial-gradient(ellipse at center, rgba(0,0,0,.8) 30%, rgba(255,255,255,0) 70%); height: 55px} .spirit_subtitle {box-shadow: 0 -2px 0 0 #999; text-align: center; font-family: play; font-size: 8px; font-weight: 200; color: #dfdfdf; text-shadow: 1px 1px 1px #000; text-transform: uppercase; transition: all 0.3s ease-in-out 0s; padding-top: 2px; margin-top: 5px} .spirit_txt {width: 210px; height: 90px; text-align: justify; font-family: tahoma; font-size: 10px; margin-top: 0px; position: absolute; background-color: rgba(255,255,255,0.8); line-height: 11px; margin-left: 18px; opacity: 0; transition: all 0.7s ease-in-out 0s;} .spirit_txt div { overflow-y: auto; padding-right: 3px; margin: 7px 7px; height: 74px } .spirit_txt div::-webkit-scrollbar { width: 6px; height:6px; background-color: transparent;} .spirit_txt div::-webkit-scrollbar-thumb { background-color:#333; width:6px !important; box-shadow: 0 0 0 1px rgba(255, 255, 255,0.1) inset; } .spiritbox:hover .spirit_pic {filter: grayscale(100%) blur(2px); transform: scale(1.2)} .spiritbox:hover .spirit_title {margin-top: -170px} .spiritbox:hover .spirit_txt {margin-top: -110px; opacity: 1}</style>
Поделиться32018-08-25 17:50:16
Код:
<!--HTML--> <style> .podpis { width: 629px; height:200px;position: relative; margin: 0; padding: 0;} .el1 { width: 315px; position: absolute; left: 0; text-align: right; padding: 10px; z-index:1;} .el1 img {box-shadow: 2px 2px 0 #bab4da;display:inline-block} .el1 div:nth-of-type(1) { font-family: 'Cute Font'; text-transform:lowercase; letter-spacing: 2px; font-size: 13px} .el1 div:nth-of-type(2) { background: #bab4da; transform: skew(30deg); display: inline-block; box-shadow: 2px 2px 0 black; } .el1 span:nth-of-type(1) { background: #bab4da; transform: skew(-45deg); display: inline-block; padding: 0 5px; font-family:'Abril Fatface'; font-size: 12px; } .el1 div:nth-of-type(3) { padding-right:28px; font-family: 'oswald'; text-transform: uppercase; font-size: 10px; letter-spacing:1px; } .el2 { margin-top:20px; width:314px; position: absolute; right: 0; padding:10px } .el2 div { position:absolute; width: 225px; height: 130px; opacity: 0; margin: 10px; transition: ease-out 1s;} .el2:hover div { opacity:1; z-index: 999999999} .el2 div span:nth-of-type(1){ display:inline-block; color: #bab4da; text-shadow: 1px 1px 0 black; font-family: 'oswald'; text-transform: uppercase; letter-spacing: 2px; margin-top: 40px; margin-left:30px } .el2 div span:nth-of-type(2){ display:inline-block; font-family: 'Cute Font'; text-shadow: 1px 1px 0 #bab4da; text-transform:lowercase; letter-spacing: 2px; font-size: 13px; margin-left:30px } .el2 img { transition: ease-out 1s;} .el2:hover img { filter: blur(2px) grayscale(80%); } </style> <div class="podpis"> <div class="el1"> <div>i h e a r t h e b i r d s </div> <img src="http://s3.uploads.ru/t/wZ4AS.gif"> <img src="http://s5.uploads.ru/t/Mob2B.gif" height="100"> <div><span>Cause my dreams don't comfort me</span></div> <div>o n t h e s u m m e r b r e e z e</div> </div> <div class="el2"> <div> <span> Comatose</span> <span>I'll never wake up without an overdose of you</span> </div> <img src="http://sg.uploads.ru/t/OW4JK.gif"> </div> </div><iframe src="about:blank" name="iframe_test_height" style="z-index:-1;position:absolute;top:0;left:0;width:100%;height:100%;border:0"></iframe></body></html>
Поделиться42018-08-25 17:50:52
Код:
<!--HTML--> <style> .podpis { width: 629px; height:200px;position: relative; margin: 0; padding: 0;} .el1 { width: 315px; position: absolute; left: 0; text-align: right; padding: 10px; z-index:1;} .el1 img {box-shadow: 2px 2px 0 #bab4da;display:inline-block} .el1 div:nth-of-type(1) { font-family: 'Cute Font'; text-transform:lowercase; letter-spacing: 2px; font-size: 13px} .el1 div:nth-of-type(2) { background: #bab4da; transform: skew(30deg); display: inline-block; box-shadow: 2px 2px 0 black; } .el1 span:nth-of-type(1) { background: #bab4da; transform: skew(-45deg); display: inline-block; padding: 0 5px; font-family:'Abril Fatface'; font-size: 12px; } .el1 div:nth-of-type(3) { padding-right:28px; font-family: 'oswald'; text-transform: uppercase; font-size: 10px; letter-spacing:1px; } .el2 { margin-top:20px; width:314px; position: absolute; right: 0; padding:10px } .el2 div { position:absolute; width: 225px; height: 130px; opacity: 0; margin: 10px; transition: ease-out 1s;} .el2:hover div { opacity:1; z-index: 999999999} .el2 div span:nth-of-type(1){ display:inline-block; color: #bab4da; text-shadow: 1px 1px 0 black; font-family: 'oswald'; text-transform: uppercase; letter-spacing: 2px; margin-top: 40px; margin-left:30px } .el2 div span:nth-of-type(2){ display:inline-block; font-family: 'Cute Font'; text-shadow: 1px 1px 0 #bab4da; text-transform:lowercase; letter-spacing: 2px; font-size: 13px; margin-left:30px } .el2 img { transition: ease-out 1s;} .el2:hover img { filter: blur(2px) grayscale(80%); } </style> <div class="podpis"> [font=Abril Fatface][size=16]i h e a r t h e b i r d s o n t h e s u m m e r b r e e z e,[/size][/font] <div class="el2"> <div> <span>☾ Comatose</span> <span>I'll never wake up without an overdose of you</span> </div> <img src="http://sg.uploads.ru/t/OW4JK.gif"> </div> </div><iframe src="about:blank" name="iframe_test_height" style="z-index:-1;position:absolute;top:0;left:0;width:100%;height:100%;border:0"></iframe></body></html>
Страница: 1