Tumblr Login/Signup CSS Toggle

Developer
Billy Crist
Size
2,901 Kb
Views
22,264
  1. Tumblr Login/Signup CSS Toggle Previews
  2. Tumblr Login/Signup CSS Toggle HTML Codes
  3. Tumblr Login/Signup CSS Toggle CSS Codes

How do I make an tumblr login/signup css toggle?

A slight redesign of Tumblr's login/signup page. Make sure to press the 'Sign up' link to see the CSS toggle in action.. What is a tumblr login/signup css toggle? How do you make a tumblr login/signup css toggle? This script and codes were developed by Billy Crist on 07 September 2022, Wednesday.

Tumblr Login/Signup CSS Toggle Previews
IQ Test

Tumblr Login/Signup CSS Toggle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tumblr Login/Signup CSS Toggle</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="radio" checked id="toggle--login" name="toggle" class="ghost" /> <input type="radio" id="toggle--signup" name="toggle" class="ghost" /> <img class="logo framed" src="https://www.tumblr.com/images/logo/logo_large.png?v=7ea0eb57dd627a95f82be5bde0c43d59" alt="Tumblr logo" /> <form class="form form--login framed"> <input type="email" placeholder="Email" class="input input--top" /> <input type="password" placeholder="Password" class="input" /> <input type="submit" value="Log in" class="input input--submit" /> <label for="toggle--signup" class="text text--small text--centered">New? <b>Sign up</b></label> </form> <form class="form form--signup framed"> <h2 class="text text--centered text--omega">Join the other <b>152.6 million</b> blogs and</br>share all that you love.</h2> <input type="email" placeholder="Email" class="input input--top" /> <input type="password" placeholder="Password" class="input" /> <input type="text" placeholder="Username" class="input" /> <input type="submit" value="Sign up" class="input input--submit" /> <label for="toggle--login" class="text text--small text--centered">Not new? <b>Log in</b></label> </form> <div class="legal"> <a class="text text--small text--border-right" href="javascript:;">Terms</a> <a class="text text--small text--border-right" href="javascript:;">Privacy</a> <a class="text text--small" href="javascript:;">Password help</a> </div> <div class="photo-cred"> <a class="text text--small" title="Check out their blog." href="http://cabinporn.com/post/125371354365/the-cabin-book-book-in-the-wild-21-in-the-us" target="_blank">Photo posted by <b>cabinporn</b></a> </div> <div class="fullscreen-bg"></div>
</body>
</html>

Tumblr Login/Signup CSS Toggle - Script Codes CSS Codes

html, body { width: 100%; height: 100%; margin: 0; font-family: Helvetica, Arial, sans-serif; overflow: hidden;
}
.ghost { position: absolute; left: -100%;
}
.framed { position: absolute; top: 50%; left: 50%; width: 15rem; margin-left: -7.5rem;
}
.logo { margin-top: -9em; cursor: default;
}
.form { margin-top: -4.5em; transition: 1s ease-in-out;
}
.input { -moz-box-sizing: border-box; box-sizing: border-box; font-size: 1.125rem; line-height: 3rem; width: 100%; height: 3rem; color: #444; background-color: rgba(255,255,255,.9); border: 0; border-top: 1px solid rgba(255,255,255,0.7); padding: 0 1rem; font-family: 'Open Sans', sans-serif;
} .input:focus { outline: none; } .input--top { border-radius: 0.5rem 0.5rem 0 0; border-top: 0; } .input--submit { background-color: rgba(92,168,214,0.9); color: #fff; font-weight: bold; cursor: pointer; border-top: 0; border-radius: 0 0 0.5rem 0.5rem; margin-bottom: 1rem; }
.text { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.8); text-decoration: none;
} .text--small { opacity: 0.85; font-size: 0.75rem; cursor: pointer; } .text--small:hover { opacity: 1; } .text--omega { width: 200%; margin: 0 0 1rem -50%; font-size: 1.5rem; line-height: 1.125; font-weight: normal; } .text--centered { display: block; text-align: center; } .text--border-right { border-right: 1px solid rgba(255,255,255,0.5); margin-right: 0.75rem; padding-right: 0.75rem; }
.legal { position: absolute; bottom: 1.125rem; left: 1.125rem;
}
.photo-cred { position: absolute; right: 1.125rem; bottom: 1.125rem;
}
.fullscreen-bg { position: fixed; z-index: -1; top:0; right:0; bottom:0; left:0; background: url(https://36.media.tumblr.com/3cae448eafe6cdd27c210b4da274cfe7/tumblr_ns9p18pY5a1qzwmsso1_1280.jpg) center; background-size: cover;
}
#toggle--login:checked ~ .form--signup { left:200%; visibility:hidden; }
#toggle--signup:checked ~ .form--login { left:-100%; visibility:hidden; }
@media (height:300px){.legal,.photo-cred{display:none}}
Tumblr Login/Signup CSS Toggle - Script Codes
Tumblr Login/Signup CSS Toggle - Script Codes
Home Page Home
Developer Billy Crist
Username billyysea
Uploaded September 07, 2022
Rating 4.5
Size 2,901 Kb
Views 22,264
Do you need developer help for Tumblr Login/Signup CSS Toggle?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Billy Crist (billyysea) Script Codes
Name
A Simple, Fashionable, Loader
Full Page Vertical Hover Sliders
SuprLiTE CSS Arrows
Location Pin Point
A Music Player
A Bouncy Menu Toggle
DMND
Hotel Booking ..in progress
Re-invented CSS Drop-down Menu
A Little Menu Bar
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!