Skip to content

Instantly share code, notes, and snippets.

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {
@shrekuu
shrekuu / dabblet.css
Created April 30, 2015 09:19 — forked from LeaVerou/dabblet.css
Typing animation with pure CSS.
/**
* Typing animation with pure CSS.
* Works best in browsers supporting the ch unit.
*/
@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
h1 {
font: bold 200% Consolas, Monaco, monospace;
@shrekuu
shrekuu / index.jade
Last active August 29, 2015 14:21
colorfull dots created with shadow
.one
@shrekuu
shrekuu / better-default-font-family.js
Last active April 6, 2016 11:54
Set default font-family according to operating system. 根据操作系统设置默认(中文)字体。
// @温柔的码农
// reset font-family according to OS
(function () {
if (!navigator || !navigator.appVersion) {
return;
}
if (navigator.appVersion.indexOf("Win") != -1) {
// win 微软雅黑
$('body').css('font-family', 'helvetica, arial, "Microsoft Yahei", simhei, sans-serif');
return;
@shrekuu
shrekuu / my.cnf
Last active April 6, 2016 11:47
mac; mysql charset code; memory size limit control
# @温柔的码农
[client]
loose-default-character-set = utf8
[mysql]
loose-default-character-set = utf8
[mysqld]
collation-server = utf8_unicode_ci
loose-default-character-set = utf8
@shrekuu
shrekuu / install-go-lang-2.sh
Last active April 6, 2016 11:43
mac install go lang
#!/usr/bin/env sh
# As of 20130519, go 1.1 has been released.
# The proccess of the gist should be OK for go 1.1 .
# magic pause
function pause(){
read -p "$*"
}
@shrekuu
shrekuu / ip_in_range.php
Created December 10, 2015 04:56 — forked from tott/ip_in_range.php
php check if IP is in given network range
/**
* Check if a given ip is in a network
* @param string $ip IP to check in IPV4 format eg. 127.0.0.1
* @param string $range IP/CIDR netmask eg. 127.0.0.0/24, also 127.0.0.1 is accepted and /32 assumed
* @return boolean true if the ip is in this range / false if not.
*/
function ip_in_range( $ip, $range ) {
if ( strpos( $range, '/' ) == false ) {
$range .= '/32';
}
@shrekuu
shrekuu / httpd-vhosts.conf
Created April 6, 2016 11:30
sample; mac, apache, reverse proxy
# @温柔的码农
<VirtualHost *:80>
ServerName example.com # change to your domain
ProxyRequests off
ProxyPreserveHost On
<Proxy *>
Order deny,allow
Allow from all
@shrekuu
shrekuu / FilterIfAjax.php
Last active September 4, 2018 07:13
laravel pjax middleware; A pjax middleware for Laravel 5; dump error if server gives error
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Symfony\Component\DomCrawler\Crawler;
class FilterIfPjax
@shrekuu
shrekuu / packager.js
Last active November 1, 2017 04:19
ancient js namespace
// Note: these code is tooooo old.
// version 1
function(t) {
function e(t) {
for (var e, i = ("" + t).split("."), r = window, o = 0; e = i[o]; o++) n.call(r, e) || (r[e] = {}), r = r[e];
return r
}
var n = Object.prototype.hasOwnProperty;
t.packager = function(t, n) {