PUBLIC MARKS from decembre with tags css & code

Do you like colouring books? Are you getting a little bored and running out of things to do at home? Well, I have created some digital colouring pages that you can colour with code. There is a lot going on in the world right now so I wanted to share something lighthearted and fun. Something everyone can take part in and share with their friends and family online.

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.

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

“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

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

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 :^) */

Generators: A range of tools with easy-to-use interfaces for generating code

This post will cover six popular tips for Chrome DevTools. You may have seen some of these before, but hopefully if you have they'll act as a refresher for what you can do during your Inspect Element journey.

Première question : qu’est-ce qu’un préprocesseur ? Un préprocesseur est un programme qui procède à des transformations sur un code source, avant l’étape de traduction proprement dite (compilation ou interprétation). source Wikipedia. Dans le cas d’un préprocesseur CSS la syntaxe simplifiée ou enrichie en entrée est analysée et compilée en un langage que nous connaissons tous et que nous utilisons au quotidien : CSS.

Webflow gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.

How to Apply a CSS Class to an Inserted Image3. Add 'class="myimage"' within the img tag; it doesn't need to be in a specific location, such as before "title" or "alt," to function. For instance, if your code is (img src="myhouse.jpg" alt="Photo of my house")," it should become: (img src="myhouse.jpg" alt="Photo of my house" class="myimage")

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; }

Le but est ici de faire en sorte que l'image de fond que l'on aura placée en CSS conserve son ratio de 16/9 et prenne toute la taille du navigateur, quelle que soit la taille de ce dernier (aka fullscreen). Pratique quand on fait du responsive. Voici le code utilisé : .ratio { background: url("monimage.jpg") no-repeat; background-size: cover; width: 100vw; height: 56.25vw; } Concrètement ce que l'on fait : on donne à l'image la largeur du navigateur grâce à l'unite vw (viewport-width) on lui donne la hauteur à laquelle on a appliqué un ratio 16:9 calculé en faisant 100 * 9 / 16 de la largeur du navigateur

it helps to keep CSS code shorter and smarter. Before diving into practical usage examples, here is a short theory course. This is how MDN describes currentColor: The currentColor keyword represents the calculated value of the element’s color property. It allows to make the color properties inherited by properties or child's element properties that do not inherit it by default.

To make the video fullscreen: video#bgvid { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: url(polina.jpg) no-repeat; background-size: cover; } Conclusion: “Background” video can be a very powerful feature on a site, but with great power comes great responsibility: please use such features judiciously.

Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation. Select the type of content you want to center in a parent div and the size of the parent.

Toggles a single style enabled/disabled with the click of toolbar button. Ctrl + left-click or middle-click button for Options/Settings Dialog (pic 1). Settings for entering style id and keyboard shortcut. Default is (ctrl + x). Pops an alert box if id is not found. Enter an id number with an r behind it for an auto restart (pic 2). For key code: Click button"Get Key Code" (pic 1) from Settings dialog. Press a key on keyboard and popup displays the Key Code number. Cancel allows for another selection and OK inserts the number into the script. Option Use Help CSS for enabling help tab section for css entries. Option to change Enabled/Disabled state toolbarbutton icons. Change any/all text labels from Options/Settings Dialog.

When an CSS (Cascading Style Sheet) document is edited is very easy to mess the code making it unreadable. Especially if you use many nested STYLES it can become difficult to remember how the document is structured. CSS Beautifier will help you to solve many of these problems. This tool can process an CSS document and reformat it with a correct indentation and syntax highlighting. By applying CSS beautifies to your CSS code will improve the layout and indent style of the resulting CSS code. Beautification involves using white spaces like tabs and line-breaks to indent CSS code. Compaction removes unnecessary white spaces. This online tool will not fix your invalid invalid indentation, unpack CSS, De-Obfuscate CSS.

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.

utiliser CSS3 pour améliorer la présentation de vos listes ordonnées en utilisant une approche sémantique. utiliser le contenu généré, la numérotation automatique et les listes. Il s'agit essentiellement d'utiliser deux propriétés CSS2.1 : counter-reset (initialise un compteur) et counter-increment (le nom est explicite, cela incrémente le compteur précédent). Comme vous le verrez dans le code ci-dessous, counter-increment sera utilisé en relation avec du contenu généré CSS (pseudoéléments).

calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/). Being able to do math in code is nice and a welcome addition to a language that is fairly number heavy. But is it useful? I've strained my brain in the past trying to think of obviously useful cases. There definitely are some though.

Traduction française de l'extension Web Developer de Chris Pederick (http://chrispederick.com/work/web-developer/). Cette magnifique extension propose plein d'outils facilitant le développement de site web.

Tout le monde doit connaitre DynamicDrive (un site au PR 8 ) ?? Un des meilleurs sites où l’on peut obtenir des scripts DHTML, Ajax et Javascript sur Internet. Le site propose aussi une suite d’outils fort bien sympatiques et notamment : * Un outil pour optimiser d’images * Un générateur de Favicon * Un outil de cryptage pour adresse mail * Des outils pour vos fichiers .htaccess. * Un générateur de boutons 80×15 * Un générateur d’arrière-plans en dégradé. Vous trouverez également une partie du site dédié aux CSS :

Outils et Tutoriels... Templates et exemples...

Mozile (Mozilla Inline Editor) est un éditeur de pages XHTML, directement depuis votre navigateur. Outils d'édition courants (copier-coller, mettre en gras, changer la casse, mise en page, etc.) et insertion de liens etc ...