Petit rappel : à quoi sert css ? C'est lui qui vous permet de choisir la couleur de votre

texte.Lui qui vous permet de sélectionner la police utilisée sur

votre site.Lui encore qui permet de définir la taille du texte, les

bordures, le fond...c'est lui qui permet de faire la mise en page de votre site. Vous pourrez dire : je veux que mon menu soit à gauche

et occupe telle largeur, que l'en-tête de mon site soit calé en haut et qu'il soit toujours visible, etc…

plan Qu’est ce que le CSS3 ?Les Nouveaux propriétés de css Les effets visuels :

Animation Background Border and outline( des frontières et Contour) Box ( la zone) couleur Flexible Zone Font la grille lien hypertexte multi-colonnes texte 2D/3D propriétés de transformation  transition Interface utilisateur (user-interface)

Les sélecteurs

Les nouveaux outils pratiques

Qu’est ce que le CSS3 ?Le CSS3 est le nom employé pour caractériser

l’ensemble des nouveautés depuis le CSS2.1.Il s’agit par exemple d’un ensemble de nouveaux

effets à appliquer sur nos éléments HTMLMais le CSS3 c’est également un ensemble de

nouveaux sélecteurs, de nouvelles manières de spécifier les couleurs, une détection des caractéristiques de l’appareil de l’utilisateur, des calculs dans les feuilles de style, des SVG en arrière plan…

bref, le CSS3 est un généreux enrichissement des feuilles de style qui, en plus d’être profitable à l’utilisateur, l’est au développeur également !

Les nouveautés Quoi de Neuf ??Les bordures : ‘’Exemple Bordure arrondie ‘’Supposons que vous travailliez sur le design

d’un site web qui inclut un système de commentaires, Vous avez l’idée d’afficher une bulle à la manière des bandes dessinées

“Il faut faire un <table> à 9 cases dans lequel on va placer 9 images découpées sous Photoshop”.

Et un trop long code !!!!!!!

La belle manière de faire en CSS3Propriété :  border-radius:Arrondit les bords d’un bloc

Exemple

The border-bottom-left-radius

The border-bottom-right-radius

border-image

border-image-repeatbox-shadow Applique une ombre sur un bloc(ex) :

text-shadowApplique une ombre sur un texte (ex) :

Définit la forme de la frontière de l'angle inférieur gauche (EX)

Définit la forme de la frontière de l'angle inférieur droit

Un raccourci pour régler toutes les border-image (EX)

Spécifie si l'image-frontière devrait être répété, arrondie ou tendu

opacityAjuste la transparence d’un élément (ex) :

Flexible Boxbox-

alignbox-direction

box-flex

box-flex-group

box-lines

box-ordinal-group

Définit le niveau d'opacité d'un élément

Indique comment aligner les éléments enfants d'une boîte (ex)Spécifie la direction dans laquelle les enfants d'une boîte sont affichésIndique si les enfants d'une boîte qui est flexible ou rigide de la taille

Affecte les éléments flexibles de fléchir les groupes

Indique si les colonnes iront sur une nouvelle ligne chaque fois qu'il manque d'espace dans la boîte de parent

Indique l'ordre d'affichage des éléments enfants d'une boîte (ex)

Propriétés Font@ font-face

Une règle qui permet aux sites web de télécharger et d'utiliser des autres polices (ex)

 font-size-adjust Préserve la lisibilité du texte lorsque la police intervient de rempli

Les grillesGrid -

columnsgrid-rows

Indique la largeur de chaque colonne dans une grille

Indique la hauteur de chaque colonne dans une grille

Propriétés du lien hypertexte

target

target-nametarget-new

target-position

Une propriété raccourcie pour le réglage target_name,target-new,target-position

indique l'emplacement où pour ouvrir les liens (destination cible)

Indique l'emplacement où la nouvelle destination des liens doit être placé

Propriétés multi-colonnes (ex)

column-count

Indique le nombre de colonnes un élément doit être divisé en

Par exemple : column-count:4;

column-gap Indique l'écart entre les colonnes (ex)

column-rule-color Indique la couleur de la règle entre les colonnes (EX)

column-rule-style Indique le style de la règle entre les colonnes (ex)Exemple : column-rule-style:dotted;

Propriétés du texte

text-shadow (ex)

Ajoute ombre au texte

2D/3D propriétés de transformationtransform

Applique une transformation 2D ou 3D à un élément (ex)

transform-origin Permet de modifier la position sur les éléments transformés (ex)

perspectiveIndique le point de vue sur la façon dont les éléments 3D sont considéré (ex)

perspective-originIndique la position inférieure des éléments 3D (ex)

Propriétés de transition

transitionUn raccourci pour définir les propriétés de transition de quatre (ex)

transition-durationIndique le nombre de secondes ou millisecondes un effet de transition nécessaire pour terminer ( ex)

Passe d’un état à un autre d’un élément avec par une transition animée 

transition-delay Spécifie quand l'effet de transition commencera (ex)

Interface utilisateur

appearance Permet de faire un look élément comme un élément d'interface utilisateur standard (ex)

Propriétés de l'animation@keyframesSpécifie l'animation (ex)

animation-name Spécifie un nom pour l'animation d'images

animation-iteration-count Indique le nombre de fois une animation devrait être joué

animation-direction Indique si oui ou non l'animation devrait jouer en sens inverse des cycles de remplacement (ex)

animation-play-stateIndique si l'animation est en cours ou arrêtée

Les Sélecteurs element1~element2

Exemple : p ~ ul

Sélectionne tous les éléments ul qui sont précédés par un élément p (ex)

:first-of-type Sélectionne tous les éléments p qui est l'élément p premiers de son parent (ex)

:last-of-type Sélectionne tous les éléments p qui est le dernier élément p de son parent

p: first-of-type

p:last-of-type

:enabledinput:enabled

Sélectionne tous les éléments d'entrée activée

:disabled Sélectionne tous les éléments d'entrée (ex) désactivée:checked Sélectionne tous les éléments d'entrée contrôlés

gradientsAffiche un dégradé de couleurs 

Exemple : gradient(linear, 0% 0%, 100% 0%, from(red), to(blue))

http://www.mediaforma.com/guide-de-survie-mise-en-forme-d%E2%80%99un-document-html5-avec-css3/

Milieux multiplesbackground-image: <bg-image> [, <bg-image> ] * <bg-image> = <image> | noneexemple :background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);

Menus

Un menu vertical élémentaire

Menu vertical graphiqueUn menu horizontal élémentaire avec display: inline-blockMenu horizontal avec border-radiusUn menu déroulantUne menu déroulant avec effets

http://www.mediaforma.com/guide-de-survie-menus/

#include<stdio.h>#include<conio.h>

Main(){ printf( « MERCI POUR VOTRE ATTENTION »); return 0;