Border-radius: create rounded corners with CSS! Home / CSS3 Previews / Border-radius: create rounded corners with CSS! The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3. Since first being announced in 2005 the boder-radius property has come to enjoy widespread browser support (although with some discrepancies) and, with relative ease of use, web developers have been quick to make the most of this emerging technology. Here’s a basic example: This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9. The code for this example is, in theory, quite simple: However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details): How it Works border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius The Syntax:
Positionnement, static, relative, absolute, fixed Propriété : Position La propriété sert à définir la position des éléments dans une page HTML Héritage : Il n'y pas de notion d'héritage pour les marges (voir notion d'héritage sur ce lien) Syntaxe : position: valeur; Valeurs possibles: La propriété de feuille de style position css est généralement utilisée pour la création de calques (Layer). Valeurs possibles: top left right bottom Exemple : position: absolute; top: 10px; right: 10px; Le principe du positionnement en CSS fait qu'il est possible de positionner un block n'importe. Le positionnement absolu Une balise HTML avec une position absolue ne laisse aucun espace vide après qu'il est positionné. Dans cette exemple, vous allez obtenir une div à chaque coin de votre écran. Le positionnement relatif On place une div en position relative en avec la valeur de la propriété : relative. En d'autres termes, si on déplace l'élément vers la droite, la gauche, le haut ou le bas.
Le modèle des boîtes Contenu Le modèle des boîtes de CSS décrit les boîtes rectangulaires qui sont générées pour les éléments de l'arbre du document et qui sont assemblées selon le modèle de mise en forme visuel. La boîte de page, qui en représente un cas particulier, est décrite plus en détails au chapitre sur les médias paginés. 8.1 Les dimensions des boîtes Chaque boîte possède une aire de contenu (ex. une texte, une image, etc.) entourée en option par une aire d' espacement , une aire de bordure et une aire de marge ; Le schéma suivant illustre les relations entre ces aires et la terminologie employée pour les désigner : On peut subdiviser la marge, la bordure et l'espacement selon qu'il s'agisse du côté gauche, droite, haut ou bas (ex. dans le schéma, "MG" mis pour marge gauche (N.D.T. margin-left), "ED" mis pour espacement droit (N.D.T. padding-right), "BH" mis pour bordure haute (N.D.T. border-top), etc.). Le bord du contenu ou bord interne Celui-ci entoure le rendu du contenu de l'élément. Le bord de l'espacement
W3Schools Online Web Tutorials Mise en forme CSS d'un formulaire accessible - CSS Debutant Par défaut, les formulaires ne sont pas folichons. Pourtant, quel site n'a pas son formulaire ? (euh... mammouthland ?!!) Dès lors, la tentation est grande de mettre les champs dans des tableaux pour les aligner, et de rajouter du javascript pour un effet focus ou se passer un bouton d'envoi. Et l'accessibilité dans tout ça ?!! Mais avec les CSS, on peut améliorer l'aspect d'un formulaire et rester accessible ! Fonctionne avec : Firefox ; SeaMonkey MSIE 6+ Opéra Safari, Chrome Attributs utilisés : background-color border, border-radius box-shadow color cursor display font-family, font-size, font-weight margin padding width Les formulaires sont tristounets, et leur mise en forme n'est pas très jolie.En voici la preuve : Grâce aux feuilles de style, on peut facilement égayer tout cela. Exemple Pour commencer, regardons le code HTML de plus près : Code (X)HTML <form action="toto.php" method="post" ><fieldset><legend> A propos des CSS : </legend><p>Savez-vous ce que veut dire CSS ? Code CSS Focus Haut
Tutoriel - Creer un site avec Bootstrap de Twitter Découvrez comment il est possible de réaliser une interface Web de manière simple et la rendre compatible avec les différents types de support mobiles en utilisant Bootstrap de Twitter, qui repose sur un système de grille. Son avantage est qu'il permet également un gain de temps énorme en proposant des fondations prédéfinies pour vos projets, une normalisation de votre code en respectant les standards et des éléments graphiques loin d'etre négligeables. En plus de tout ceci, et c'est là l'objet de ce tutoriel, Bootstrap permet de faire rapidement et efficacement des structures de sites en Responsive Web Design, en d'autres termes de prendre en compte et d'adapter le contenu de votre site Web aux différents types d'appareils, mobiles ou non. Afin de profiter pleinement de toutes le joies que peut proposer Bootstrap, il est préférable d'avoir déjà de bonnes connaissances en CSS et une approche plus ou moins familière de JQuery et LESS. Voir la réalisation effectuée avec ce tuto <! <! <!
Best CSS Forms CSS has transformed the way forms used to get designed. CSS helps you make really good and attractive forms. Prior to this (CSS) the forms found on the web were very boring and were not able to attract a lot of visitors. Attractive or user-friendly forms can divert a lot of attention to itself. Even a simple form designed on CSS look slick and stylish. 1- Good Looking Form Without Table This tutorial will explain how to design good form using clean CSS design with only label and input tags to simulate an HTML table structure. 2- Nice & Simple Contact Form Simple CSS Forms is an easily-customizable forms setup that helps you create quick prototypes and final products of web sites. 3- CSS Globe Web Form Styles CSS Globe offers 5 web form styles, ranging from dark-and-slick to fun handwritten to old-fashioned letter envelope and more. 4- Semantic Horizontal Form 5- Veerle’s Blue CSS Form A simple blue form with rounded background corners, all styled in CSS and XHTML. 7- Simple CSS Forms
Components Available glyphs Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible. How to use For performance reasons, all icons require a base class and individual icon class. Don't mix with other components Icon classes cannot be directly combined with other components. Only for use on empty elements Icon classes should only be used on elements that contain no text content and have no child elements. Changing the icon font location Bootstrap assumes icon font files will be located in the .. Change the @icon-font-path and/or @icon-font-name variables in the source Less files. Use whatever option best suits your specific development setup. Accessible icons Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters.
Automatic numbering with CSS Counters Introduction When writing documents, it is often useful to number sections and have a table of contents. You can number these by hand, directly in the markup, but this can be time consuming if the order changes and you have to edit all the numbers. CSS 2.1 gives us a automated way to generate numbers using CSS counters, and this article will walk you through how to use them. One word of note before we start is that CSS counters are not yet implemented in IE, although they are on the roadmap for IE8. Setting up the counter The first step is to reset the counter to its base value and give it a name. This says that the counter will be reset to zero on the <body> element, and the counter identifier is section. The reason for setting it at 4 is that it always increments the counter just before it displays it. Incrementing the counter The next step is to specify when the counter increments and by what value. If you’d like it to increment by two instead, you could specify it like so: Conclusion
TUTO intégration html5 / css3 d'un portfolio minimaliste avec Dreamweaver CC, HTML 5, CSS 3 sur Tuto.com Voici la suite de la formation Photoshop consacrée à la création des maquettes des pages du site Internet Portfolio minimaliste. Cette 2ème partie sera consacrée à l'intégration HTML5 et CSS3 des maquettes Photoshop. Voici le programme de ce tuto : Page d'accueil : Mise en place d'un moteur de recherche animéEffet d'opacité sur les icônes des réseaux sociauxCréation du menuMise en place d'un slider aux couleurs du siteMise en place des derniers articles à afficher sur la page d'accueilInstallation d'un carrousel pour lister vos clientsCréation du footer Page A propos : Mise en place d'un sliderInstallation de barres de compétences animéesMise en place d'un carrousel pour afficher les membres de l'équipeCréation d'un sidebar et mise en place des éléments qui la constitue (dernier article, dernier projet, newsletter...) Page portfolio : Installation d'un portfolio filtrable fluideEffet au rollover sur les images avec icône superposée Page Singleportfolio : Page blog : Page SingleBlog :
Make OL list start from number different than 1 using CSS If you need to create an OL list that starts from number different than 1, here is an elegant solution. This is very useful if you need to display a listing on more pages (eg. there are 100 search results, and you want to display 10 results per page). In this case, if you are using OL list, it will start from number 1 on every page, and that is not a good solution because it will look like this: In order not to use deprecated < ol start=”6″ > parameter in my second list, we’ve searched the Web for an adequate solution which complies with W3C standards – and we found it. You need to write the following in your CSS: And, this is how your lists should be defined: These fieldsets represent separate pages, of course. All you need to do now is to dynamically change the value in your counter-reset rule. li:before rule is used for defining the appearance of the number in your OL list.