public marks

PUBLIC MARKS from decembre with tags example & css

2018

CSS - PRO TIPS - CSS element() function - [: -moz-element()]Vincent De Oliveira

element() brings CSS design to a new level, in an easily way. Few ideas that comes to my mind (some that I've already used since the last 4 years): - when you have to deal with duplicated content in advanced effects - live thumbnails of previous/next slides in a slideshow - live zoom over an image, for example in an e-commerce product page - animated background, using CSS Animations or by referencing a video, canvas or SVG - faking backdrop-filter or filter() - watermark with multiples backgrounds from Lea Verou idea - and anything you’re currently thinking of ;) Few things we can note: - prefixed for now in Firefox: -moz-element() - impact on rendering performance when using multiple reference. Not as bad as CSS filters, but still something you have to consider - there’s a CanIUse support page - Issue Chromium - Issue WebKit - No mention from IE Platform Status

CSS - CODEPEN - COLLECTION - A Look At Pseudo-Elements - a Collection by Franz on CodePen

A Look At Pseudo-Elements This collection contains many examples for different pseudo-elements. All examples were used in episode 15 of !important a show that explores web development through live websites and elegant designs. https://xotv.me/channels/22-important/vod_videos/767-important-slash-slash-episode-fifteen

CSS - TRICK - :not([class]) - - :not(s) | CSS-Tricks

(via)
Another useful one (especially when setting up defaults that you expect to be overridden by classes) is :not([class]). It only styles the element if it has no classes assigned to it at all. :)

2017

USERSTYLES - EXAMPLE - ss16 a Fresh attempt at (user)styling 4chan.... (2017)

ss16 - a self-centered, fresh attempt at (user)styling 4chan * * created on: February 11th, 2016 * last modified: May 16th, 2017 * 4chan X version: ccd0 1.13.89.3 / https://github.com/ccd0/4chan-x * created by: @saxamaphone69 * (loose) coding style: https://github.com/necolas/idiomatic-css * * in an attempt to make the style as user-friendly as possible, i will * comment most of the css to explain what it all does * * please leave any comments, suggestions, or feedback on github: * https://github.com/saxamaphone69/ss16 * */ /** * this userstyle utilises a lot of best practices * and sensible defaults inspired from a variety of * stylish and modern web frameworks and resources, mainly: * https://github.com/twbs/bootstrap */ /** * first thing we do, is we use web fonts from google! * this is so users aren't required to download fonts prior. * and of course, if you don't want to or don't like it, * delete or change it accordingly. we use roboto, roboto mono, * karla, and material icons. circular has been removed in the production * version of ss16 to not only keep the file size down, but also * to not have a font that i don't own the license for :^) */

CSS - CODE EXAMPLE - "Progress bar horizontal" qui varie suivant le scroll

In AlsaCreation : CODE EXAMPLE -" Progress bar horizonta"l qui varie suivant le scroll body { -moz-box-direction: normal; -moz-box-orient: vertical; background: #f3f3f3 none repeat scroll 0 0; color: #000; display: flex; flex-direction: column; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size: 1.6rem; min-height: 100vh; }

2016

2014

STY - USERSTYLES Rounded first and last tab - Themes and Skins for Browser - userstyles.org

A style I made for fun, to round the first tab top left corner, and new tab top right corner. A good demonstration of using child tokens

2013

CSS -EXAMPLES - CSS Cookbook — GeoServer 2.5.x User Manual

The CSS Cookbook is a collection of CSS “recipes” for creating various types of map styles. Wherever possible, each example is designed to show off a single CSS feature so that code can be copied from the examples and adapted when creating CSS styles of your own. Most examples are shared with the SLD Cookbook, to make a comparison between the two syntaxes immediate.

ICSS - Eric MEYER (TEST PAGES)

A fairly large collection of test files (from CSS1 to CSS3 )and are rarely if ever documented.