CSS Sublime Text Logo
How do I make an css sublime text logo?
Scaleable Clickable Sublime Text Logo. What is a css sublime text logo? How do you make a css sublime text logo? This script and codes were developed by Hugo DarbyBrown on 09 August 2022, Tuesday.
CSS Sublime Text Logo Previews
CSS Sublime Text Logo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Sublime Text Logo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Averia+Libre'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Fugaz+One'>
<link rel='stylesheet prefetch' href='css/f179d14c2abbc7184a84c52bf.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import "compass/css3";
$sublime-color: #ff7b00;
html { background-color: #636363; @include filter-gradient(#636363, #0e0e0e, horizontal); @include background-image(radial-gradient(center, ellipse cover, #636363 0%,#0e0e0e 100%)); height: 100%; font-size: 10px; text-align: center;
}
*{ transition: 0.4s text-shadow ease; @include callout;
}
h1 { color: $sublime-color; font-family: 'Fugaz One', cursive; font-size: 50px; margin: 10px 0; text-shadow: 2px 2px 2px rgba(black,0.6);
}
.button { cursor: pointer; color: $sublime-color; font-family: 'Averia Libre'; height: 18rem; margin: 4rem auto; width: 22rem; z-index: 5;
.outer { background: #d9d9d9; border-radius: 1rem; box-shadow: #999999 0 0.7rem 0; height: 100%; outline: 1px solid transparent; padding: 1rem; position: relative; transform: perspective(800px) rotateX(20deg); width: 100%; .height { @include filter-gradient(#545454, #4d4d4d, horizontal); @include background-image(linear-gradient(left, #545454 0%,#222222 15%,#222222 82%,#4d4d4d 100%)); border-radius: 1rem; box-shadow: 0 0.1rem 0.1rem rgba(0,0,0,0.85); height: 100%; margin-top: -3rem; padding-bottom: 2.5rem; position: relative; transition: all 0.1s ease-in-out;
}
}
&:hover .outer .height { box-shadow: rgba(0,0,0,0.25) 0px 0.2rem 0.2rem, inset rgba(0,0,0,0.35) 0px -0.2rem 0.6rem; margin-top: -2rem; padding-bottom: 1.5rem;
}
&:active .outer .height { margin-top: -0.5rem; padding-bottom: 0px; transition: all 0.1s ease-in-out;
}
.outer .height .inner { @include filter-gradient(#a1a1a1, #4c4c4c, vertical); @include background-image(linear-gradient(top, #a1a1a1 0%,#585858 50%,#4c4c4c 50%,#4c4c4c 100%)); border-radius: 1rem; box-shadow: inset 0 -0.1rem 0.1rem rgba(white,0.85),inset 0.1rem 0.1rem 0.1rem rgba(black,0.85),inset -0.1rem 0 0.1rem rgba(black,0.85) ; font-size: 14rem; font-weight: 900; height: 100%; line-height: 1.2; position: relative; text-align: center; text-shadow: -0.1rem -0.2rem 0.3rem #000000, 0.1rem 0.2rem 0.3rem rgba(white,0.8), 0 0 4rem #ff7b00;
}
&:active .outer .height .inner{ border-radius: 1rem; box-shadow: inset rgba(0,0,0,0.9) 0 0 0.8rem; @include filter-gradient(#838282, #292929, vertical); @include background-image(linear-gradient(top, #676767 0%,#3a3939 50%,#292929 50%,#292929 100%)); color: darken($sublime-color,10); text-shadow: -0.1rem -0.2rem 0.3rem #000000; transition: 0.4s color ease, 0.4s background ease;
}
}
input[type='range'] { appearance: none !important; background: #ccc; border-radius: 15px; height:15px; margin: 30px;
}
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; @include filter-gradient(#a1a1a1, #4c4c4c, vertical); @include background-image(linear-gradient(top, #a1a1a1 0%,#585858 50%,#4c4c4c 50%,#4c4c4c 100%)); border-radius: 2px; box-shadow: 0 5px 0 #1e1e1e; height: 40px; width: 40px; &:after { content: 's'; color: $sublime-color; font-family: 'Averia Libre'; font-size: 40px; font-weight: 900; line-height: 0.7; margin-left: 10px; text-shadow: -0.1px -1px 1px #000000, 1px 1px 1px rgba(white,0.8); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>CSS Sublime Logo</h1>
<div class="button"> <div class="outer"> <div class="height"> <div class="inner">S</div> </div> </div>
</div>
<input id="logo-size" type="range" min="100" value="100" max="200"> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
CSS Sublime Text Logo - Script Codes CSS Codes
@import "compass/css3";
$sublime-color: #ff7b00;
html { background-color: #636363; @include filter-gradient(#636363, #0e0e0e, horizontal); @include background-image(radial-gradient(center, ellipse cover, #636363 0%,#0e0e0e 100%)); height: 100%; font-size: 10px; text-align: center;
}
*{ transition: 0.4s text-shadow ease; @include callout;
}
h1 { color: $sublime-color; font-family: 'Fugaz One', cursive; font-size: 50px; margin: 10px 0; text-shadow: 2px 2px 2px rgba(black,0.6);
}
.button { cursor: pointer; color: $sublime-color; font-family: 'Averia Libre'; height: 18rem; margin: 4rem auto; width: 22rem; z-index: 5;
.outer { background: #d9d9d9; border-radius: 1rem; box-shadow: #999999 0 0.7rem 0; height: 100%; outline: 1px solid transparent; padding: 1rem; position: relative; transform: perspective(800px) rotateX(20deg); width: 100%; .height { @include filter-gradient(#545454, #4d4d4d, horizontal); @include background-image(linear-gradient(left, #545454 0%,#222222 15%,#222222 82%,#4d4d4d 100%)); border-radius: 1rem; box-shadow: 0 0.1rem 0.1rem rgba(0,0,0,0.85); height: 100%; margin-top: -3rem; padding-bottom: 2.5rem; position: relative; transition: all 0.1s ease-in-out;
}
}
&:hover .outer .height { box-shadow: rgba(0,0,0,0.25) 0px 0.2rem 0.2rem, inset rgba(0,0,0,0.35) 0px -0.2rem 0.6rem; margin-top: -2rem; padding-bottom: 1.5rem;
}
&:active .outer .height { margin-top: -0.5rem; padding-bottom: 0px; transition: all 0.1s ease-in-out;
}
.outer .height .inner { @include filter-gradient(#a1a1a1, #4c4c4c, vertical); @include background-image(linear-gradient(top, #a1a1a1 0%,#585858 50%,#4c4c4c 50%,#4c4c4c 100%)); border-radius: 1rem; box-shadow: inset 0 -0.1rem 0.1rem rgba(white,0.85),inset 0.1rem 0.1rem 0.1rem rgba(black,0.85),inset -0.1rem 0 0.1rem rgba(black,0.85) ; font-size: 14rem; font-weight: 900; height: 100%; line-height: 1.2; position: relative; text-align: center; text-shadow: -0.1rem -0.2rem 0.3rem #000000, 0.1rem 0.2rem 0.3rem rgba(white,0.8), 0 0 4rem #ff7b00;
}
&:active .outer .height .inner{ border-radius: 1rem; box-shadow: inset rgba(0,0,0,0.9) 0 0 0.8rem; @include filter-gradient(#838282, #292929, vertical); @include background-image(linear-gradient(top, #676767 0%,#3a3939 50%,#292929 50%,#292929 100%)); color: darken($sublime-color,10); text-shadow: -0.1rem -0.2rem 0.3rem #000000; transition: 0.4s color ease, 0.4s background ease;
}
}
input[type='range'] { appearance: none !important; background: #ccc; border-radius: 15px; height:15px; margin: 30px;
}
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none !important; @include filter-gradient(#a1a1a1, #4c4c4c, vertical); @include background-image(linear-gradient(top, #a1a1a1 0%,#585858 50%,#4c4c4c 50%,#4c4c4c 100%)); border-radius: 2px; box-shadow: 0 5px 0 #1e1e1e; height: 40px; width: 40px; &:after { content: 's'; color: $sublime-color; font-family: 'Averia Libre'; font-size: 40px; font-weight: 900; line-height: 0.7; margin-left: 10px; text-shadow: -0.1px -1px 1px #000000, 1px 1px 1px rgba(white,0.8); }
}CSS Sublime Text Logo - Script Codes JS Codes
$('#logo-size').change(function () { var fontsize = $(this).val()/10 + "px"; $('html').css("font-size", fontsize );
});
| Developer | Hugo DarbyBrown |
| Username | hugo |
| Uploaded | August 09, 2022 |
| Rating | 4 |
| Size | 6,989 Kb |
| Views | 40,480 |
Do you need developer help for CSS Sublime Text Logo?
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!
Hugo DarbyBrown (hugo) Script Codes
| Name | Size |
| Animated Submit Button | 5,860 Kb |
| A.X.E - LumberJack single page Site | 3,665 Kb |
| 80s Retro spinning cube | 3,011 Kb |
| Sass Solar system | 6,868 Kb |
| Scroll Overflow Menu | 5,614 Kb |
| LunchBreak Sassing | 2,885 Kb |
| Iron Man Login Form | 7,117 Kb |
| Roll Over Social Buttons | 2,811 Kb |
| Shade - Shadow Mixin | 9,364 Kb |
| Greyscale Magnifying glass effect | 2,590 Kb |
Create amazing sales emails 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!
Similar Scripts & Codes
| Name | Username | Size |
| Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
| Halo 5 REQ Guide Bookmarklet | Cwacht | 3,993 Kb |
| Toolbar | Onsen | 5,414 Kb |
| A Pen by lizz | Lizz | 10,068 Kb |
| 404 Page | Saransh | 2,666 Kb |
| Project Euler Problem 17 | Bfillmer | 2,739 Kb |
| RWD Conversion Practice | Jxqr97 | 2,743 Kb |
| Replace url via jquery | Serluk | 1,429 Kb |
| SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
| Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!