css,Code片段,代码实例,代码示例,代码片段库

css css：三角形左边

css：三角形左边

css_triangle-left.css

width: 0px;
height: 0px;
border-style: solid;
border-width: 0.5em 1em 0.5em 0;
border-color: transparent #cc4 transparent transparent;

css css：section-title-comment

css：section-title-comment

css_section-title-comment.css

/*------------------------------------*\
    $Title
\*------------------------------------*/
[Estilos]

css CSS：渐变前的内容

CSS：渐变前的内容

css_content-before-gradient.css

&:before{
	content: "";
	display: block;
	width: 3px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	@include background-image(linear-gradient(left, transparentize(#000, 1), transparentize(#000, 0.8)));
}

css CSS：border-box-all

CSS：border-box-all

css_border-box-all.css

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

css CSS BEM - 块，元素，修饰符

CSS BEM - 块，元素，修饰符

css-bem-block-element-modifier.css

.block {
    /* Base stuff */
}

.block__child {
    /* Sub-element of block */
}

.block--modifier {
    /* Variation of block */
}

css Eric Meye的重置CSS 2.0

Eric Meye的重置CSS 2.0

reset.css

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {  margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}

css DEV-mode.css

image-width_height.css

img:not([width]):not([height]) {
  border: 2px solid red !important;
}

dev-mode.css

* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }


.debug-mode * { outline: 2px dotted red !important; }

.debug-mode * * { outline: 2px dotted green !important; }

.debug-mode * * * { outline: 2px dotted orange !important; }

.debug-mode * * * * { outline: 2px dotted blue !important; }

.debug-mode * * * * * { outline: 1px solid red !important; }

.debug-mode * * * * * * { outline: 1px solid green !important; }

.debug-mode * * * * * * * { outline: 1px solid orange !important; }

.debug-mode * * * * * * * * { outline: 1px solid blue !important; }

css 登录-customize.css

<?php
/*
Plugin Name: Login Customize
*/
 
// ログイン画面でCSSを読み込み
function login_background_image() {
  echo '<link rel="stylesheet" type="text/css" href="' . plugins_url( 'login-customize.css' , __FILE__ ) .'" />';
} 
add_action('login_head', 'login_background_image');
 
// ログインフォームの下にコンテンツを追加
function add_footer_contents(){
  echo '';
}
add_action('login_footer', 'add_footer_contents');
 
// ロゴのリンク先を変更
function change_login_headerurl($login_header_url) {
  $login_header_url = 'http://2013.tokyo.wordcamp.org/';
  return $login_header_url;
}
add_filter('login_headerurl', 'change_login_headerurl');
 
// ロゴのtitle属性を変更
function change_login_headertitle($login_headertitle) {
  $login_headertitle = 'WordCamp Tokyo 2013 | 2013年9月14日 (土) 開催';
  return $login_headertitle;
}
add_filter('login_headertitle', 'change_login_headertitle');
 
// ログイン画面でjQueryを追加
function add_jquery_to_login(){
  wp_enqueue_script('jquery');
}
add_action('login_enqueue_scripts','add_jquery_to_login');
 
// ログインフォームをdivで囲む
function add_script_to_login(){
  echo '<script>jQuery("#loginform").wrap("<div class=\'hoge\'></div>");</script>';
}
add_action('login_footer','add_script_to_login');

body.login{
  background-color: #fff;
  background-image: url(http://2013.tokyo.wordcamp.org/files/2013/06/bg_kabuki.png);
}
.login h1 a {
  background-image: url(http://2013.tokyo.wordcamp.org/files/2013/07/head_wapuu.png);
  background-size: 274px 300px;
}

.login h1 a {
background-size: 190px 181px;
background-position: top center;
background-repeat: no-repeat;
width: 190px;
height: 181px;
text-indent: -9999px;
outline: 0;
overflow: hidden;
padding-bottom: 15px;
display: block;
margin: 0 auto;
}

.login form {
margin-left: 8px;
padding: 26px 24px 46px;
font-weight: normal;
background: #fff;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#login {
padding: 20px 0;
}

.wp-core-ui .button-primary {
background-color: #f80016;
background-image: -webkit-gradient(linear,left top,left bottom,from(#f80016),to(#f80016));
background-image: -webkit-linear-gradient(top,#f80016,#f80016);
background-image: -moz-linear-gradient(top,#f80016,#f80016);
background-image: -ms-linear-gradient(top,#f80016,#f80016);
background-image: -o-linear-gradient(top,#f80016,#f80016);
background-image: linear-gradient(to bottom,#f80016,#f80016);
border-color: #f80016;
border-bottom-color: none;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.wp-core-ui .button-primary:hover {
background-color: #ff5742;
background-image: -webkit-gradient(linear,left top,left bottom,from(#ff5742),to(#ff5742));
background-image: -webkit-linear-gradient(top,#ff5742,#ff5742);
background-image: -moz-linear-gradient(top,#ff5742,#ff5742);
background-image: -ms-linear-gradient(top,#ff5742,#ff5742);
background-image: -o-linear-gradient(top,#ff5742,#ff5742);
background-image: linear-gradient(to bottom,#ff5742,#ff5742);
border-color: #ff5742;
border-bottom-color: none;
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
color: #fff;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}

.login #nav a, .login #backtoblog a {
color: #fff!important;
}
.login #nav, .login #backtoblog {
text-shadow: #000 0 1px 0;
}

css 登录-customize.css

<?php
/*
Plugin Name: Login Customize
*/
 
// ログイン画面でCSSを読み込み
function login_background_image() {
  echo '<link rel="stylesheet" type="text/css" href="' . plugins_url( 'login-customize.css' , __FILE__ ) .'" />';
} 
add_action('login_head', 'login_background_image');
 
// ログインフォームの下にコンテンツを追加
function add_footer_contents(){
  echo '';
}
add_action('login_footer', 'add_footer_contents');
 
// ロゴのリンク先を変更
function change_login_headerurl($login_header_url) {
  $login_header_url = 'http://2013.tokyo.wordcamp.org/';
  return $login_header_url;
}
add_filter('login_headerurl', 'change_login_headerurl');
 
// ロゴのtitle属性を変更
function change_login_headertitle($login_headertitle) {
  $login_headertitle = 'WordCamp Tokyo 2013 | 2013年9月14日 (土) 開催';
  return $login_headertitle;
}
add_filter('login_headertitle', 'change_login_headertitle');
 
// ログイン画面でjQueryを追加
function add_jquery_to_login(){
  wp_enqueue_script('jquery');
}
add_action('login_enqueue_scripts','add_jquery_to_login');
 
// ログインフォームをdivで囲む
function add_script_to_login(){
  echo '<script>jQuery("#loginform").wrap("<div class=\'hoge\'></div>");</script>';
}
add_action('login_footer','add_script_to_login');

body.login{
  background-color: #fff;
  background-image: url(http://2013.tokyo.wordcamp.org/files/2013/06/bg_kabuki.png);
}
.login h1 a {
  background-image: url(http://2013.tokyo.wordcamp.org/files/2013/07/head_wapuu.png);
  background-size: 274px 300px;
}

.login h1 a {
background-size: 190px 181px;
background-position: top center;
background-repeat: no-repeat;
width: 190px;
height: 181px;
text-indent: -9999px;
outline: 0;
overflow: hidden;
padding-bottom: 15px;
display: block;
margin: 0 auto;
}

.login form {
margin-left: 8px;
padding: 26px 24px 46px;
font-weight: normal;
background: #fff;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#login {
padding: 20px 0;
}

.wp-core-ui .button-primary {
background-color: #f80016;
background-image: -webkit-gradient(linear,left top,left bottom,from(#f80016),to(#f80016));
background-image: -webkit-linear-gradient(top,#f80016,#f80016);
background-image: -moz-linear-gradient(top,#f80016,#f80016);
background-image: -ms-linear-gradient(top,#f80016,#f80016);
background-image: -o-linear-gradient(top,#f80016,#f80016);
background-image: linear-gradient(to bottom,#f80016,#f80016);
border-color: #f80016;
border-bottom-color: none;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.wp-core-ui .button-primary:hover {
background-color: #ff5742;
background-image: -webkit-gradient(linear,left top,left bottom,from(#ff5742),to(#ff5742));
background-image: -webkit-linear-gradient(top,#ff5742,#ff5742);
background-image: -moz-linear-gradient(top,#ff5742,#ff5742);
background-image: -ms-linear-gradient(top,#ff5742,#ff5742);
background-image: -o-linear-gradient(top,#ff5742,#ff5742);
background-image: linear-gradient(to bottom,#ff5742,#ff5742);
border-color: #ff5742;
border-bottom-color: none;
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
color: #fff;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}

.login #nav a, .login #backtoblog a {
color: #fff!important;
}
.login #nav, .login #backtoblog {
text-shadow: #000 0 1px 0;
}

css 登录-customize.css

<?php
/*
Plugin Name: Login Customize
*/
 
// ログイン画面でCSSを読み込み
function login_background_image() {
  echo '<link rel="stylesheet" type="text/css" href="' . plugins_url( 'login-customize.css' , __FILE__ ) .'" />';
} 
add_action('login_head', 'login_background_image');
 
// ログインフォームの下にコンテンツを追加
function add_footer_contents(){
  echo '';
}
add_action('login_footer', 'add_footer_contents');
 
// ロゴのリンク先を変更
function change_login_headerurl($login_header_url) {
  $login_header_url = 'http://2013.tokyo.wordcamp.org/';
  return $login_header_url;
}
add_filter('login_headerurl', 'change_login_headerurl');
 
// ロゴのtitle属性を変更
function change_login_headertitle($login_headertitle) {
  $login_headertitle = 'WordCamp Tokyo 2013 | 2013年9月14日 (土) 開催';
  return $login_headertitle;
}
add_filter('login_headertitle', 'change_login_headertitle');
 
// ログイン画面でjQueryを追加
function add_jquery_to_login(){
  wp_enqueue_script('jquery');
}
add_action('login_enqueue_scripts','add_jquery_to_login');
 
// ログインフォームをdivで囲む
function add_script_to_login(){
  echo '<script>jQuery("#loginform").wrap("<div class=\'hoge\'></div>");</script>';
}
add_action('login_footer','add_script_to_login');

body.login{
  background-color: #fff;
  background-image: url(http://2013.tokyo.wordcamp.org/files/2013/06/bg_kabuki.png);
}
.login h1 a {
  background-image: url(http://2013.tokyo.wordcamp.org/files/2013/07/head_wapuu.png);
  background-size: 274px 300px;
}

.login h1 a {
background-size: 190px 181px;
background-position: top center;
background-repeat: no-repeat;
width: 190px;
height: 181px;
text-indent: -9999px;
outline: 0;
overflow: hidden;
padding-bottom: 15px;
display: block;
margin: 0 auto;
}

.login form {
margin-left: 8px;
padding: 26px 24px 46px;
font-weight: normal;
background: #fff;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#login {
padding: 20px 0;
}

.wp-core-ui .button-primary {
background-color: #f80016;
background-image: -webkit-gradient(linear,left top,left bottom,from(#f80016),to(#f80016));
background-image: -webkit-linear-gradient(top,#f80016,#f80016);
background-image: -moz-linear-gradient(top,#f80016,#f80016);
background-image: -ms-linear-gradient(top,#f80016,#f80016);
background-image: -o-linear-gradient(top,#f80016,#f80016);
background-image: linear-gradient(to bottom,#f80016,#f80016);
border-color: #f80016;
border-bottom-color: none;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.wp-core-ui .button-primary:hover {
background-color: #ff5742;
background-image: -webkit-gradient(linear,left top,left bottom,from(#ff5742),to(#ff5742));
background-image: -webkit-linear-gradient(top,#ff5742,#ff5742);
background-image: -moz-linear-gradient(top,#ff5742,#ff5742);
background-image: -ms-linear-gradient(top,#ff5742,#ff5742);
background-image: -o-linear-gradient(top,#ff5742,#ff5742);
background-image: linear-gradient(to bottom,#ff5742,#ff5742);
border-color: #ff5742;
border-bottom-color: none;
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
color: #fff;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}

.login #nav a, .login #backtoblog a {
color: #fff!important;
}
.login #nav, .login #backtoblog {
text-shadow: #000 0 1px 0;
}