Multiple Backgrounds and Borders with CSS 2.1 – Nicolas Gallagher — Blog & Ephemera. Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required. Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+. How does it work? Essentially, you create pseudo-elements using CSS (:before and :after) and treat them similarly to how you would treat HTML elements nested within your target element. To provide multiple backgrounds and/or borders, the pseudo-elements are pushed behind the content layer and pinned to the desired points of the HTML element using absolute positioning.
The pseudo-elements contain no true content and are absolutely positioned. What effects can be achieved? Most structural elements will contain child elements. Example code: multiple background images Each pseudo-element then has a repeated background-image set. Webkit CSS Properties. CSS Tips I Wish I Knew When I First Started.
I’ve been working with CSS for quite a while now, and even though it’s relatively easy to learn, there are always new tips and tricks to be found. I’m learning new stuff all the time. I wanted to take a moment to put together this helpful list of CSS tips I wish I knew when I first started. Although many of these tips are common knowledge, I think you’ll find them helpful. At the very least I hope you’ll be nodding your head in agreement. Use Overflow: Hidden; to Clear Floats It wasn’t until recently that my style sheets were littered with unnecessary clearing floats that looked like the following.
These clearing floats will work perfectly fine, but they are unnecessary. Group Elements Together One of the mantras of good coding 101 is to keep your code as simple and concise as possible. You can group these elements like so… Comments Are Important Many of the sites that I create are 1-man projects. Add Some Base Styles to the Body This goes back to the code-less principle I discussed earlier. 40 Powerful CSS Tools And Generators To Automate Your Workflow | Graphic and Web Design Blog. Showcase of 40 useful and powerful CSS tools and generators. These tools can really relieve developers work in many ways – I understand you like always to do everything by yourself but it’s not the best way in the most cases, because it really takes time and such liberty we don’t always have.
This is considered to be really complete list about everything CSS related, as CSS lover myself I really evaluate good automated ways so I can focus on things I enjoy the most – creating elegant, usable and optimized website! I just hope you will find some relief in this list as well! Enjoy your time and test these tools for best results! 1. Showcase of 40 useful and powerful CSS tools and generators. 2. Simple CSS allows you to easily create Cascading Style Sheets from scratch, and/or modify existing ones, using a familiar point-and-click interface. 3. Formats and optimizes CSS. 4. CleanCSS is a powerful CSS optimizer and formatter. 5. 6. 7. 8. CSS Sorter is a free online tool for sorting CSS files.
Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8. Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9) 10 conseils pour améliorer votre feuille de style CSS « print » Doctype. 50 New CSS Techniques For Your Next Web Design | CSS. Advertisement CSS is almost certainly one of the best developments in web design since the first graphical web browsers were adopted on a wide scale. Where tables created clunky, slow-loading pages, CSS created much more streamlined and usable web pages. Plus, CSS has allowed designers to achieve a number of different styles that used to only be possible with images. One of the best parts of CSS is that it’s so simple once you know the basics. Where tables used to make incredibly complex and sometimes impossible-to-decipher code, CSS keeps things clean and simple. Add a few comments to keep everything organized and it becomes an absolute dream to work with.
Below are 50 fresh CSS tricks, techniques and tutorials that will help you to improve the quality of your next web design. 1. While CSS is often thought of as merely a styling language, there are ways you can use it to add security to your site. Make your pages load faster by combining and compressing javascript and css files 2. 3. 4. Afficher une liste HTML sous forme de tableau par CSS - Kiwano. Comment modifier l’affichage de vos listes HTML pour les rendre un peu plus sexy en modifiant uniquement ses feuilles de styles CSS ?
Les listes, vous le savez, sont très efficaces pour hiérarchiser les données. Elles optimisent votre référencement en simplifiant le code HTML superflu. Elles permettent d’augmenter le ratio contenu par rapport au code. C’est un bon cas pratique pour un atelier sur la séparation HTML / CSS. Cas HTML / CSS pratiques Liste HTML basique Voyons quelques exemples de modifications basiques en CSS en prenant comme point de départ une liste de jours (type orderer list <ol>) contenant une liste d’horaires sur le modèle suivant : Ce qui nous donne un affichage du type : Liste HTML améliorée par CSS On peut rendre cette liste un peu plus sympa en utilisant une feuille de style « Planning.css ». On peut créer ainsi une feuille de style très simple pour colorer et mettre en forme notre exemple. On obtient alors une liste mise en forme comme sur cette copie d’écran :
Nouveautés CSS 3 : c’est quoi les Media Queries ? - Kiwano. Les medias queries sont une nouveauté CSS 3 qui permet de définir des styles en fonction du média sur lequel est affiché la page web. Avec les medias queries on peut limiter l’action d’un style en fonction d’informations précises comme par exemple les propriétés width, height, et color du navigateur. Dans un article précédent, nous vous avions parlé de la beta 4 de Firefox 3.5 et de son lot d’innovations dans un article intitulé « Nouveauté Mozilla Firefox 3.5 : raccourci nouvel onglet« . Parmi ces améliorations nous revenons ici comme promis sur le support des Media Queries une des nouveautés CSS 3. Exemple @media min-width Un exemple d’application très utile des media queries serait de pouvoir définir des styles en fonction de la taille du navigateur.
On peut imaginer par exemple un site qui afficherait un texte dans une structure en colonne dont le nombre dépendrait de la taille du navigateur. Les fonctionnalités Media Queries. Typechart - Browse Web Type, Grab CSS. A centered dropline, dropdown, flyout CSS only menu. 8th February 2009 copyright © stu nicholls - CSS play Information Expanding on the previous menu this one has a centered top level sliding doors level with a centered first level dropline using sliding doors techniques with a second level dropdown and third level flyout with opacity. This one also has a current top level and current sub line level option with the sub line being overwritten, temporarily, when hovering over any other top level tab, even where there is no sub level to the hovered top level tab. This uses the latest centering techniques which should display correctly in all the latest browsers and IE6. If you would like a zip file of this menu then please email me, but note that a donation is required for use.
Copyright Because of all the time and effort spent in producing this demonstrationI would ask that you respect my copyright. Terms and Conditions This demonstration can be used subject to the following terms and conditions.