Comment arrondir les bords et de créer de multiples colonnes avec CSS3

category Internet & médias sociaux / Web design & développement / Pages web construction

Au lieu d'avoir à utiliser jusqu'à quatre images distinctes pour donner l'illusion d'une forme incurvée sur votre site web, avec CSS3, vous pouvez maintenant créer des conteneurs avec coins arrondis! Voici le code, qui a la déclaration de CSS3 entièrement pris en charge au sommet suivi par doublons préfixées pour les autres navigateurs:

#box {border-radius: 20px; / * pour Mozilla Firefox * / - moz-border-radius: 20px; / * pour Safari Google Chrome * / - webkit-border-radius: 20px;}

Vous pouvez utiliser le border-radius de style sur un objet, y compris des images rectangulaires. Plus le nombre de pixels est élevé, plus rond du bord.

Avant CSS3, si vous voulez avoir plusieurs colonnes sur votre page, vous aurez besoin soit de flotter éléments dans des conteneurs ou les positionner absolument par rapport à un conteneur parent. Maintenant, avec CSS3, vous pouvez facilement créer plusieurs colonnes dans un conteneur unique en utilisant la propriété de colonne en définissant les valeurs pour le numéro de la colonne et de l'écart de largeur, avec ou sans une règle verticale entre eux.

# box1 {/ * pour les navigateurs qui ne nécessitent pas un préfixe * / column-count: 4-colonne-Gap: 30px; colonne règle: #fff solide 3px - / * pour Mozilla Firefox * / - moz-column-count: 4- -moz-column-gap: 30px; -moz-column-règle: #fff solide 3px - / * pour Safari Google Chrome * / - webkit-column-count: 4 - webkit-colonne-Gap: 30px; -webkit-colonne-règle: solide 3px fff- #}

L'illustration montre une comparaison entre une couche en utilisant le style multicolumn et une autre mise en page sans colonnes. Pour plus d'informations sur la façon dont vous pouvez continuer à contrôler l'apparence de vos colonnes multiples, voir Quirksmode.

image0.jpg
Articles Similaires

A propos Auteur
Soutien CSS3 et navigateur Soutien CSS3 et navigateur

L'état actuel des normes pour le soutien de navigateur Web pour les effets CSS3 et transformations est en pleine mutation. Très probablement, au fil du temps les pouvoirs-que-être dans le monde du navigateur - ceux qui publient Internet Explorer,…

Propriétés CSS3 Propriétés CSS3

Certaines propriétés CSS3 sont revisées rarement beaucoup d'autres sont utilisés assez souvent que les développeurs doivent savoir à leur sujet. Propriétés et leurs valeurs associées forment la base de la mise en forme que vous effectuez en…

Comment ajouter plusieurs images de fond et de faire pivoter des objets avec CSS3 Comment ajouter plusieurs images de fond et de faire pivoter des objets avec CSS3

Avec CSS3, vous pouvez facilement ajouter autant d'images d'arrière-plan à un seul élément comme vous voulez. Vous pouvez également faire pivoter les images. L'illustration montre un exemple d'un conteneur avec trois images de fond, un motif,…

Comment appliquer des effets de CSS3 et transforme dans Dreamweaver Comment appliquer des effets de CSS3 et transforme dans Dreamweaver

Les effets CSS3 et transformations peuvent être définies dans le panneau Styles CSS. Création d'un effet de CSS3 prend quelques frappes de votre part. Pour ajouter un effet de CSS3 ou transformer à une définition de style, suivez ces étapes:…

Comment appliquer l'effet border-radius CSS3 Comment appliquer l'effet border-radius CSS3

L'effet CSS3 border-radius définit des coins arrondis. Et, vous devez utiliser des préfixes spécifiques au navigateur lors de la définition d'un border-radius. Voici quelques règles pour définir un border-radius:Vous ne pouvez pas appliquer un…

Comment transformer des objets avec CSS3 Comment transformer des objets avec CSS3

En CSS3, une transformer modifie l'apparence des objets à l'écran d'une manière spécifique. Par exemple, vous pourriez faire pivoter l'objet ou de fausser ses dimensions. Transforme le rendent facile à créer des présentations uniques à…

Comment utiliser configurations à trois colonnes en CSS3 Comment utiliser configurations à trois colonnes en CSS3

Mises en page à trois colonnes dans CSS3 sont couramment utilisés sur les sites qui fournissent une liste de liens génériques sur un côté de la page, contenu dans le milieu, et la publicité ou spécifiques à la page des liens de l'autre…

Comment travailler avec les sélecteurs CSS3 Comment travailler avec les sélecteurs CSS3

À la mi-2010, les concepteurs et les développeurs Web se réjouissaient que CSS3 a commencé à faire son chemin dans le courant dominant. Depuis ce temps, le soutien de navigateur pour CSS3 a régulièrement augmenté et amélioré, même si CSS3…

Comment travailler avec plusieurs colonnes en CSS3 Comment travailler avec plusieurs colonnes en CSS3

CSS3 fournit une nouvelle méthode pour travailler avec des colonnes qui ne vous oblige pas à avoir un diplôme de mathématiques et effectuer des configurations de test avec des styles arcanes.Les styles de colonne fournissent les moyens de créer…

Conception pour les navigateurs Safari et chrome Conception pour les navigateurs Safari et chrome

Safari et Chrome sont des navigateurs WebKit, basé sur le même WebKit déchirerERing moteur, qui contrôle la façon dont le navigateur interprète HTML, CSS et autre code. Tous les navigateurs WebKit suivent les mêmes règles (au moins la…

Assurez CSS 3 travailler dans d'autres navigateurs web Assurez CSS 3 travailler dans d'autres navigateurs web

Si vous souhaitez utiliser HTML5 et CSS 3 dans la conception de votre site Web, vous devez savoir que les deux HTML5 et CSS 3 sont encore en cours de développement. La spécification CSS n'a pas encore été approuvé par le W3C, mais de nombreux…

Faites votre travail CSS 3 à travers les navigateurs web Faites votre travail CSS 3 à travers les navigateurs web

Si vous concevez votre site Web pour le bureau ainsi que pour l'iPhone et l'iPad, vous pouvez toujours utiliser le CSS expérimentale 3! Finalement, le CSS 3 dans votre site sera probablement pris en charge. L'exemple de cette section vous montre…

Faire des coins arrondis avec CSS 3 Faire des coins arrondis avec CSS 3

Si vous avez créé une boîte avec des coins arrondis en utilisant les versions précédentes de CSS, des images et des tableaux HTML, vous savez ce qu'est une douleur, il était - comment vous aviez à créer quatre images (une pour chaque coin),…

Effets que vous pouvez faire avec des feuilles de style en cascade Effets que vous pouvez faire avec des feuilles de style en cascade

CSS3, la dernière édition de Cascading Style Sheets, présente les progrès dans le traitement de conception. Parmi ceux-ci, quelques nouvelles fonctionnalités qui définissent des dégradés de couleurs, degrés de transparence, et même des…

» » » » Comment arrondir les bords et de créer de multiples colonnes avec CSS3