public marks

PUBLIC MARKS from decembre with tag css

September 2018

DEV - TUTORIAL - Scrimba - Scrimba is a powerful new way of learning code. Play around with the instructors code any time, right in the player.

Scrimba is a new way of teaching and learning how to code. We call it interactive code screencasts. Here’s why it's a great way of learning.

August 2018

CSS - DEMO - Button Switches with Checkboxes and CSS3 Fanciness

Button Switches with Checkboxes and CSS3 Fanciness Realistic-looking, css-only UI elements

JAVASCRIPT / CSS - DEMO - Scrolling Letters Animation | Codrops

A switching title effect where a fixed text element changes with an animation depending on the scroll position.The animations are powered by anime anime.js. We also use imagesLoaded for preloading the images and Charming.js for the handling the letter structure of the titles.

JAVASCRIPT - LIBRAIRY - GitHub - juliangarnier/anime: JavaScript Animation Engine

(via)
Anime (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects. Main features Keyframes: Chain multiple animation properties. Timeline: Synchronize multiple instances together. Playback controls: Play, pause, restart, seek animations or timelines. CSS transforms: Animate CSS transforms individually. Function based values: Multiple animated targets can have individual value. SVG Animations: Motion path, line drawing and morphing animations. Easing functions: Use the built in functions or create your own Cubic Bézier curve easing.

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

June 2018

DEV - Automatic JS, CSS Versioning to Update Browser Cache when Files are Changed - CodeProject

(via)
An HttpFilter that processes the output generated by dynamic pages and appends the last modified date of static files like js, css in order to make browsers download latest version as soon as files are changed

May 2018

CSS - TOOL - postcss/postcss: Transforming styles with JS plugins

(via)
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba, and JetBrains. The Autoprefixer PostCSS plugin is one of the most popular CSS processors.

April 2018

WATERFOX - ABOUT:CONFIG - To disable Stylo in Waterfox 56.1.0- Do not forget to enable Stylo(Quantum CSS).... : waterfox

(via)
If you have prolem, you can test that: To disable Stylo in Waterfox 56.1.0: >about:config >SEARCH : layout.css.servo. > CHANGE layout.css.servo.enabled TO false – then either (a) reload any page that may be bugged by Stylo in 56.1.0; or (b) restart Waterfox.

March 2018

CSS - ONLINE TOOL - Irregular Shape Creator [CodePen]

Customize Border Radius and Size. And Copy and paste in your css

DEV - Great Resources Every Beginning a Front-end Developer Should Bookmark by vydargis on CodePen

If you just get started your a front-end developer career, it might be overwhelming to learn something every day. To optimize your time, it might be useful to know solid resources, to keep up with a demanding programmers’ environment. In this brief article, you will find 6 useful resources that in my opinion I think every beginning a front-end developer career should bookmark.

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. :)

CSS - ONLINE TOOL - Smooth corners with CSS Houdini - @iamvdo

(via)
CSS Painting API - CSS Custom Properties C+ CSS Properties and Values API Better rounded rectangle by drawing a superellipse. Read blog post

CSS - FONT - Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira

(via)
Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.

February 2018

DEV - FORMATION - Thimble par Mozilla — Un éditeur de code en ligne pour apprendre et enseigner

(via)
Thimble est un éditeur de code en ligne qui facilite la création et la publication de vos propres pages web tout en apprenant le langage HTML, CSS et le JavaScript

FIR >57 - DEV - Firebug + FirePath alternative ? - Is there a CSS/XPATH checker, now that firefinder is gone? | Forum d’assistance Firefox | Assistance de Mozilla

(via)
The Developer Edition is the replacement for Firebug https://www.mozilla.org/en-US/firefox/developer/Yes, I know you can right click and copy the css or xpath, but thats not what I am asking. I am asking about the functionality that was provided by firefinder add on. Does FF offer that somewhere now that firebug was removed and added to the developer version.

CSS - FirePath :: Reviews :: Add-ons for Firefox

An alternative or Update ? Rated 5 out of 5 stars by decembre on Feb. 21, 2018 · permalink When i write an Userstyle it is (was) the primary tool i use with Firebug. Now i search an alternative for this great tool: The devtool don't give us the possibility to search or test a specific CSS selector like Firepath do. And in an other hand the DevTool is less useful than Firebug (it don't give an easy way to identify in which userstyle a CSS rule is - with an human reading way)

CSS - TEXT - A Call for ::nth-everything | CSS-Tricks

(via)
::nth-word() / ::first-word / ::last-word / ::nth-last-word() We currently don't have any word-based pseudo elements. We do have word-spacing though, which is notable. One use case is similar to using ::first-letter for drop caps, only doing a whole word. article p::first-word { float: left; font-size: 300%; margin: 0 10px 10px 0; }

CSS - text-align-last property

(via)
The text-align-last property specifies how to align the last line of a text. Note: The text-align-last property will only work for elements with the text-align property set to "justify".

CSS - CSS last-line: Controlling Widows & Orphanst - The new code –

“Widows” and “orphans” refer to a word or line of text that is laid out on the page in a way that disturbs reading flow and the “look” of the page: most commonly, words that are left dangling at the end of paragraphs. In paginated media, this is commonly seen as end-of-paragraph words that fall onto the next page. TRADUCTION: "Veuves" et "orphelins" se réfèrent à un mot ou une ligne de texte qui est disposé sur la page d'une manière qui perturbe le flux de lecture et le "look" de la page: le plus souvent, les mots qui restent à la fin de paragraphes. Dans les médias paginés, ceci est généralement vu comme des mots de fin de paragraphe qui tombent sur la page suivante

DEV - TUTO - the new code – Web Developer Reading List: CSS Typography

A well-known dictum states that web design is 95% typography. Despite the prevalence of rich media, videos and games, people come to the web primarily to read. Making that reading experience comfortable, interesting and enjoyable is a major factor in keeping people on web sites longer and enhances their ability to retain and remember information. Goals: Control the display of web page text to enhance communication. Prerequisite: Color Total time: 8 hours

CSS - ONLINE TOOL - Clippy — CSS clip-path maker

(via)
The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

IMAGE / CSS / ICON etc ....- AllTheFreeStock.com - Free Stock Images & Videos ~

by 1 other
Pour tous ceux qui aiment fouiller, des milliers de ressources photos, sons, vidéos classées par thématique. Vérifier les informations concernant les utilisations commerciales en fonction des copyrights.

January 2018

USERSTYLES - JAVASCRIPT - Convert an Userstyle into a greasemonkey script ? - forum.userstyles.org

I have an huge Style , impossible (for me) to compress more to publish here ... I want find a way to convert it , automatically if it is possible, into an greasemonkey .