Les tutoriels pour programmer en css less scss

De Wiki Amis SH
Aller à la navigation Aller à la recherche



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


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

Effets sur les images

15 effets CSS3 pour vos images : https://www.web-eau.net/blog/15-effets-css3-pour-vos-images

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 Amis SH.
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 Amis SH vous permet de poser vos questions.
Consulter le site amis-sh.fr pour installer votre propre serveur web.
Améliorer le contenu des pages avec vos retours depuis l'onglet discussion.
Ce contenu ne doit pas servir à nuire à autrui ou à un système informatique.
Protéger votre système Linux ou Windows avec cette page dédiée à la sécurité.

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 :
Miner de la cryptomonnaie.