Category: CSS

A trick for blendy shadows

You can’t do this, but what you can do is apply the drop-shadow to a pseudo-element that is the same size and uses a multiply blend mode.

 

.above {
    position: absolute;
    background: green;
    width: 100px;
    height: 100px;
}

.above::before {
    box-shadow: 3pt 3pt 0 0 dodgerblue;
    mix-blend-mode: multiply;
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.below {
    position: absolute;
    top: 50px;
    left: 50px;

    width: 100px;
    height: 100px;

    background: red;
}
<div class="below">
</div>
<div class="above">
</div>

found here: https://stackoverflow.com/questions/52838406/apply-blend-mode-to-drop-shadow-only

Hello Child base CSS to use settings from panel.

/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/
/* Sections
 */
body {
    font-family: var(--e-global-typography-text-font-family),-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    color: var(--e-global-color-text);
    background-color: transparent;
}

/* Text-level semantics
 */
a {
    background-color: transparent;
    text-decoration: none;
    color: var(--e-global-color-accent); }
a:hover, a:active {
    color: var(--e-global-color-accent); }

button,
[type="submit"],
[type="button"] {
    color: var(--e-global-color-accent);
    border: 1px solid var(--e-global-color-accent);
    }

button:hover, button:focus,
[type="submit"]:hover,
[type="submit"]:focus,
[type="button"]:hover,
[type="button"]:focus {
    background-color: var(--e-global-color-accent);
}

Center that ish

position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

UL/OL with different colored bullets

  ol,ul{
    margin-left: 3.2em;
    ol,ul{
      margin-bottom: 0;
    }
  }
  ol{
    counter-reset: item; 
    li{
      list-style-type: none;
      &:before{
        margin-left: -1.2em;
        content: counter(item,decimal) ". ";
        counter-increment: item;
        color: @orange;
      }
    }
    ol{
      li{
        &:before{
          content: counter(item,lower-alpha) ". ";
        }
      }
    }
  }
  ul{    
    counter-reset: item; 
    li{
      list-style-type: none;    
      &:before{
        margin-left: -1.2em;
        margin-right: 0.5em;
        line-height: 0;
        content: "\26AB ";
        color: @orange;
      }
    }
    ul{
      li{
        &:before{
          content:"\25CB ";
        }
      }
    }
  }

Style test page

This is a block of body copy. This block of body copy is here to give an idea of what body copy might look like with regards to texture and style. This is the primary style for the website copy, and all other copy is a variable from this style. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Just so that we have a baseline, this is what some italic text would look like inline. This is how we will style bold text. And there are rare instances where we may include both bold and italic on one element. We will also want to link some pages to other pages. I don’t know why, but some people still have a fondness for underlining content. I find this odd.

This is a content H1 tag

H1 tags are useful for SEO maintenance, but should be used very sparingly. The primary H1 tag on any page should be the title, generated by WordPress.

This is a content H2 tag

Likewise, H2 tags should be used sparingly in copy. The primary H2 tag for any page should be the subtitle and/or the site title. However, there are times when content copy hold a major import and should be drawn out both visually and for SEO.

This is a content H3 tag

This is a content H4 tag

The H3 & H4 tags are your primary ways to differentiate body copy as important without overriding the SEO goodness built by your page title and subtitle. Use with gusto and good judgement.

This is a content H5 tag
This is a content H6 tag

The last two heading types, H5 & H6 are good fall-back differentiators. Often, H5 resembles bolded content and H6 resembles plain content. Keep in mind that both are block elements (they will go on their own line) and that they are informative to SEO.

Preformatted content is rarely used except in situations of documentation. It is primarily for setting
aside things like code to be executed and/or commands to be typed. Unlike standard content, it will not
automatically "break" at a certain line length and <strong>must</strong> have explicit line breaks inserted.

Blockquotes are a great way to set very specific content out as either a “pull” from the primary content or as a quote from a specific individual. These can be useful for both hierarchical and design reasons.

– Catherine OBrien

Sometimes it is useful to create a bullet list:

  • For brief information
    • And the sub-items of that information
  • For a visual break
  • To outline basics before going more in-depth
  • For an actual list of items

Sometimes, an ordered list is more appropriate:

  1. To outline specific steps to take in process
  2. Defining items in order of importance
  3. To create an old-school content outline
    1. In which case you may have subitems
  4. As a table of contents

As you can see, there are many options to consider when styling body content in WordPress, and many options to use.

Here is an export file to use to import this page into a WordPress install so that you don’t have to write all this up. It includes some fields that are specific to my code, but otherwise, you might find it useful.

Vertical lines in the background

adam. urg.

/* Centered Vertical Line - using CSS3 gradients */
.centered-vert-line(@midColor: #ccc, @width: 1px, @startColor: transparent, @endColor: transparent, @deg: 90deg) {
  background-image: -moz-linear-gradient(@deg, @startColor, @midColor, @endColor); // FF 3.6+
  background-image: -webkit-linear-gradient(@deg, @startColor, @midColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(@deg, @startColor, @midColor, @endColor); // Opera 11.10
  background-image: linear-gradient(@deg, @startColor, @midColor, @endColor); // Standard, IE10
  background-position: 50%;
  background-repeat: repeat-y;
  background-size: @width 100px;
 }

reverse arrows

<div id="lead-box" class="wrappers">
			<div class="bar"></div>
			​
			<div class="holder">
				<div class="row">
					<div class="large-12 medium-12 small-12 columns">
						<div>
							<h1>Enterprise<br>Healthcare<br>is not going to<br>fix itself</h1>
							<h4>The Enterprise Healthcare Cloud</h4>
							<a class="button main-cta" target="_blank" href="http://content.castlighthealth.com/castlight-demo.html?promosrc=website_banner">See a Demo</a>
						</div>
					</div>
				</div>
				<div id="promo-box" class="row" style="opacity: 1;">
					<div>
						<div class="large-6 medium-6 small-12 columns promo video">
							<a target="_blank" class="promoCTA" href="http://content.castlighthealth.com/managing-the-transition-to-a-new-benefits-design-on-demand-webinar.html?promosrc=website%20banner">
								<h6><span></span>Video</h6>
								<h4>Managing the transition to a new benefits design</h4>
								<span>Watch Now</span>
							</a>
						</div>
						<div class="large-6 medium-6 small-12 columns promo map">
							<a target="_blank" class="promoCTA" href="/distinctive-searches/">
								<h6><span></span>Interactive Map</h6>
								<h4>New analysis:  A Snapshot of US Workers’ Health Search Patterns</h4>
								<span>Learn more</span>
							</a>
						</div>
											</div>
				</div>
			</div>
		</div>
.bar {
    bottom: 5%;
    height: 30px;
    margin: 0 auto;
    position: absolute;
    width: 100%;
}
.bar > p:before, .bar > p:after {
    border-top: 30px solid transparent;
    content: "";
    height: 30px;
    position: absolute;
    top: 0;
    width: 0;
    z-index: -1;
}
.bar:before, .bar:after {
    border-bottom: 30px solid white;
    box-sizing: border-box;
    content: "";
    height: 0;
    position: absolute;
    top: 0;
}
.bar:before {
    border-right: 30px solid transparent;
    left: 0;
    width: 50%;
}
.bar:after {
    border-left: 30px solid transparent;
    right: 0;
    width: 50%;
}

FontAwesome for bullets hack

.entry-content ul li {
	list-style: none outside none;
	margin-bottom: .25em;
	margin-left: 0.25em;
	text-indent: -0.25em;
}
.entry-content ul li:before {
    font-family: 'FontAwesome';
    content: '\f0DA';
    margin:0 0.25rem 0 0;
    color: #666666;
}

Gravity forms CSS tricks

http://kevinshoffner.com/wordpress/tipstricks/custom-css-gravity-forms/

Here is a quick list of all of the built-in classes:

Checkboxes and Lists Fields

gf_list_2col

= 2 columned List

gf_list_3col

= 3 columned List

gf_list_4col

= 4 columned

gf_list_5col

= 5 columned

Two Columns of Text Fields side by side

gf_left_half

= The left column

gf_right_half

= The right column

Three Columns side by side

gf_left_third

= Left column

gf_middle_third

= Middle column

gf_right_third

= Right column

Some other miscellaneous styles

gf_scroll_text

= Gets a scroll box into place, for those long sections where you need to give your visitor lots of information
scrolling-text

gf_hide_ampm

= If you want to hide the AM/PM portion of the Time field

gf_list_inline

= Simpliar to the above gf_list classes, but just show up next to each other using the amount of space the content can use on each line, instead of making it fit within 2,3,4,5 columns.

gf_hide_charleft

= Do not display the amount of characters left / character counter

I’ve not found a great use for these, but they are available:

gf_list_height_25

= 25 pixels between list items

gf_list_height_50

= 50 pixels between list items

gf_list_height_75

= 75 pixels between list items

gf_list_height_100

= 100 pixels between list items

gf_list_height_125

= 125 pixels between list items

gf_list_height_150

= 150 pixels between list items

Handy HTML entities

 ►
 ▼

Others in this range also probably useful.