public marks

PUBLIC MARKS from decembre with tag trick

August 2017

CSS - VARIABLE - Autoprefixing, with CSS variables! | Lea Verou

a neat trick one can do with CSS variables, precisely due to their dynamic nature. Let’s say you want to use a property that has multiple versions: an unprefixed one and one or more prefixed ones. In this example we are going to use clip-path, which currently needs both an unprefixed version and a -webkit- prefixed one, however the technique works for any property and any number of prefixes or different property names, as long as the value is the same across all variations of the property name. The first part is to define a --clip-path property on every element with a value of initial. This prevents the property from being inherited every time it’s used, and since the * has zero specificity, any declaration that uses --clip-path can override it. Then you define all variations of the property name with var(--clip-path) as their value: * { --clip-path: initial; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }

April 2017

TEXTARERA - TRICK - ADD LINK - How to type upside down text on Facebook

by 1 other (via)
(Copy & paste in browser on Facebook, Twitter, YouTube, MySpace, Yahoo, MSN, AOL, Bebo, Craigslist, Gmail, Word ...)

CSS - SVG - fill | CSS-Tricks

Another Use Case: The fill property is one of many reasons SVG is a much more flexible option than typical image files. Let's take icons, as an example. We might have the same set of icons but in two different color schemes. Typical image files (such as JPG, PNG and GIF) would require us to make two versions of each icon — one for each color scheme. SVG, on the other hand, allows us to paint the icons in using the CSS fill property: .icon { fill: black; } .icon-secondary { fill: orange; }

decembre's TAGS related to tag trick

browser +   css +   demo +   fill +   hack +   image +   link +   online +   prefix +   svg +   textarera +   variable +   youtube +