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

css Divi画廊风格

Divi Gallery Styles

/*-----------------[Start Gallery Styles]----------------*/

/*---[Remove Metadata in Lightbox]---*/
.mfp-bottom-bar {
	display:none;
}
/*---[Change Navigation Color]---*/
.et_pb_bg_layout_light .et-pb-arrow-next, .et_pb_bg_layout_light .et-pb-arrow-prev {
    color: #ffffff;
}

/*-----------------[End Gallery Styles]----------------*/

css 移动设备上的2x2列

2x2 columns on mobile

/*-----------------[Start 2x2 column on mobile]----------------*/

@media (max-width: 980px) {
.flex-columns .et_pb_row {
  display: flex; }
.flex-columns.twobytwo .et_pb_row {
  display: flex; }
.flex-columns.twobytwo .et_pb_row {
  flex-wrap: wrap; }
.flex-columns.twobytwo .et_pb_row .et_pb_column {
  width: 50% !important; } 
}
@media (max-width: 479px) {
.flex-columns.twobytwo .et_pb_row {
  flex-wrap: wrap; } 
.flex-columns.twobytwo .et_pb_row .et_pb_column {
  width: 50% !important; }
}

/*-----------------[End 2x2 column on mobile]----------------*/

css 菜单滚动

菜单fixe au scroll de la page。 <br/>

script.js

	$(window).on('scroll load', function() {	

		if ($(window).scrollTop() > 300 ) { 
			$('#masthead').addClass('scrollPlus'); // class crée à mettre dans le CSS

		} else if ($(window).scrollTop() < 200 )  { 
			$('#masthead').removeClass('scrollPlus');

		}
	});

style.css

#masthead {
    position: fixed;
    height: 109px;
}

#logo {
    max-width: 244px;
    width: 100%;
    position: relative;
    top: -66px;
}

.scrollPlus {
    height: 70px;
    box-shadow: 3px 3px 5px 0px rgba(210,210,210,1);
}

.scrollPlus #logo {
    max-width: 140px;
    top: 0;
}

css Eric Meyer CSS重置V2.0

EricMeyer_CssReset_2.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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 灵活的小部件

functions.php

/**
 * Counts used widgets in given sidebar.
 *
 * @param string $id The sidebar ID.
 * @return int|void The number of widgets, or nothing.
 */
function flexible_count_widgets( $id ) {

    $sidebars_widgets = wp_get_sidebars_widgets();

    if ( isset( $sidebars_widgets[ $id ] ) ) {
        return count( $sidebars_widgets[ $id ] );
    }

}

/**
 * Gives class name based on widget count.
 *
 * @param string $id The widget ID.
 * @return string The class.
 */
function flexible_widget_area_class( $id ) {

    $count = flexible_count_widgets( $id );

    $class = '';

    if ( 1 === $count ) {
        $class .= ' widget-full';
    } elseif ( 0 === $count % 3 ) {
        $class .= ' widget-thirds';
    } elseif ( 0 === $count % 4 ) {
        $class .= ' widget-fourths';
    } elseif ( 1 === $count % 2 ) {
        $class .= ' widget-halves uneven';
    } else {
        $class .= ' widget-halves';
    }

    return $class;

}

/**
 * Helper function to handle outputting widget markup and classes.
 *
 * @param string $id The id of the widget area.
 */
function flexible_do_widget( $id ) {

    $count   = flexible_count_widgets( $id );
    $columns = flexible_widget_area_class( $id );

    genesis_widget_area(
        $id, array(
            'before' => '<div id="' . $id . '" class="' . $id . '"><div class="flexible-widgets widget-area ' . $columns . '"><div class="wrap">',
            'after'  => '</div></div></div>',
        )
    );

}

add_action( 'genesis_before_footer', 'sk_before_footer', 7 );
/**
 * Adds `before-footer` flexible featured widget area above the footer widgets.
 */
function sk_before_footer() {

    flexible_do_widget( 'before-footer' );

}

style.css

/* Flexible Widgets
--------------------------------------------- */

.flexible-widgets .widget {
    float: left;
    margin-bottom: 0;
    padding: 40px;
    background-color: #fff;
}

.flexible-widgets .widget table {
    margin-bottom: 0;
}

.flexible-widgets.widget-full .widget,
.flexible-widgets.widget-halves.uneven .widget:last-of-type {
    width: 100%;
}

.flexible-widgets.widget-fourths .widget {
    width: 22%;
    margin-left: 4%;
}

.flexible-widgets.widget-halves .widget {
    width: 48%;
    margin-left: 4%;
}

.flexible-widgets.widget-thirds .widget {
    width: 31%;
    margin-left: 3.5%;
}

.flexible-widgets.widget-halves .widget:nth-of-type(odd),
.flexible-widgets.widget-thirds .widget:nth-child(3n + 1),
.flexible-widgets.widget-fourths .widget:nth-child(4n + 1) {
    clear: left;
    margin-left: 0;
}

.flexible-widgets .featured-content {
    padding: 0;
    background-color: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
}

.flexible-widgets .featured-content .entry {
    background-color: #fff;
    -webkit-box-shadow: 0 25px 60px 0 rgba(0, 0, 0, 0.05);
            box-shadow: 0 25px 60px 0 rgba(0, 0, 0, 0.05);
    text-align: center;
}

.flexible-widgets .featured-content .entry-title {
    font-size: 26px;
    font-size: 2.6rem;
    text-decoration: none;
    letter-spacing: -1px;
}

.flexible-widgets .featured-content .entry-content,
.flexible-widgets .featured-content .entry-title {
    padding: 15px 40px 0 40px;
}

.flexible-widgets .featuredpost .entry-meta {
    padding-right: 40px;
    padding-left: 40px;
}

.flexible-widgets.widget-full .featuredpost .entry,
.flexible-widgets.widget-halves.uneven .featuredpost.widget:last-of-type .entry {
    float: left;
    width: 31%;
    margin-left: 3.5%;
}

.flexible-widgets.widget-full .featuredpost .entry:nth-of-type(3n + 1),
.flexible-widgets.widget-halves.uneven .featuredpost.widget:last-of-type .entry:nth-of-type(3n + 1) {
    clear: left;
    margin-left: 0;
}

.flexible-widgets .featured-content .more-posts-title {
    padding: 30px 0;
}

.flexible-widgets .featured-content .more-posts {
    text-align: center;
}

.flexible-widgets.widget-full .featured-content .more-posts,
.flexible-widgets.widget-halves.uneven .featured-content:last-of-type .more-posts {
    clear: both;
    -webkit-column-count: 3;
    column-count: 3;
    padding-bottom: 30px;
}

.flexible-widgets .featured-content .more-from-category {
    margin-bottom: 55px;
}

@media only screen and (max-width: 860px) {

    .flexible-widgets .wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .flexible-widgets.widget-fourths .widget,
    .flexible-widgets.widget-halves .widget,
    .flexible-widgets.widget-thirds .widget {
        float: none;
        margin-left: 0;
        width: 100%;
    }

    .flexible-widgets.widget-full .widget .entry,
    .flexible-widgets.widget-halves.uneven .widget:last-of-type .entry {
        margin-left: 0;
        width: 100%;
    }

    .flexible-widgets .entry:last-of-type {
        margin-bottom: 40px;
    }

    .flexible-widgets .featured-content .entry-title,
    .half-width-entries .flexible-widgets .featured-content .entry-title,
    .flexible-widgets.widget-full .entry-title,
    .flexible-widgets.widget-halves.uneven .widget:last-of-type .entry-title {
        font-size: 28px;
        font-size: 2.8rem;
    }

    .flexible-widgets.widget-full .featured-content .more-posts,
    .flexible-widgets.widget-halves.uneven .featured-content:last-of-type .more-posts {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

}

css 手写笔：F1TV

styles

:root {
  --header-height: 40px;
  --control-panel-width: 140px;
}

._2c4vB {
  float: none;
  width: auto;
  margin: 0;
}

.content-wrapper {
  max-width: unset;
}

.content-wrapper__inner {
  float: none;
}

._3R3sg, .rLjOl {
  height: var(--header-height);
}

.wXPTD {
  padding-top: var(--header-height) !important;
}

.U6G2h,
._28ubt {
  height: calc(100vh - var(--header-height)) !important;
}


@media (min-width: 960px) {
  ._3HgvS {
    margin-left: 0;
    width: calc(100% - var(--control-panel-width));
  }
  
  .U6G2h {
    width: var(--control-panel-width);
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
  }
}

css 手写笔：GMail with Simplify和Copper

styles

:root {
  --copper-drawer-width: 360px;
}

.gb_Kc {
  position: fixed;
  top: 62px;
  right: 14px;
}

.pw-expanded .gb_Kc {
  right: calc(var(--copper-drawer-width) + 14px);
}

html.simpl.hideSearch .pw-expanded .aeH {
  width: calc(100vw - 172px - var(--copper-drawer-width));
}

@media only screen and (min-width: 1291.98px) {
  .pw-expanded .G-atb {
    padding-left: calc(((100vw - var(--content-width)) / 2) - var(--left-offset) - var(--copper-drawer-width)) !important;
  }
}

html.simpl .pw-expanded .z0 {
  left: calc(100vw - 92px - var(--copper-drawer-width));
}

html.simpl .pw-expanded .bAw {
  right: calc(47px + var(--copper-drawer-width)) !important;
}

css WooCommerce价格滑块

样式woocommerce价格过滤滑块和开关过滤按钮和价格标签。过滤器按钮和价格标签可在插件中找到> woocommerce / includes / widgets / class-wc-widget-price-filter.php

style.css

/*************** WOOCOOMERCE PRICE SLIDER ***************/
.price_slider{ 
    margin-bottom: 1em;
}
.price_slider_amount {
    text-align: right;
    line-height: 2.4em;
    font-size: 0.8751em;
}
.price_slider_amount .button {
    font-size:1.15em;
}
.price_slider_amount .button {
    float: left;
}
.ui-slider {
    position: relative;
    text-align: left;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 0.9em;
    height: 0.9em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    cursor: pointer;
    background: #e7e7e7;
    background: -webkit-gradient(linear,left top,left bottom,from(#FEFEFE),to(#e7e7e7));
    background: -webkit-linear-gradient(#FEFEFE,#e7e7e7);
    background: -moz-linear-gradient(center top,#FEFEFE 0%,#e7e7e7 100%);
    background: -moz-gradient(center top,#FEFEFE 0%,#e7e7e7 100%);
    outline: none;
    top: -.3em;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}
.ui-slider .ui-slider-handle:last-child {
    margin-left: -1em;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size:.7em;
    display: block;
    border: 0;
    background: none repeat scroll 0 0 #FF6B6B;
    box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.25) inset;
    -webkit-box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.25) inset;
    -moz-box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.25) inset;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
}
.price_slider_wrapper .ui-widget-content {
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    background: #1e1e1e;
    background: -webkit-gradient(linear,left top,left bottom,from(#1e1e1e),to(#6a6a6a));
    background: -webkit-linear-gradient(#1e1e1e,#6a6a6a);
    background: -moz-linear-gradient(center top,#1e1e1e 0%,#6a6a6a 100%);
    background: -moz-gradient(center top,#1e1e1e 0%,#6a6a6a 100%);
}
.ui-slider-horizontal {
    height:.5em;
}
.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
    left: -1px;
}
.ui-slider-horizontal .ui-slider-range-max {
    right: -1px;
}






/*************** SWITCH FILTER BUTTON AND PRICE LABEL ~ LINE 129 ***************/
					<div class="price_label" style="display:none;">
						<span class="from"></span><span class="to"></span>
					</div>
<button type="submit" class="button">' . esc_html__( 'Filter', 'woocommerce' ) . '</button>

css 粘边部分

side-sticky.js

jQuery(document).ready(function($) {

    // click event for .sticky-switch.
    $('.sticky-switch').click(function(event) {
        // stop the click on the link adding a # to the end of URL
        event.preventDefault();

        $(this).parents('#side-container').toggleClass('open');

    });

    // Close if user clicks outside of panel.
    $(document).click(function(event) {
        if(!$(event.target).closest('#side-container').length) {
        // ... clicked on the 'body', but not inside of #side-container
            if($('#side-container').hasClass('open')) {
                $('#side-container').removeClass('open');
            }
        }
    });

    // Close the side panel after Submit button inside #side-section has been clicked.
    $('#side-section input[type="submit"]').click(function(event) {
        $('#side-container').removeClass('open');
    });

});

functions.php

// Register side-sticky widget area.
genesis_register_widget_area(
    array(
        'id'          => 'side-sticky',
        'name'        => __( 'Side Sticky', 'my-theme-text-domain' ),
        'description' => __( 'This appears in the sticky side section.', 'my-theme-text-domain' ),
    )
);

add_action( 'wp_footer', 'sk_side_sticky' );
/**
 * Display sticky side section.
 */
function sk_side_sticky() {
    // if there is no widget in the Side Sticky widget area, abort.
    if ( ! is_active_sidebar( 'side-sticky' ) ) {
        return;
    } ?>

    <div id="side-container">
        <div id="side-section">
            <?php
            genesis_widget_area( 'side-sticky', array(
                'before'    => '<div class="side-sticky widget-area">',
                'after'     => '</div>',
            ) ); ?>
        </div>
        <div id="side-sticky-button"><a class="sticky-switch" href="#"><?php echo __( 'Subscribe', 'my-theme-text-domain' ); ?></a></div>
    </div>
<?php }

add_action( 'wp_enqueue_scripts', 'enqueue_side_sticky' );
/**
 * Load side-sticky.js.
 */
function enqueue_side_sticky() {
    // if there is no widget in the Side Sticky widget area, abort.
    if ( ! is_active_sidebar( 'side-sticky' ) ) {
        return;
    }

    wp_enqueue_script( 'side-sticky',  get_stylesheet_directory_uri() . '/js/side-sticky.js', array( 'jquery' ), '1.0.0', true );
}

style.css

#side-container {
    position: fixed;
    left: 0;
    top: 50%;
    -webkit-transform: translate(-400px, -30%);
    transform: translate(-400px, -30%);
    -webkit-transition: transform 0.4s ease-in-out;
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
    transition:         transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
    z-index: 1000;
    background-color: #003643;
    color: #fafafa;
}

#side-container.open {
    -webkit-transform: translate(0, -30%);
    transform: translate(0, -30%);
}

#side-section {
    padding: 40px;
    width: 400px;
    min-height: 180px;
}

#side-section .widget-title {
    font-size: 22px;
    text-transform: uppercase;
}

#side-section .enews input {
    padding: 10px;
}

#side-section .enews p {
    font-size: 17px;
}

#side-section input[type="submit"] {
    background-color: #c9a255;
    text-transform: uppercase;
}

#side-section li a {
    color: #fafafa;
    text-decoration: none;
}

#side-section li a:hover {
    color: #fff;
}

#side-section p:last-child {
    margin-bottom: 0;
}

#side-sticky-button {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    -webkit-transform-origin: right top 0;
            transform-origin: right top 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #003643;
    color: #fff;
    width: 180px;
    text-align: center;
}

a.sticky-switch {
    display: block;
    padding: 10px 30px;
    color: #c5a651;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 1.5px;
}

a.sticky-switch:focus {
    outline: none;
}

@media only screen and (max-width: 500px) {

    #side-section {
        width: auto;
    }

    #side-container {
        position: static;
        -webkit-transform: none;
        transform: none;
        background-color: #003643;
        color: #fafafa;
    }

    #side-container.open {
        -webkit-transform: none;
        transform: none;
    }

    a.sticky-switch {
        display: none;
    }

}

css Dropbox css指南

dropbox-css-guideline.css

https://github.com/dropbox/css-style-guide