Les tutoriels pour programmer en css less scss

De Analyse Développement Hacking
Sauter à la navigation Sauter à la recherche

Glider.png

Le wiki : Accueil - Administrateur - Bureautique - Développeur - Intégrateur - Marketing - Multimédia - Objets numériques - Jeux - We make Hack

Le site : Accueil - Annuaire - Blog - Forum - Outils - Utilisateur
Le FTP : Consulter les fichiers partagés sur le FTP
Le Redmine : Consulter le Redmine

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

Exemple de site full CSS par Lcf.vs de Développez

CSS-UI : https://lcfvs.github.io/css-ui/

LESS

LESS est un langage de génération dynamique de CSS.
Source complémentaire : https://lomart.fr/extensions/20-scss-compiler/31-comparaison-scss-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

Bienvenue sur le wiki de Vision du Web.
De nombreuses pages sont partagées sur ce wiki.
Créer un compte utilisateur pour participer sur le wiki.
Les pages présentées sur le wiki évoluent tous les jours.
Certaines recherches sont peu abouties et incluent des erreurs.
Utiliser la recherche interne du wiki pour trouver votre contenu.
La page de discussion de VisionDuWeb vous permet de poser une question.
Utiliser la recherche interne du site pour chercher dans tout le contenu.
Ce contenu ne doit pas servir à nuire à autrui ou à un système informatique.
Protéger votre système Linux ou Windows en lisant la page dédié à la sécurité.
Améliorer le contenu des pages avec vos propositions depuis l'onglet discussion.

SOUTENIR CE WIKI

Soutenir le wiki avec un don en monnaie numérique :
AEON - Bitcoins - Bitcoins Cash - Bitcoins Gold - Bitcore - Blackcoins - Basic Attention Token - Bytecoins - Clams - Dash - Monero - Dogecoins - Ğ1 - 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.