Skip to content

Instantly share code, notes, and snippets.

View spemer's full-sized avatar
👨‍💻
Designer

Hyouk Seo spemer

👨‍💻
Designer
View GitHub Profile
.header-text {
margin-top: calc(var(--font-size)*16px);
font-size: calc(var(--font-size)*3rem);
line-height: calc(var(--font-size)*1.5em);
}
@spemer
spemer / customize-scrollbar.css
Last active May 4, 2024 06:37
✨ Customize website's scrollbar like Mac OS. Not supports in Firefox and IE.
/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */
/* total width */
body::-webkit-scrollbar {
background-color: #fff;
width: 16px;
}
/* background of the scrollbar except button or resizer */
body::-webkit-scrollbar {background-color:#fff;width:16px}
body::-webkit-scrollbar-track {background-color:#fff}
body::-webkit-scrollbar-thumb {background-color:#babac0;border-radius:16px;border:4px solid #fff}
::-webkit-scrollbar {/* entire scrollbar scope */}
::-webkit-scrollbar-button {/* directional buttons at the top and bottom of the scrollbar */}
::-webkit-scrollbar-track {/* space below the scrollbar */}
::-webkit-scrollbar-track-piece {/* not covered area by the scrollbar-thumb */}
::-webkit-scrollbar-thumb {/* draggable scrollbar itself */}
::-webkit-resizer {/* resizser at the bottom of the scrollbar */}
::-webkit-scrollbar-corner {/* bottom of the scrollbar without resizse */}
.blob-wrapper::-webkit-scrollbar {background-color:#fff;height:4px}
.blob-wrapper::-webkit-scrollbar-track {background-color:#fff}
.blob-wrapper::-webkit-scrollbar-thumb {background-color:#babac0;border-radius:4px}
img[alt=""],
img:not([alt]){
border: 4px dashed red;
}
@spemer
spemer / set-aria-hidden-i-tag.js
Last active February 12, 2018 04:44
Just copy and paste following code snippet will set attribute - 'aria-hidden' for every <i> tag if it has classname 'fa' in your HTML code.
//for fontawesome icons (<i> tags with .fa)
(function(){
let getIcons = document.querySelectorAll('i.fa');
getIcons.forEach(function(iconEach)
{
let getIconAttr = iconEach.getAttribute('aria-hidden');
if (!getIconAttr)
{
iconEach.setAttribute('aria-hidden','true');
}
var gulp = require('gulp');
gulp.task('taskname', function(){
console.log('\nHello world!\n');
});
div {
display: flex;
}
const autoprefixer = require('gulp-autoprefixer');
gulp.task('prefix', () =>
gulp.src('styleTest.css')
.pipe(autoprefixer({
browsers: ['last 99 versions'],
cascade: false
}))
.pipe(gulp.dest('style'))
);