Typtic for OSX - Night Mode

Developer
Andy Merskin
Size
3,443 Kb
Views
34,408
  1. Typtic for OSX - Night Mode Previews
  2. Typtic for OSX - Night Mode HTML Codes
  3. Typtic for OSX - Night Mode CSS Codes

How do I make an typtic for osx - night mode?

Night mode switch.. What is a typtic for osx - night mode? How do you make a typtic for osx - night mode? This script and codes were developed by Andy Merskin on 10 August 2022, Wednesday.

Typtic for OSX - Night Mode Previews
IQ Test

Typtic for OSX - Night Mode - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Typtic for OSX - Night Mode</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <label> <input id="switch" class="switch-checkbox" type="checkbox"/> <div class="switch"> <div class="switch--stars"> <div class="switch--stars-dots-1"></div> <div class="switch--stars-dots-2"></div> <div class="switch--stars-large-1"></div> <div class="switch--stars-large-2"></div> </div> <div class="switch-toggle"></div> </div>
</label>
</body>
</html>

Typtic for OSX - Night Mode - Script Codes CSS Codes

body { height: 50px; background: -webkit-linear-gradient(top, #f4f4f4 0%, #d6d6d6 100%) no-repeat; background: linear-gradient(to bottom, #f4f4f4 0%, #d6d6d6 100%) no-repeat;
/* background-color #000 */ text-align: center;
}
/*
Switch Base
*/
.switch { display: inline-block; position: relative; margin: 12px auto; height: 22px; width: 36px; border-radius: 11px; background-color: #fff; border: 1px solid #e5e5e5; box-sizing: border-box; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer;
/* overflow hidden */
}
/*
Checkbox Control
*/
.switch-checkbox { visibility: hidden;
}
.switch-checkbox:checked + .switch { border: 1px solid #66f; background: -webkit-linear-gradient(left, #004080 0%, #66f 50%); background: linear-gradient(to right, #004080 0%, #66f 50%);
}
.switch-checkbox:checked + .switch .switch-toggle { box-shadow: 0 0 8px 1px rgba(255,255,255,0.8), 0 0 0 1px #66f; -webkit-transform: translateX(14px); transform: translateX(14px);
}
.switch-checkbox:checked + .switch .switch--stars-dots-1,
.switch-checkbox:checked + .switch .switch--stars-dots-2 { opacity: 1; width: 1px; -webkit-transform: translateX(0); transform: translateX(0);
}
.switch-checkbox:checked + .switch .switch--stars-large-1,
.switch-checkbox:checked + .switch .switch--stars-large-2 { -webkit-transform: scaleX(1) translateX(0); transform: scaleX(1) translateX(0);
}
.switch-checkbox:checked + .switch .switch--stars-large-1 { opacity: 1;
}
.switch-checkbox:checked + .switch .switch--stars-large-2 { opacity: 0.9;
}
/*
Switch Toggle Orb, AKA, The Moon
*/
.switch-toggle { position: absolute; width: 20px; height: 20px; background-color: #fff; box-shadow: 0 0 5px 0 rgba(0,0,0,0.05), 0 5px 2px 0 rgba(0,0,0,0.05), 0 0 0 1px #ddd; border-radius: 50%; -webkit-transition: all 300ms ease; transition: all 300ms ease;
}
/*
Stars Wrapper
*/
.switch--stars { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;
}
/*
Dot Stars
*/
[class*=switch--stars-dots] { position: absolute; top: 0; left: 0; width: 5px; height: 1px; opacity: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease;
}
.switch--stars-dots-1 { -webkit-transform: translateX(-10px); transform: translateX(-10px); box-shadow: 5px 6px 0 0 #fff, 11px 9px 0 0 #fff, 8px 11px 0 0 #fff, 11px 14px 0 0 #fff, 13px 18px 0 0 #fff;
}
.switch--stars-dots-2 { -webkit-transform: translateX(-10px); transform: translateX(-10px); box-shadow: 13px 2px 0 0 rgba(255,255,255,0.3), 3px 10px 0 0 rgba(255,255,255,0.3), 9px 18px 0 0 rgba(255,255,255,0.3);
}
/*
Larger Stars
*/
[class*=switch--stars-large] { position: absolute; width: 1px; height: 1px; opacity: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
[class*=switch--stars-large]:before { content: ''; position: absolute; top: -1px; width: 1px; height: 3px; background: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%, #fff 50%, rgba(255,255,255,0.2) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, #fff 50%, rgba(255,255,255,0.2) 100%);
}
[class*=switch--stars-large]:after { content: ''; position: absolute; left: 0px; width: 3px; height: 1px; background: -webkit-linear-gradient(left, rgba(255,255,255,0.2) 0%, #fff 50%, rgba(255,255,255,0.2) 100%); background: linear-gradient(to right, rgba(255,255,255,0.2) 0%, #fff 50%, rgba(255,255,255,0.2) 100%);
}
.switch--stars-large-1 { top: 4px; left: 9px; -webkit-transform: translateX(-2px); transform: translateX(-2px); -webkit-transition-delay: 200ms; transition-delay: 200ms;
}
.switch--stars-large-2 { top: 14px; left: 5px; -webkit-transform: translateX(-2px); transform: translateX(-2px); -webkit-transition-delay: 150ms; transition-delay: 150ms;
}
Typtic for OSX - Night Mode - Script Codes
Typtic for OSX - Night Mode - Script Codes
Home Page Home
Developer Andy Merskin
Username andymerskin
Uploaded August 10, 2022
Rating 3
Size 3,443 Kb
Views 34,408
Do you need developer help for Typtic for OSX - Night Mode?

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!

Andy Merskin (andymerskin) Script Codes
Name
Parallax Depth Cards
Animated Dropdowns with scaleY
Vue.js Recipe - Slideout Menu
Spotr - Basic Example
Vue.js Starter
Vue List Transitions - Bug Test
Table Row Peek
SASS Easings
Wires Loading Animation
SVG Stroke Drawing Effect on Focus
Create amazing Facebook ads 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!