CSS3

Depuis l’arrivé du CSS3, les sites web ont pris un coûts de jeune assez fulgurant. On peut réaliser des choses assez impressionnantes.

Voici un petit condensé du CSS3 et des nouvelles fonctionnalités qui ont retenu mon attention de néophytes du développement web :

  • background-size
  • border-raduis
  • opacity
  • word-wrap
  • resize

Tous les exemples partiront d’une simple boîte (carré de 150px de côté, avec un fond bleu et des bordures noir) :

box{
	display : inline-block;
	margin : 0 40px;
	width : 150px; height : 150px;
	font-size : 1.2em; color : red;
	border : solid 3px; border-color : black;
	background-color : blue;
}

Background-size

Le background-size permet de remplir un div ou un span avec un éléement (une image). Par défaut, si vous insérer une image dans un div, l’image gardera sa taille définit et ce sera à vous de gérer la taille du composant qui l’englobe. Maintenant vous pourrez mettre n’importe quelle image dans n’importe qu’elle div. Lui indiqué qu’il doit prendre 100% de la place dispobible, 100px ou même 100px de large et 100% de hauteur.

/** Une simple image **/
#box1{
	background-image : url(img1.png);
	background-repeat : no-repeat;
}
/** On force la taille au maximum avec la même image **/
#box2{
	background-image : url(img1.png);
	background-repeat : no-repeat;
	background-size : 100px 100%;
}
/** On force la taille de l'image à 100px **/
#box3{	
	background-image : url(img1.png);
	background-repeat : no-repeat;
	background-size : 70px 70px;
}

Résultat :

Mise en Application :

<p> Démonstration du Background-Size </p>
<div id=box1 class=box>Taille Réel </div>
<div id=box2 class=box>Remplissage</div>
<div id=box3 class=box>Taille définit</div>

Border-Radius

Le border-radius réconforte beaucoup de designer qui “trichait” pour avoir un beau bouton. Il permet de créer des arrondis sur les angles. Enfin !!!! Vous l’attendiez, n’est-ce pas ? Finit la création des boutons avec des images.

/**Angle des Bords**/
#AngleBord1{
	border-radius: 25px;
}
#AngleBord2{
	border-radius: 10px;
}
#AngleBord3{
	border-radius: 0px;
}
#AngleBord4{
	border-top-right-radius : 25px;
	border-top-left-radius : 20px;
	border-bottom-left-radius : 15px;
	border-bottom-right-radius : 0px;
}

Opacity

/**Opacité**/
#Opac1{
	opacity:1;
}
#Opac2{
	opacity:0.5;
}
#Opac3{
	opacity:0.2;
}

En cours de rédaction

Word-wrap

/**Word-Wrap**/
#word1{
	word-wrap:normal;
	overflow:hidden;
}
#word2{
	word-wrap:break-word;
	overflow:hidden;	
}

En cours de rédaction

resize

/**Redimensionnemment**/
#resize1{
	resize: both;
	overflow: auto;
}
#resize2{
	resize: vertical;
	max-height : 200px;
	overflow: auto;
}
#resize3{
	resize: horizontal;
	min-width : 100px;
	overflow: auto;
}

En cours de rédaction

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s