and to change slides. 2 for comments. estelle.github.com/CSS

CSS: Other Features

Border Images

  • Border Images
    • border-image shorthand
    • border-image-source
    • border-image-slice
    • border-image-width
    • border-image-outset
    • border-image-repeat
    • Putting it all together
  • Web performance
  • Multi column layout
    • column-count
    • column-fill
    • column-rule
      • column-rule-color
      • column-rule-style
      • column-rule-width
    • column-span
    • column-width
    • columns
    • Related Properties
      • break-after
      • break-before
      • break-inside
      • orphans
      • widows
  • Art direction
  • Cursors
  • Other features

Border Images

What is Border Image

border-image shorthand property

Shorthand for border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat. Omitted sub-values are set to initial.

<source> <slice> / <width> / <outset> <repeat>
border-image-source
The source image.
border-image-slice
The dimensions for slicing the source image into regions.{1,4}
border-image-width
The width of the border image.{1,4}
border-image-outset
The distance of the border image from the element's outside edge. Up to four values may be specified. {1,4}
border-image-repeat
Defines how the top and bottom and left and right edge regions of the source image are adjusted to fit the dimensions of the border image.{1,2}

Browser support: border-image property

Open

border-image-source property

Sets the source image used to create the border image.

none | <image>

The image type can be any of the image types we covered in the images section

border: 10px solid; border-image-source: url(img/dots.png);

No border image will appear if there is no border width set either thru border-width or border-image-width, described shortly.

border-image-slice property

Divides the background image file into regions. These regions form the components of an element's border image.

<number-percentage>{1,4} && fill?

The slicing process creates nine regions in total: four corners, four edges, and a middle region. Four slice lines, set a given distance from their respective sides, control the size of the regions.

values{1,4}
The edge offset in pixels or percentages for raster images and coordinates for vector images. For vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.
fill
Preserves the middle image region and displays it like a background image, but stacked above the actual background. Its width and height are sized to match the top and left image regions, respectively.

border-image-slice property

border: 10px solid; border-image-source: url(img/dots.png); border-image-slice: 20 fill;

border-image-width property

Sets the width of an element's border image.

<length-percentage> | <number> | auto {1,4}

If this property's value is greater than the element's border-width, the border image will extend beyond the padding (and/or content) edge.

Takes up to four values, in TRouBLe order*

<length-percentage>
Defines the width of the border, like border-width. Percents are supported, and are relative to the border image offsets. Can't be negative.
<number>
Unitless multiple of the corresponding border-width. Can't be negative.
auto
Same as border-image-slice, or border-width if border-image-slice dimensions weren't defined.

* TRouBLe order as described in border, padding, and margin

border-image-width property

border: 10px solid; border-image-source: url(img/dots.png); border-image-slice: 20px; border-image-width: 20 fill;

border-image-outset property

The border-image-outset CSS property sets the distance by which an element's border image is set out from its border box.

 <length> | <number> {1,4}

Takes up to four values, in TRouBLe order*

Either takes a <length> dimension, or the number is a multiple of the element's corresponding border-widths.

border-width: 1em 2px 0 1.5rem;
border-image-outset: 2;
border-image-outset: 2em 4px 0 3rem

The parts of the border image that are rendered outside the element's border box with border-image-outset do not trigger overflow scrollbars and don't capture mouse events

* TRouBLe order as described in border, padding, and margin

border-image-outset property

don't see all of me? Maybe add a margin! Outset doesn't impact box model. But takes up space like outline and box-shadow.

border-image-repeat property

Defines how the edge regions of the image (the non corner parts) are handled in filling those regions.

stretch | repeat | round | space {1,2}
stretch
Middle parts are stretched to fill the borders between each corner.
repeat
Middle parts are tiled (repeated) to fill the borders between each corner. A tile may be clipped to fit.
round
Middle parts are tiled (repeated) to fill the borders between each corner. Tiles may be stretched to fit.
space
Middle parts are tiled (repeated) to fill the borders between each corner. Not tile will be clipped or stretched. Rather, space will be distributed between tiles if necessary.

border-image-repeat property

Change the border-image-repeat value to see the different effect. Edit this text to grow/shrink this element.

border image recap

border-image: source || slice / width / outset  || repeat;
border-style: 
border-image-source: none | url() | <image>
border-image-slice: <number> | XX% {1,4} && fill
border-image-width: <length> | XX% | <number> | 1 | auto {1,4}
border-image-outset: <length> | <number> {1,4}
border-image-repeat: stretch | repeat | round | space{1,2}
  • Syntax for non-prefixed differs
  • Must also declare border-style
  • Declaring border overrides it, but not any of the long-hand properties
  • Border image tool
  • border-image browser support

border-image


<div id="border-image">

Play with border-image

Try it out

Web Performance

isolation property

Determines whether an element must create a new stacking context.

auto | isolate

Use case: Prevent elements from blending with their backdrops.

auto
A new stacking context is created only if one of the properties applied to the element requires it.
isolate
A new stacking context must be created. Also prevents an element from blending into other elements that are in the backdrop.

contain property

Allows you to say an element and its contents are, as much as possible, independent of the rest of the document tree.

none | strict | content |  size | layout | style | paint

Enables the browser to recalculate layout, style, paint, and size for a limited area of the DOM and not the entire page.

contain: size paint;
none
Element renders as normal, with no containment applied.
strict
All containment rules except style are applied. Same as contain: size layout paint;.
content
All containment rules except size and style are applied to the element. Same as contain: layout paint.
size
Element can be sized without reflowing its descendants. No need to check them for size changes.
layout
Nothing outside the element may affect its internal layout, and nothing inside the element may effect the external layout.
style
For properties that can effect more than just an element and its descendants, those effects don't escape the containing element.
paint
Descendants of the element don't display outside its bounds. If an element is off-screen or otherwise not visible, its descendants are also guaranteed to not be visible.

paint, strict and content creates a new stacking context, a new block formatting context and, new containing blocks for the descendants which position property is absolute or fixed.

GPU accelerants

Properties that will lead to compositing include:

  • 3D transforms (transform: translateZ(), rotate3d(), etc.)
  • animating transform and opacity
  • position: fixed
  • will-change:
  • filter:

will-change property

Hints how an element is expected to change so browser can optimize for change before an element is happens. Can increase the responsiveness of a page by doing expensive work before its required.

auto | scroll-position | contents | <ident>
auto
Tells the browser "You do you", which it was going to do anyway.
scroll-position
Tells the browser "The scroll position will change or be animated soon"
contents
Tells the browser "something about contents will animate or change soon."
<ident>
A property or several properties that will animate or change soon. A shorthand indicates that all the longhands will participate.
Can't be set to: unset, initial, inherit, will-change, auto, scroll-position, or contents.

Chromes establishes a new compositing layer or a new stacking context for each element with this property set to anything but auto.

  • Avoid using!
  • Don't apply will-change to too many elements.

Preventing render blocking

Browser blocks rendering until all styles are parsed. It does not block on styles it knows it will not use.

  • Use media queries so it knows when to block.
  • Move not-immediately used styles, such as print styles, into separate files.
  • This makes 'needed' CSS file much smaller
<link rel="stylesheet" href="styles.css"> <!-- blocking -->
<link rel="stylesheet" href="print.css" media="print"> <!-- not blocking --> 
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- not blocking on large screens -->

Browser does download not-needed-now stylesheets, but doesn't render block. By separating out the CSS into multiple files, the main render-blocking file is much smaller reducing the time that rendering is blocked.

Selector performance

There are lower hanging fruit!

Optimize a single image. You've saved more bytes, times, and CPU than micromanaging selectors

Allegedly, there is the order
ID, e.g. #header
Class, e.g. .promo
Type, e.g. div
Adjacent sibling, e.g. h2 + p
Child, e.g. li > ul
Descendant, e.g. ul a
Universal, i.e. *
Attribute, e.g. [type=”text”]
Pseudo-classes/-elements, e.g. a:hover

Read Performance of CSS Selectors is Still Irrelevant

Multi Column Layout

Browser support: Columns

Open

Columns

column-count: 1;      
column-width: 10em;   
column-rule: 1px solid #bbb;
column-gap: 2em;      

Adipisicing rump nostrud exercitation turkey, bresaola deserunt ullamco beef ribs pork loin ball tip pig pork belly nisi. Cillum sunt officia deserunt, beef aliqua ham ut t-bone sed ut consequat shoulder. Nostrud excepteur biltong non, fatback salami incididunt beef cupidatat occaecat.

Reprehenderit ham hock labore tri-tip chuck, excepteur ut. Meatball sint enim beef ribs, mollit laborum flank commodo fatback pariatur tail rump eiusmod spare ribs dolore. Ut minim qui, tongue eu short ribs pancetta excepteur incididunt culpa consequat pastrami magna chuck. Flank sunt sint, occaecat ut adipisicing labore turkey laboris in magna.

Chicken bacon meatloaf minim meatball salami sunt spare ribs.

Bacon sed tail, pork loin pariatur meatloaf hamburger exercitation corned beef shank ex esse sirloin qui beef ribs. Consectetur anim corned beef, cupidatat ex enim tempor. Pariatur consectetur ad, enim ut quis consequat aliquip exercitation jowl tenderloin ham dolore.

Fugiat excepteur aliqua, cow dolor swine shoulder elit tri-tip shankle. Irure consectetur cow labore, cupidatat exercitation ea jerky ham officia dolore tongue eu aliqua. Ham hock irure beef ribs non, flank sausage eiusmod ham short loin nostrud.

Multi Column Layout Properties

column-count:
column-width:
columns: <min-column-width> <max-column-cound>
column-fill: auto | balance;
column-gap: normal | length;
column-span: none | all;
column-rule-color:
column-rule-style: <border-style>
column-rule-width:
column-rule:
break-after
break-before
break-inside
orphans
widows

column-count property

"max-count" for columns. Sets the maximum number of columns in a multi-column layout.

<integer> | auto

The number of columns will not exceed the number listed, but may be fewer, if the width of each column would be less than the minimum width set by the column-width property

I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.

Five score years ago, a great American, in whose symbolic shadow we stand today, signed the Emancipation Proclamation. This momentous decree came as a great beacon light of hope to millions of Negro slaves who had been seared in the flames of withering injustice. It came as a joyous daybreak to end the long night of captivity.

But one hundred years later, the Negro still is not free. One hundred years later, the life of the Negro is still sadly crippled by the manacles of segregation and the chains of discrimination. One hundred years later, the Negro lives on a lonely island of poverty in the midst of a vast ocean of material prosperity. One hundred years later, the Negro is still languished in the corners of American society and finds himself in exile in his own land. So we have come here today to dramatize an shameful condition.

In a sense we've come to our nation's Capital to cash a check. When the architects of our republic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir.

column-width property

"min-width" for columns. Sets the ideal or 'minimum' column width in a multi-column layout.

<length> | auto

If the container is narrower, the single column's width will be 100%. Otherwise, it will have up to the column-count number of columns, as long as each is at least column-width wide.

This note was a promise that all men, yes, black men as well as white men, would be guaranteed the unalienable rights of life, liberty, and the pursuit of happiness.

It is obvious today that America has defaulted on this promissory note insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check; a check which has come back marked "insufficient funds."

But we refuse to believe that the bank of justice is bankrupt. We refuse to believe that there are insufficient funds in the great vaults of opportunity of this nation. So we have come to cash this check- a check that will give us upon demand the riches of freedom and the security of justice.

We have also come to this hallowed spot to remind America of the fierce urgency of now. This is no time to engage in the luxury of cooling off or to take the tranquilizing drug of gradualism.

Now is the time to make real the promises of democracy. Now is the time to rise from the dark and desolate valley of segregation to the sunlit path of racial justice. Now is the time to lift our nation from the quicksands of racial injustice to the solid rock of brotherhood. Now is the time to make justice a reality for all of God's children.

columns shorthand property

sets the column width and column count of an element.

<max-column-count> <min-column-width>

It would be fatal for the nation to overlook the urgency of the moment. This sweltering summer of the Negro's legitimate discontent will not pass until there is an invigorating autumn of freedom and equality. Nineteen sixty-three is not an end, but a beginning. Those who hope that the Negro needed to blow off steam and will now be content will have a rude awakening if the nation returns to business as usual. There will be neither rest nor tranquility in America until the Negro is granted his citizenship rights. The whirlwinds of revolt will continue to shake the foundations of our nation until the bright day of justice emerges.

But there is something that I must say to my people who stand on the warm threshold which leads into the palace of justice. In the process of gaining our rightful place we must not be guilty of wrongful deeds. Let us not seek to satisfy our thirst for freedom by drinking from the cup of bitterness and hatred. We must forever conduct our struggle on the high plane of dignity and discipline. We must not allow our creative protest to degenerate into physical violence. Again and again we must rise to the majestic heights of meeting physical force with soul force.

The marvelous new militancy which has engulfed the Negro community must not lead us to a distrust of all white people, for many of our white brothers, as evidenced by their presence here today, have come to realize that their destiny is tied up with our destiny. And they have come to realize that their freedom is inextricably bound to our freedom. We cannot walk alone.

column-fill property

Sets how the contents are balanced when broken into multiple columns. Does it make all the columns equally tall? Or fill the first column first.

auto | balance | balance-all

When height limit is set, should it balance or fill column 1 first? If height is auto, will it ever fill up a second column?

auto
Columns are filled sequentially. Content takes up only the room it needs.
balance
Content is equally divided between columns. In paged media, only the last page is balanced.
balance-all
Content is equally divided between columns. In paged media, all pages are balanced.

column-fill property

And as we walk, we must make the pledge that we shall march ahead. We cannot turn back. There are those who are asking the devotees of civil rights, "When will you be satisfied?"

We can never be satisfied as long as the Negro is the victim of the unspeakable horrors of police brutality.

We can never be satisfied as long as our bodies, heavy with the fatigue of travel, cannot gain lodging in the motels of the highways and the hotels of the cities.

We cannot be satisfied as long as the Negro's basic mobility is from a smaller ghetto to a larger one.

We can never be satisfied as long as our chlidren are stripped of their selfhood and robbed of their dignity by signs stating "for whites only."

column-gap property

Sets the size of the gap (gutter) between an element's columns.

normal | <length-percentage>

Normal is 1em.

Column-gap is now specified in Box Alignment, it may be used in Multi-column, Flexible Box, and Grid layouts. (supported in FF)

column-gap property

We cannot be satisfied as long as a Negro in Mississippi cannot vote and a Negro in New York believes he has nothing for which to vote.

No, no, we are not satisfied, and we will not be satisfied until justice rolls down like waters and righteousness like a mighty stream.

I am not unmindful that some of you have come here out of great trials and tribulations. Some of you have come fresh from narrow jail cells. Some of you have come from areas where your quest for freedom left you battered by the storms of persecution and staggered by the winds of police brutality. You have been the veterans of creative suffering. Continue to work with the faith that unearned suffering is redemptive.

Go back to Mississippi, go back to Alabama, go back to South Carolina, go back to Georgia, go back to Louisiana, go back to the slums and ghettos of our northern cities, knowing that somehow this situation can and will be changed. Let us not wallow in the valley of despair.

I say to you today, my friends, so even though we face the difficulties of today and tomorrow, I still have a dream. It is a dream deeply rooted in the American dream.

I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident; that all men are created equal."

column-span property

Makes it possible for an element to span across all columns when its value is set to all.

none | all
none
Deafault. The element does not span multiple columns.
all
The element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appears. The element establishes a new block formatting context.

column-span property

I have a dream that one day on the red hills of Georgia the sons of former slaves and the sons of former slave owners will be able to sit down together at the table of brotherhood.

I have a dream that one day even the state of Mississippi, a state sweltering with the heat of injustice, sweltering with the heat of oppression, will be transformed into an oasis of freedom and justice.

I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by the content of their character.

I have a dream today.

I have a dream that one day down in Alabama, with its vicious racists, with its governor having his lips dripping with the words of interposition and nullification, that one day right down in Alabama little black boys and black girls will be able to join hands with little white boys and white girls as sisters and brothers.

I have a dream today.

I have a dream that one day every valley shall be exhalted, every hill and mountain shall be made low, the rough places will be made plain, and the crooked places will be made straight, and the glory of the Lord shall be revealed, and all flesh shall see it together.

column-rule shorthand property

sets the width, style, and color of the line drawn between columns in a multi-column layout.

<rule-width> <rule-style> <rule-color>

Shorthand for column-rule-width, column-rule-style, and column-rule-color

column-rule-width
Same sytnax as a single valued border-width, with values being <length> | thin | medium | thick. Sets the width of the line drawn between columns.
column-rule-style
Same sytnax as a single valued border-style, with values being none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset. Sets the style of the line drawn between columns
column-rule-color
Same sytnax as a single valued border-color, or just color, with values being any valid color.
column-rule-width: 45px;
  column-rule-style: ridge;
  column-rule-color: var(--colorpop);
column-rule: 45px ridge var(--colorpop);

column-rule shorthand property

This is our hope. This is the faith that I will go back to the South with. With this faith we will be able to hew out of the mountain of despair a stone of hope. With this faith we will be able to transform the jangling discords of our nation into a beautiful symphony of brotherhood.

With this faith we will be able to work together, to pray together, to struggle together, to go to jail together, to stand up for freedom together, knowing that we will be free one day.

This will be the day when all of God's children will be able to sing with new meaning, "My country 'tis of thee, sweet land of liberty, of thee I sing. Land where my fathers died, land of the Pilgrims' pride, from every mountainside, let freedom ring."

And if America is to be a great nation, this must become true. So let freedom ring from the prodigious hilltops of New Hampshire. Let freedom ring from the mighty mountains of New York. Let freedom ring from the heightening Alleghenies of Pennsylvania.

Let freedom ring from the snow-capped Rockies of Colorado. Let freedom ring from the curvaceous slopes of California. But not only that; let freedom ring from the Stone Mountain of Georgia. Let freedom ring from Lookout Mountain of Tennessee.

Let freedom ring from every hill and molehill of Mississippi. From every mountainside, let freedom ring.

And when this happens, and when we allow freedom ring, when we let it ring from every village and every hamlet, from every state and every city, we will be able to speed up that day when all of God's children, black men and white men, Jews and gentiles, Protestants and Catholics, will be able to join hands and sing in the words of the old Negro spiritual, "Free at last! Free at last! Thank God Almighty, we are free at last!"

Martin Luther King's "I have a dream speech: August 28 1963

columns

Column related properties

Element boundaries are affected by three properties: the break-after value of the previous element, the break-before value of the next element, and it's own break-inside value.

  • break-after
  • break-before
  • break-inside
  • orphans
  • widows

break-after property

Sets how page, column, or region breaks should behave after a generated box. If there is no generated box, the property is ignored.

auto | avoid | always | all | avoid-page | page | left 
right | recto | verso | avoid-column | column 
 avoid-region | region

break-before property

sets how page, column, or region breaks should behave before a generated box. If there is no generated box, the property is ignored.

auto | avoid | always | all | avoid-page 
page | left | right | recto | verso 
avoid-column | column | avoid-region | region

break-inside property

how page, column, or region breaks should behave inside a generated box.

auto | avoid | avoid-page | avoid-column | avoid-region

If there is no generated box, these properties are ignored.

Values

Generic break values

auto
Allows, but does not force, any break (page, column, or region) to be inserted right after the principal box.
avoid
Avoids any break (page, column, or region) from being inserted right after the principal box.
always
Forces a page break right after the principal box. The type of this break is that of the immediately-containing fragmentation context. If we are inside a multicol container then it would force a column break, inside paged media (but not inside a multicol container) a page break.
all
Forces a page break right after the principal box. Breaking through all possible fragmentation contexts. So a break inside a multicol container, which was inside a page container would force a column and page break.

Page break values

avoid-page
Avoids any page break right after the principal box.
page
Forces a page break right after the principal box.
left
Forces one or two page breaks right after the principal box, whichever will make the next page into a left page.
right
Forces one or two page breaks right after the principal box, whichever will make the next page into a right page.
recto
Forces one or two page breaks right after the principal box, whichever will make the next page into a recto page. (A recto page is a right page in a left-to-right spread or a left page in a right-to-left spread.)
verso
Forces one or two page breaks right after the principal box, whichever will make the next page into a verso page. (A verso page is a left page in a left-to-right spread or a left right in a right-to-left spread.)

Column break values

avoid-column
Avoids any column break right after the principal box.
column
Forces a column break right after the principal box.

Region break values

avoid-region
Avoids any region break right after the principal box.
region
Forces a region break right after the principal box.

orphans property

Sets the minimum number of lines in a block container that must be shown at the bottom of a page, region, or column.

<integer>

widows property

Sets the minimum number of lines in a block container that must be shown at the top of a page, region, or column.

<integer>

Exercise

Open the I have a Dream

Make the

  • line height
  • font face
  • justification
  • spacing
  • Make the blockquotes and headings stand out.

Try to do it without looking at the example a few slides back.

Lists

Related Properties

  • unordered
    1. ordered
    2. ordered
  • unordered
list-style-type
Sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.
list-style-position
Sets whether the bullets appear inside the list items, or outside them before the start of each item.
list-style-image
Allows you to use a custom image for the bullet, rather than a simple square or circle.

The markup

<ul>
  <li>
    unordered
    <ol>
      <li>ordered</li>
      <li>ordered</li>
    </ol>
  </li>
  <li>unordered</li>
</ul>

list-style-type

Sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.

<counter-style> | <string> | none

The <li> has a default value of display: list-item. The list-style-type property can be applied to all display: list-item.

Inherited. Set on <li>, <ol> or <ul>.

list-style-type

For ordered lists (and counters)

  • decimal
  • cjk-decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-alpha
  • lower-latin
  • upper-alpha
  • upper-latin
  • arabic-indic
  • armenian
  • bengali
  • cambodian
  • cjk-earthly-branch
  • cjk-heavenly-stem
  • cjk-ideographic
  • devanagari
  • ethiopic-numeric
  • georgian
  • gujarati
  • gurmukhi
  • hebrew
  • hiragana
  • hiragana-iroha
  • japanese-formal
  • japanese-informal
  • kannada
  • katakana
  • katakana-iroha
  • khmer
  • korean-hangul-formal
  • korean-hanja-formal
  • korean-hanja-informal
  • lao
  • lower-armenian
  • malayalam
  • mongolian
  • myanmar
  • oriya
  • persian
  • simp-chinese-formal
  • simp-chinese-informal
  • tamil
  • telugu
  • thai
  • tibetan
  • trad-chinese-formal
  • trad-chinese-informal
  • upper-armenian

list-style-position

Sets whether the bullets appear inside the list items, or outside them before the start of each item.

inside | outside
inside
The ::marker is the first element among the list item's contents.
outside
The ::marker is outside the principal blockbox.

list-style-image

Allows you to use a custom image for the bullet, rather than a simple square or circle.

<url> | none

User Agent

li {
    display: list-item;
    text-align: match-parent;
}
ol {
    list-style-type: decimal;
}
ul, ol, menu {
    counter-reset: list-item;
}
ul, menu, dir {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
}
::marker {
    text-align: end;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

More art direction

background-blend-mode property

Sets how an element's background images should blend with each other and with the element's background color.

normal | multiply | screen | overlay | darken | lighten | color-dodge 
color-burn | hard-light | soft-light | difference | exclusion
hue | saturation | color | luminosity

Blending modes should be defined in the same order as the background-image property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.

background-blend-mode: screen, multiply;

background-blend-mode

  • color
  • color-burn
  • color-dodge
  • darken
  • difference
  • exclusion
  • hard-light
  • hue
  • lighten
  • luminosity
  • multiply
  • normal
  • overlay
  • saturation
  • screen
  • soft-light
  • darken, multiply
  • difference, overlay
  • luminosity, saturation
  • hue, screen
  • exclusion, soft-light

background-blend-mode

CSS Shapes

Photo: kristinausk

CSS Shapes 2

CSS Shapes with SVG Masking

CSS Shape Editor

CSS as the Solution

<input id="zip" type="tel" name="zipcode" class="masked" 
  placeholder="XXXXX" pattern="\d{5}" title="5-digit zip code">

progressively enhanced with JS to:

<label for="zip">Zip Code</label>
  <span class="shell">
    <span aria-hidden="true" id="zipMask"><i>123</i>XX</span>
    <input id="zip" type="tel" name="zipcode" pattern="\d{5}" 
    class="masked" title="5-digit zip code" maxlength="5" data-placeholder="XXXXX">
  </span>
Github Repo
<fieldset class="mgr" id="address">
<legend>Select an address to edit:</legend>
<div>
  <a class="backward" data-move="backward" data-mgr="shipping-addresses" hidden></a>
  <ul class="mgr-labels left0">
    <li>
      <label for="address1">
      Instart Logic<br/>
      US Headquarters<br/>
      450 Lambert Avenue<br/>
      Palo Alto, CA 94306
      </label>
    </li>
    <li>
      <label for="address2">
      Instart Logic<br/>
      India Office<br/>
      6th Floor , HM Vibha Towers<br/>
      Hosur Rd, Adugodi<br/>
      Bengaluru — 560029
      </label>
    </li>...
  </ul>
  <a class="forward" data-move="forward" data-mgr="shipping-addresses" hidden></a>
  </div>
  <ul id="addressradios" class="mgr-radios">
    <li>
      <input type="radio" name="shipping-addresses" data-value="0" id="address1" checked><span></span>
    </li>
    <li>
      <input type="radio" name="shipping-addresses" data-value="1" id="address2"><span></span>
    </li>...
  </ul>
  </fieldset>

Cursors

cursor property

Sets the type of cursor, if any, to show when the mouse pointer is over an element.

auto | default | none | context-menu | help | pointer 
progress | wait | cell | crosshair | text | vertical-text 
alias | copy | move | no-drop | not-allowed | <dir>-resize 
col-resize | row-resize | all-scroll | zoom-in | zoom-out 
grab | grabbing |  [ <url> [ <x> <<y> ]? , ]* 

Where <dir>-resize can be n-, ne-, nw-, s-, se-, sw-, w-, ew-, ns-, nesw-, or nwse-

If importing an image via url() it takes comma-separated URLS followed by one of the keywords above. Optionally, followed by a pair of space-separated x- and y- coordinates setting the cursor's hotspot relative to the top-left corner of the image.

cursor: url(hat.svg), url(hat.cur) 2 5, grabbing;

That said, don't use custom cursors.

Cursors

  • crosshair
  • default
  • help
  • move
  • e-resize
  • ne-resize
  • nw-resize
  • n-resize
  • se-resize
  • sw-resize
  • s-resize
  • w-resize
  • ns-resize
  • ew-resize
  • nesw-resize
  • nwse-resize
  • text
  • wait
  • progress
  • none
  • context-menu
  • cell
  • vertical-text
  • alias
  • copy
  • no-drop
  • not-allowed
  • col-resize
  • row-resize
  • all-scroll
  • zoom-in
  • zoom-out
  • grab
  • grabbing

Cursors

Other Stuff

pointer-events: none;

Can the element be clicked?!?!

.animatedElement {
  pointer-events: none;
}

Did you note that you could change the transforms examples even when the example was covering the code?

-webkit-user-modify

Related to contentEditable: Determines whether content of an element is editable. Deprecated

-webkit-user-modify: read-only | read-write | read-write-plaintext-only;
-moz-user-modify: read-only | read-write | write-only;

This deck used this for pasting without rich text features in -webkit- supporting browsers

read-only
The content is read-only.
read-write
The content can be read and written.
write-only (moz only)
The user is able to edit the content, but not to read it.
read-write-plaintext-only (webkit)
The content can be read and written, but any rich formatting of pasted text is lost.