working on it ...

Filters

Explore Public Snippets

Sort by

Found 519 snippets matching: css3

    public by JonahM  298463  2  6  4

    Responsive Type

    No Javascript required for responsive text! Pure CSS3
    /* Code Reference & Examples: http://mole.tk/1ymmXAv */
    
    
    /* 
    
    What Does vw and vm mean? 
        1vw = 1% of viewport width 
        1vh = 1% of viewport height 
        1vmin = 1vw or 1vh, whichever is smaller 
        1vmax = 1vw or 1vh, whichever is larger
    */
    
    body {
    	background-color:   #ff5442;
      font-family:        ‘Lato’, Arial, sans-serif; 
      margin:             2vw;
      
    }
    
    h1 {
    	color:              #fff;
    	font-size:          6vw;
    	font-weight:        900;
    	text-transform:     uppercase;
      line-height:        .3vw;
    	}
    
    h2 {
      color:              #fff;
      font-size:          4vw;
    }
    
    p {
      color:              #fff;
      font-size:          1em;
    }

    public by Fresh-Dev  221063  5  3  0

    Fancy CSS3 Pull-Quotes

    Fancy CSS3 Pull-Quotes: fancyPullQuotes.css
    .has-pullquote:before {
        /* Reset metrics. */
        padding: 0;
        border: none;
         
        /* Content */
        content: attr(data-pullquote);
         
        /* Pull out to the right, modular scale based margins. */
        float: right;
        width: 320px;
        margin: 12px -140px 24px 36px;
         
        /* Baseline correction */
        position: relative;
        top: 5px;
         
        /* Typography (30px line-height equals 25% incremental leading) */
        font-size: 23px;
        line-height: 30px;
    }
     
    .pullquote-adelle:before {
        font-family: "adelle-1", "adelle-2";
        font-weight: 100;
        top: 10px !important;
    }
     
    .pullquote-helvetica:before {
        font-family: "Helvetica Neue", Arial, sans-serif;
        font-weight: bold;
        top: 7px !important;
    }
     
    .pullquote-facit:before {
        font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
        font-weight: bold;
        top: 7px !important;
    }
    
    

    public by strykerraven  188253  7  5  1

    WordPress safely defining and executing functions

    Handy safe way to include functions in your WordPress Themes functions.php file. This is even more useful if you are using a child theme and don't want to conflict with functions already defined by the parent theme. Even better; These functions can be executed within the same if(function_exists()) block that defines them creating a neater to manage
    <?php
    
    // Lets get rid of the versioning on static .js and .css files.
    // It looks tacky anyway for static files.
    
    	/**
    	 * Strips Version query strings
    	 * @param type $src
    	 * @return type
    	 */
    	if(!function_exists('remove_css_js_versions')){ // if the function doesnt exist then...
    		function remove_css_js_versions($src){ // define the function
    			return remove_query_arg('ver', $src); // call built-in wordpress function to remove query named "ver" from whatever is passed as $src
    		}
    		add_filter('script_loader_src', 'remove_css_js_versions'); // Pass a hook as $src for js to function listed above named "remove_css_js_versions"
    		add_filter('style_loader_src', 'remove_css_js_versions'); // Pass a hook as $src for css to function listed above named "remove_css_js_versions"
    	} // All scripts and styles will be filtered to have ?ver=1.2.3 stripped from urls. Function defined and executed in same if() statement.
    
      /**
      * Need to debug? Instead of just using print_r($array) you just do preprint_r($array)
      * the array will be output neatly instead of wrapped and messy.
      */
    	if(!function_exists('preprint_r')){
    		function preprint_r($val){
    			echo '<pre>' . PHP_EOL;
    			print_r($val) . PHP_EOL;
    			echo '</pre>' . PHP_EOL;
    		}
    	}
    	
    	/** Remove the WP Icon (Menu) from profile and admin pages. */
    		if(!function_exists('remove_wp_logo')){
      		function remove_wp_logo($wp_admin_bar){
      			$wp_admin_bar->remove_node('wp-logo');
      		}
      		add_action('admin_bar_menu', 'remove_wp_logo', 33);
      	}
      	
    /**
    	 * Wordpress Login Page fixes. By default WordPress shows its logo on your login pages and links to its own site.
    	 * A visitor logging into your site don't need this potential roadblock so lets show WordPress that we mean business!
    	 */
    	# Fix Login Page WordPress URL
    	if(!function_exists('fix_wp_login_img_url')){
    		function fix_wp_login_img_url($url){
    			return get_bloginfo('url');
    		}
    		add_filter('login_headerurl', 'fix_wp_login_img_url');
    	}
    
    	# Fix Login Page WordPress Title (Text displayed on hover defaults to Powered By WordPress)
    	if(!function_exists('fix_wp_login_img_title')){
    		function fix_wp_login_img_title($title){
    			return get_bloginfo('description');
    		}
    		add_filter('login_headertitle', 'fix_wp_login_img_title');
    	}
    
    	/**
    		Change Login Page WordPress Logo, You will need to update path and point to a valid image.
    		WordPress adds this with a CSS background image for your anchor link. It first applys a PNG and then a SVG override if your browser is modern and supports svg
    		In your themes custom stylesheet you can change default Wordpress image by supplying a new background image:
    
    		.login h1 a {
    			background-image: none,url(images/your_image.png);
    		}
    
    		Hint: WordPress uses an 64x64 image but you can adapt size to your need. You might want to use SVG like WordPress did because it will scale best at any resolution.
    
    	 */
    
    	/**
    	 * Simple Actions that use wp_head hook to cleanup WP header Junk/Bloat
    	 * that is included with WordPress by default.
    	 */
    	remove_action('wp_head', 'wp_generator');
    	remove_action('wp_head', 'rsd_link');
    	remove_action('wp_head', 'wlwmanifest_link');
    	remove_action('wp_head', 'wp_shortlink_wp_head');            
    	
    	
    	?>

    public by Github  57768  1  3  0

    CSS3 Box Shadow, only top/right/bottom/left and all

    CSS3 Box Shadow, only top/right/bottom/left and all: box-shadow.html
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Box Shadow</title>
    		
    		<style>
    			.box {
    				height: 150px;
    				width: 300px;
    				margin: 20px;
    				border: 1px solid #ccc;
    			}
    			
    			.top {
    				box-shadow: 0 -5px 5px -5px #333;
    			}
    			
    			.right {
    				box-shadow: 5px 0 5px -5px #333;
    			}
    			
    			.bottom {
    				box-shadow: 0 5px 5px -5px #333;
    			}
    			
    			.left {
    				box-shadow: -5px 0 5px -5px #333;
    			}
    			
    			.all {
    				box-shadow: 0 0 5px #333;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box top"></div>
    		<div class="box right"></div>
    		<div class="box bottom"></div>
    		<div class="box left"></div>
    		<div class="box all"></div>
    	</body>
    </html>
    
    
    

    public by micurs  2768  2  9  7

    Execute javascript code at the end of a CSS transition

    Using JQuery you can easily bind a function to any event. CSS transitions on a given element trigger different event depending on the browser. You can capture all or write a small function that select the one working on the current browser. Here is how (using typescript and underscore):
    function getBrowserTransitionEvent( el : JQuery ) : string {
      var transitions = [ 
        { name: 'transition', value: 'transitionend' },
        { name: 'OTransition', value: 'oTransitionEnd' },
        { name: 'MozTransition', value: 'transitionend' },
        { name: 'WebkitTransition', value: 'webkitTransitionEnd' } ];
      var HTMLElement e = el.get();
      var t = _.find< { name: string; value: string }>( transitions , 
          (t) => e.style[t.name] !== undefined);
      return t !== undefined ? t.value : '';
    }
    
    
    // Here is how to use this:
    $('#myElement').bind( getBrowserTransitionEvent($('#myElement')),
      function() {
        alert('CSS transision is complete');
      });

    public by LongBeard  3386  2  4  1

    Fancy CSS3 Pull-Quotes

    Fancy CSS3 Pull-Quotes: fancyPullQuotes.css
    .has-pullquote:before {
        /* Reset metrics. */
        padding: 0;
        border: none;
         
        /* Content */
        content: attr(data-pullquote);
         
        /* Pull out to the right, modular scale based margins. */
        float: right;
        width: 320px;
        margin: 12px -140px 24px 36px;
         
        /* Baseline correction */
        position: relative;
        top: 5px;
         
        /* Typography (30px line-height equals 25% incremental leading) */
        font-size: 23px;
        line-height: 30px;
    }
     
    .pullquote-adelle:before {
        font-family: "adelle-1", "adelle-2";
        font-weight: 100;
        top: 10px !important;
    }
     
    .pullquote-helvetica:before {
        font-family: "Helvetica Neue", Arial, sans-serif;
        font-weight: bold;
        top: 7px !important;
    }
     
    .pullquote-facit:before {
        font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
        font-weight: bold;
        top: 7px !important;
    }
    
    

    public by arkanoid  2051  1  6  4

    A useful LESS mixin to enable animated transition on a HTML element

    This simple less mixin enable animated transitions on all properties of a HTML element.
    .animate( @duration: 0.4s ) {
      -moz-transition-property: all;
      -o-transition-property: all;
      -webkit-transition-property: all;
      transition-property: all;
      -moz-transition-duration: @duration;
      -o-transition-duration: @duration;
      -webkit-transition-duration: @duration;
      transition-duration: @duration;
      -moz-transition-delay: 0.1s;
      -o-transition-delay: 0.1s;
      -webkit-transition-delay: 0.1s;
      transition-delay: 0.1s;
      -moz-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      -webkit-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out;
    }

    public by Fresh-Dev  2515  3  3  0

    CSS3 Gradients Template

    CSS3 Gradients Template: css3GradientsTemplate.cs
    #colorbox {
        background: #629721;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
        background-image: -webkit-linear-gradient(top, #83b842, #629721);
        background-image: -moz-linear-gradient(top, #83b842, #629721);
        background-image: -ms-linear-gradient(top, #83b842, #629721);
        background-image: -o-linear-gradient(top, #83b842, #629721);
        background-image: linear-gradient(top, #83b842, #629721);
    }
    
    

    public by wolke  1945  1  6  1

    html-Image like scaling fullsize background-image

    /* http://css-tricks.com/perfect-full-page-background-image/
    Works in:
        Any version of good browsers: Safari / Chrome / Opera / Firefox
        IE 6: Borked - but probably fixable if you use some kind of fixed positioning shim
        IE 7/8: Mostly works, doesn't center at small sizes but fills screen fine
        IE 9: Works
    */
    
    img.body-bg-img {
    	/* Set rules to fill background */
    	min-height: 100%;
    	min-width: 1024px;
    
    	/* Set up proportionate scaling */
    	width: 100%;
    	height: auto;
    
    	/* Set up positioning */
    	position: fixed;
    	top: 0;
    	left: 0;
    }
    
    /* Specific to this particular image */
    @media screen and (max-width: 1024px) { 
    	img.body-bg-img {
    		left: 50%;
    		margin-left: -512px;   /* 50% */
    	}
    }
    
    

    external by Jewel Ahmed  492  0  3  0

    WordPress Contact form 7 [Plugins] Nice css3 styles

    WordPress Contact form 7 [Plugins] Nice css3 styles: wp-contact-form-7-style
    CSS
    /*Contact Form 7 CSS Support*/
    span.wpcf7-not-valid-tip{display: none !important; }
    div.wpcf7 .wpcf7-not-valid{ border: 1px solid #F00; margin: 0; }
    div.wpcf7-validation-errors{ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ margin: 0; padding: 10px; color: #c4690e; background: #fffdf3; text-align: center; border: 1px solid #e6bf4a; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px;}
    div.wpcf7 .wpcf7-not-valid { box-shadow: 0 0 6px rgba(255,0,0,0.4); } 
    .your-message textarea{ width:100%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ }
    div.wpcf7-mail-sent-ok {  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ margin: 0; color: #5f9025; background: #ebf6e0; border: 1px solid #b3dc82; padding: 10px; text-align: center;  border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px; }
    div.wpcf7-mail-sent-ng, div.wpcf7-spam-blocked {  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;    /* Firefox, other Gecko */ box-sizing: border-box;         /* Opera/IE 8+ */ margin: 0; padding: 10px; background: #ffe9e9; color: #d04544; border: 1px solid #e7a9a9; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 12px; text-align: center;}
    .wpcf7-form-control-wrap input[type=email]:focus, .wpcf7-form-control-wrap input[type=text]:focus, .wpcf7-form-control-wrap input[type=text]:focus, .wpcf7-form-control-wrap textarea:focus{ border:1px solid #CCC; box-shadow:none; border-color: rgba(82, 168, 236, 0.8); outline: 0;
        outline: thin dotted \9;
        /* IE6-9 */
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
                -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
                    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }
    .wpcf7-form-control-wrap input[type=email]:focus, .wpcf7-form-control-wrap input[type=text]:focus, .wpcf7-form-control-wrap textarea:focus,.wpcf7-not-valid, div.wpcf7-validation-errors, div.wpcf7-mail-sent-ok, div.wpcf7-mail-sent-ng, div.wpcf7-spam-blocked { transition : border 1000ms ease-out;  -webkit-transition : border 1000ms ease-out;  -moz-transition : border 1000ms ease-out; -o-transition : border 1000ms ease-out; }
    
    
    • Public Snippets
    • Channels Snippets