Búsquedas [HTML]
allonsy :: HTML & CSS :: Tablillas
Página 1 de 1. • Comparte
Admin
Name
McName
McName
age • group • sexuality • year
about
about here friends
friends here enemies
enemies here! paramour
paramour here Name
McName
McName
age • group • sexuality • year
about
about here friends
friends here enemies
enemies here paramour
paramour here Name
McName
McName
age • group • sexuality • year
about
about here friends
friends here enemies
enemies here paramour
paramour here - Código:
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,700i|Poppins:400" rel="stylesheet">
<div class="sfoscontainer"><div class="sfostabs"><div class="sfostab"><input type="radio" id="sfostab-1" name="sfostab-group-1" checked><label for="sfostab-1">i.</label><div class="sfoscontent"> <div class="sfosin" style="background:url(https://placehold.it/250x400)"></div> <div class="sfosin2"> <input type="checkbox" id="toggle"><label for="toggle" title="click for more"><div class="sfosicon"><img src="https://placehold.it/100"></div></label> <div class="sfosname"> Name<br>McName </div> <div class="sfossub"> age • group • sexuality • year </div><div class="sfosplot"><label for="toggle" style="position:absolute;top:-5px;line-height:100%;left:5px;text-transform:lowercase;font-size:10px;padding:5px;border-radius:100%;border:1px solid #ddd;">x</label><div class="sfosplotin"><div class="sfosplotsub">about</div> about here <div class="sfosplotsub">friends</div> friends here <div class="sfosplotsub">enemies</div> enemies here! <div class="sfosplotsub">paramour</div> paramour here </div> </div> </div></div></div><div class="sfostab"><input type="radio" id="sfostab-2" name="sfostab-group-1" ><label for="sfostab-2">ii.</label><div class="sfoscontent"> <div class="sfosin" style="background:url(https://placehold.it/250x400)"></div> <div class="sfosin2"> <input type="checkbox" id="toggle2"> <label for="toggle2" title="click for more"> <div class="sfosicon"> <img src="https://placehold.it/100"> </div> </label> <div class="sfosname"> Name<br>McName </div> <div class="sfossub"> age • group • sexuality • year </div> <div class="sfosplot"> <label for="toggle2" style="position:absolute;top:-5px;line-height:100%;left:5px;text-transform:lowercase;font-size:10px;padding:5px;border-radius:100%;border:1px solid #ddd;">x</label> <div class="sfosplotin"> <div class="sfosplotsub">about</div> about here <div class="sfosplotsub">friends</div> friends here <div class="sfosplotsub">enemies</div>enemies here <div class="sfosplotsub">paramour</div> paramour here </div></div> </div></div></div><div class="sfostab"><input type="radio" id="sfostab-3" name="sfostab-group-1" ><label for="sfostab-3">iii.</label><div class="sfoscontent"> <div class="sfosin" style="background:url(https://placehold.it/250x400)"></div> <div class="sfosin2"> <input type="checkbox" id="toggle3"> <label for="toggle3" title="click for more"> <div class="sfosicon"> <img src="https://placehold.it/100"> </div> </label><div class="sfosname"> Name<br>McName </div> <div class="sfossub"> age • group • sexuality • year </div> <div class="sfosplot"> <label for="toggle3" style="position:absolute;top:-5px;line-height:100%;left:5px;text-transform:lowercase;font-size:10px;padding:5px;border-radius:100%;border:1px solid #ddd;">x</label> <div class="sfosplotin"> <div class="sfosplotsub">about</div> about here <div class="sfosplotsub">friends</div> friends here <div class="sfosplotsub">enemies</div>enemies here <div class="sfosplotsub">paramour</div> paramour here </div></div> </div></div></div></div></div><div style="text-align:center;font-family:Poppins;font-size:8px;text-transform:uppercase;color:#aaa;letter-spacing:1px;"><a href="http://shine.jcink.net/index.php?showuser=23444">JARONART</a></div>
<style type="text/css">
.sfoscontainer {margin: 10px auto; height: auto;width: auto;}.sfostabs {margin: 0px auto; position: relative;width: 301px; height: 401px; padding:10px;background:#f6f6f6;border:1px solid #ddd;border-radius:17px;overflow:hidden;box-shadow:0px 0px 10px #bbb;}.sfostab {
display:block;/* CHANGE TO DISPLAY:BLOCK FOR VERTICAL TABS */}/* position your tab labels in here - also use margins to space your labels - you kind of have to eye until it's centered bc the math with tabs gets confusing */.sfostab label {display: block; /* this lets you fix the label dimensions */width: 10px;height: 10px;padding:5px;font-family:Playfair Display;font-weight:700;text-transform:lowercase;color:#aaa;font-style:italic;font-size:9px;text-align:center;
background: #fff;margin-top:10px;position: relative;left: 265px;top: 5px;z-index: 3;cursor:crosshair;}.sfostab input[type=radio]:checked ~ label {background: white;z-index: 2;border-bottom:1px solid #ddd;}.sfostab input[type=radio] {display: none; /* DON'T EDIT */}/* if you want tab transitions they go here */.sfoscontent {position: absolute;top: 10px;bottom: 0px;left: 10px;right: 0px;background: #fff;width:300px;height:400px;border-radius:10px; transition:all 1s ease-in-out; opacity:0;}/* if you want tab transitions they also go here */.sfostab input[type=radio]:checked ~ label ~ .sfoscontent {z-index: 1;opacity:1;transition:all 1s ease-in-out;}.sfosin {width:250px; height:400px; position:absolute; border-radius:10px 0px 0px 10px; overflow:hidden; transition:all 1s ease-in-out;filter:grayscale(70%);}.sfoscontent:hover .sfosin { filter:grayscale(40%);}.sfosin2 { width:250px; height:400px; position:absolute;border-radius:10px 0px 0px 10px; overflow:hidden; background:rgba(0,0,0,0.1); transition:all 1s ease-in-out;}.sfosin2:hover {background:rgba(0,0,0,0.3);}.sfosin2 label {transition:all 1s ease-in-out; position:absolute;top:75px; left:90px;}.sfosicon { width:80px; height:80px; border-radius:100%; padding:10px; background:#fff; border:1px solid #ddd; text-align:center;overflow:hidden; cursor:crosshair; position:absolute; left:-15px; top:-15px;transition:all 1s ease-in-out; box-shadow:0px 3px 5px #666;}.sfosicon img {width:80px; height:80px; border-radius:100%;}.sfosname { width:200px; position:absolute; top:185px; left:25px; font-family:Playfair Display; font-weight:700; font-style:italic; text-align:center; text-shadow:0px 3px 5px #333; color:#fff; line-height:100%; font-size:25px; transition:all 1s ease-in-out;}.sfossub { width:200px;position:absolute; top:250px; left:25px; font-family:Poppins; color:#fff; text-transform:uppercase; font-size:8px; text-align:center; line-height:100%; transition:all 1s ease-in-out; text-shadow:0px 3px 5px #333;}.sfosplot {width:220px;height:370px;position:absolute;top:15px; left:315px;border-radius:10px;transition:all 1s ease-in-out;opacity:0;}.sfosin2 input[type=checkbox] {display: none;}.sfosin2 input[type=checkbox]:checked ~ .sfosname {left:325px;opacity:0;}.sfosin2 input[type=checkbox]:checked ~ .sfossub {left:325px;opacity:0;}.sfosin2 input[type=checkbox]:checked ~ label {left:385px;opacity:0;}.sfosin2 input[type=checkbox]:checked ~ .sfosplot {left:15px;opacity:1;transition:all 1s ease-in-out 0.5s;}.sfosplot {width:220px;height:370px;position:absolute;top:15px; left:315px;border-radius:10px;transition:all 1s ease-in-out;background:rgba(900,900,900,0.95);}.sfosplotin {position:absolute;top:30px; left:27px;width:170px;height:315px;padding-right:8px;font-family:Poppins;font-weight:400;text-align:justify;color:#666;overflow-y:auto;overflow-x:hidden;font-size:9px;line-height:12px;}.sfosplotin b {font-family:Playfair Display;font-weight:700;}.sfosplotin i {font-family:Playfair Display;font-weight:400;font-style:italic;}.sfosplotin::-webkit-scrollbar {width:5px;border-radius:10px;}.sfosplotin::-webkit-scrollbar-thumb {border-radius:10px;border:2px solid #fff;background:#ccc;}.sfosplotin::-webkit-scrollbar-track {background:#fff;border-radius:10px;}.sfosplotsub {padding:10px;margin-bottom:10px;border-bottom:1px solid #ddd;font-family:Playfair Display;font-weight:700;font-style:italic;color:#888;font-size:12px;text-align:center;line-height:100%;}
</style>
allonsy :: HTML & CSS :: Tablillas
Página 1 de 1.
Permisos
No puedes responder a temas en este foro.
|
|