не забудь убрать звездочки
Код:
<!--HTML--> <link href='http://fonts.googleapis.com/css?family=Cousine:400,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet' type='text/css'> <style> .yourthrone { width: 400px; padding: 5px;background-image: url(http://media.tumblr.com/56d56e55fb8c0adce9a58d0a0d61b803/tumblr_inline_mkjq62Wxje1qz4rgp.png ); border: 1px solid #5bbfd4; } #yourthrone { width: 400px; height: 350px; overflow: hidden; position: relative; } #yourthrone .thronecont:before { content: ''; width: 0; height: 0; border-bottom: 120px solid #fff; border-right: 750px solid transparent; margin-top: -120px; display: block; position: relative; bottom: 10px; right: 20px; z-index: 1; -webkit-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; o-transition: 0.5s all ease-in-out; } #yourthrone .thronecont { position: relative; bottom: -340px; width: 360px; height: 330px; padding: 20px; background: #fff; transition: 0.5s all ease-in-out; -webkit-transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; o-transition: 0.5s all ease-in-out; } #yourthrone:hover .thronecont { position: relative; bottom: 20px; -webkit-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; o-transition: 0.5s all ease-in-out; } .thronetitle { position: relative; top: -65px; z-index: 2; padding: 5px;font-family: fugaz one; font-size: 30px; color: #fff; text-shadow: 1px 1px 0px #111; color: #5bbfd4; text-align: left; text-transform: lowercase; letter-spacing: -2px; line-height: 10px; } .thronetag { width: 300px; padding: 10px; border-bottom: 1px dotted #c5d9dc; font-family: cousine; font-size: 10px; color: #111; text-align: right; letter-spacing: 1px; line-height: 10px; } .thronetxt { position: relative; top: 15px; width: 300px; height: 230px; padding: 10px; overflow: auto; font-family: cousine; font-size: 10px; color: #111; text-align: justify; letter-spacing: 1px; line-height: 12px; } .thronetxt b { color: #6e7f90; } .thronetxt::-webkit-scrollbar { background: #fff; width: 5px; } .thronetxt::-webkit-scrollbar-thumb { background: #8ea4b2; width: 5px; } .thronetxt::-webkit-scrollbar-corner { background: #fff; } </style> <center><div class="yourthrone"> <div style="width: 400px; height: 350px; background-image: url(http://placehold.it/400x350);"><div id="yourthrone"> <div class="thronecont"> <div class="thronetitle">ищу друга/подругу</div> <div class="thronetag">имя фамилия, возраст, ориентация </div> <div class="thronetxt"> история персонажа<p> </div> </div> </div> </div> </div> <div style="width: 405px; text-align: right; font-family: arial; font-size: 7px; text-transform: uppercase; letter-spacing: 1px;"></div></center>
забрать код
Код:[*code]<*!--HTML--> <link href='http://fonts.googleapis.com/css?family=Cousine:400,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet' type='text/css'> <style> .yourthrone { width: 400px; padding: 5px;background-image: url(http://media.tumblr.com/56d56e55fb8c0adce9a58d0a0d61b803/tumblr_inline_mkjq62Wxje1qz4rgp.png ); border: 1px solid #5bbfd4; } #yourthrone { width: 400px; height: 350px; overflow: hidden; position: relative; } #yourthrone .thronecont:before { content: ''; width: 0; height: 0; border-bottom: 120px solid #fff; border-right: 750px solid transparent; margin-top: -120px; display: block; position: relative; bottom: 10px; right: 20px; z-index: 1; -webkit-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; o-transition: 0.5s all ease-in-out; } #yourthrone .thronecont { position: relative; bottom: -340px; width: 360px; height: 330px; padding: 20px; background: #fff; transition: 0.5s all ease-in-out; -webkit-transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; o-transition: 0.5s all ease-in-out; } #yourthrone:hover .thronecont { position: relative; bottom: 20px; -webkit-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; o-transition: 0.5s all ease-in-out; } .thronetitle { position: relative; top: -65px; z-index: 2; padding: 5px;font-family: fugaz one; font-size: 30px; color: #fff; text-shadow: 1px 1px 0px #111; color: #5bbfd4; text-align: left; text-transform: lowercase; letter-spacing: -2px; line-height: 10px; } .thronetag { width: 300px; padding: 10px; border-bottom: 1px dotted #c5d9dc; font-family: cousine; font-size: 10px; color: #111; text-align: right; letter-spacing: 1px; line-height: 10px; } .thronetxt { position: relative; top: 15px; width: 300px; height: 230px; padding: 10px; overflow: auto; font-family: cousine; font-size: 10px; color: #111; text-align: justify; letter-spacing: 1px; line-height: 12px; } .thronetxt b { color: #6e7f90; } .thronetxt::-webkit-scrollbar { background: #fff; width: 5px; } .thronetxt::-webkit-scrollbar-thumb { background: #8ea4b2; width: 5px; } .thronetxt::-webkit-scrollbar-corner { background: #fff; } </style> <center><div class="yourthrone"> <div style="width: 400px; height: 350px; background-image: url(http://placehold.it/400x350);"><div id="yourthrone"> <div class="thronecont"> <div class="thronetitle">ищу друга/подругу</div> <div class="thronetag">имя фамилия, возраст, ориентация </div> <div class="thronetxt"> история персонажа<p> </div> </div> </div> </div> </div> <div style="width: 405px; text-align: right; font-family: arial; font-size: 7px; text-transform: uppercase; letter-spacing: 1px;"></div></center>[*/code]