Les tutoriels pour programmer en css less scss

De Wiki. Analyse, Communication, Développement, Hacking.
Révision datée du 11 janvier 2019 à 21:41 par Anonymous (discussion | contributions) (background-color)
Aller à : navigation, rechercher
Naviguer sur le wiki : Accueil du wiki - Administrateur - Développeur - Intégrateur - Marketing - Multimédia - Objectifs - We make Hack
Naviguer sur le site : Accueil du site - Les annuaires - Les éditoriaux - Le forum - Les outils - Les projets
 
Consulter le sommaire de cette page en étant déconnecté du réseau : Télécharger le sommaire en PDF

Les tutoriels pour programmer en CSS LESS SCSS

CSS

Propriétés

background-color

 /* Valeurs avec un mot-clé */
 background-color: red;

 /* Valeur hexadécimale */
 background-color: #bbff00;

 /* Valeur hexadécimale avec un canal alpha */
 background-color: #11ffee00; /* 00 - transparent */
 background-color: #11ffeeff; /* ff - opaque */

 /* Valeur RGB */
 background-color: rgb(255, 255, 128);

 /* Valeur RGBA : une valeur RGB avec un canal alpha */
 background-color: rgba(117, 190, 218, 0.0); /* 0.0 - transparent */
 background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */
 background-color: rgba(117, 190, 218, 1.0); /* 1.0 - opaque */
​​​​​​​
 /* Valeur HSLA */
 background-color: hsla(50, 33%, 25%, 0.75);

 /* Valeurs avec un mot-clé spécial */
 background-color: currentcolor;
 background-color: transparent;

 /* Valeurs globales */
 background-color: inherit;
 background-color: initial;
 background-color: unset;
Source : https://developer.mozilla.org/fr/docs/Web/CSS/background-color

Images responsives en CSS

https://www.w3schools.com/Css/css_rwd_images.asp

Scinder un texte trop long

Exemple 1

/* La CSS */
.scinde{word-break:break-all;}
/* Utilisation de la css dans un block HTML */
<div class="scinde">Le texte trop_long_sera_scindé.</div>

Exemple 2

/* Fixer une largeur maximum en pixel et le texte se transforme en pointillé */
<span style="display:-webkit-box;display:inline-block;display:-moz-deck!important;display:-moz-box;width:100px;px;padding:0;margin:0;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">Le texte trop long ...</span>
Le texte trop long ...

LESS

LESS est un langage de génération dynamique de CSS.
Source : https://lomart.fr/extensions/20-scss-compiler/31-comparaison-scss-less
Simplifiez-vous la vie avec LESS : https://openclassrooms.com/fr/courses/1281906-simplifiez-vous-la-vie-avec-less

SCSS

SCSS est un langage de génération dynamique de CSS.

Bibliographie

CSS

Responsive Design : http://designspartan.com/info_generale/responsive-design-definition-fonctionnement-ressources-et-tutoriels/
18 Exemples de bouton en CSS3 inspiré par Google : http://41mag.fr/18-exemples-de-bouton-en-css-3-inspire-par-google.html
Les couleurs en CSS3 : https://debray-jerome.developpez.com/articles/comprendre-les-couleurs-en-css3/
Les media-queries et le responsive design CSS3 : https://lehollandaisvolant.net/tuto/responsive-css/
Exemple d'animation en CSS3 : https://www.impressivewebs.com/demo-files/css3-animated-scene/
Cadre esthétique : https://funnycat.jimdo.com/astuces-jimdo/cadre-esth%C3%A9tique/
Exemple de boîtes flottantes : http://www.pompage.net/IMG/html/page_modele10.html
Texte défilant en CSS avec CSS3 : http://labs.viaxoft.com/texte-defilant-en-css/
Exemples de menus en CSS : http://css3menu.com/demo.html
Maîtrisez HTML & CSS : http://maitrisezhtmlcss.com/
Quiz CSS : https://css.developpez.com/quizz/

NAVIGATION

PARTICIPER ET PARTAGER

Vous êtes sur le wiki de Vision du Web.
Les pages présentées sur le wiki évoluent tous les jours.
Certaines recherches sont peu abouties et incluent des erreurs.
Pour participer sur le wiki, créer un compte utilisateur en haut à droite.
La recherche interne du wiki permet de trouver le contenu qui vous intéresse.
Identifiez-vous pour poser vos questions sur la page de discussion de VisionDuWeb.
Améliorer le contenu des pages en faisant des propositions depuis l'onglet discussion.
Pour écrire en Markdown : Éditeur - Générateur de tableau 1 - Générateur de tableau 2.
Les informations du wiki ne doivent pas servir à nuire à autrui ou à un système informatique.
De nombreux outils gratuits sont listés et disponibles dans la boîte à outils de Vision du web.
D'autres pages du wiki peuvent correspondre à vos attentes. La liste de toutes les pages du wiki.

VALORISER LE WIKI

Valoriser le contenu partagé sur le wiki avec un don en monnaie numérique :
AEON - Bitcoins (BTC) - Bitcoins Cash - Bitcoins Gold - Bitcore (BTX) - Blackcoins - Bytecoins - Clams - Dash - Monero - Dogecoins - Ethereum - Ethereum Classique - Litecoins - Potcoins - Solarcoins - Zcash

OBTENIR DE LA MONNAIE NUMERIQUE

Obtenir gratuitement de la monnaie numérique :
Gagner des Altcoins - Miner des Altcoins.
Miroir PlanetHoster du 1er Novembre 2018.