background preloader

Basic Ready-to-Use CSS Styles

Basic Ready-to-Use CSS Styles
Related:  CSS

Les propriétés CSS :nth-child et :first-child Afin de styliser en CSS une liste d’éléments, que ce soit pour la navigation de votre site web ou pour une liste dans vos contenus, vous pouvez utiliser un « ID » différent pour chacun de vos items. Cependant, cela aura comme inconvénient de vous créer plusieurs lignes de codes qui auraient pu être évitées à l’aide de différentes propriétés telles que :nth-child, :nth-of-type, :first-child et :last-child. Ces propriétés sont également très utiles lorsque vous avez une liste avec énormément d’éléments. Voici un article illustrant à merveille l’utilisation de chacune de ces propriétés CSS dans différents contextes afin d’avoir un contrôle absolu sur vos listes HTML. L’article suivant a été écrit par Chris Coyier du site web CSS-Tricks.com Sélectionner seulement le 5e élément Si vous devez sélectionner seulement le 1er élément de la liste, vous pouvez utiliser ceci li:first-child ou tout simplement li:nth-child(1). Tout sélectionner sauf les cinq premiers Sélectionner seulement les cinq premiers

#eCSStender.org { content: "Homepage"; } Heading Set Styling with CSS We choose to go to the moon. We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win, and the others, too. This is a simple title of level 2 The surface is fine and powdery. Another one First, I believe that this nation should commit itself to achieving the goal, before this decade is out, of landing a man on the moon and returning him safely to the earth. This one goes deeper A good rule for rocket experimenters to follow is this: always assume that it will explode. Even deeper The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. And a level-3 title again It has been said that astronomy is a humbling and character-building experience.

Kick-Start Your Project: A Collection of Handy CSS Snippets Don't start your project with an empty style sheet: there are many great snippets that can make your life easier and speed up web development. We are going to show you some handy snippets that you might find useful for kick-starting your next project. In one of the previous articles “Basic Ready-to-Use CSS Styles”, we saw how we could create a suite of classes to help the design process while making a website. I hope you made your own set of patterns! Today we are going to see how we can continue this exercise with some things a little bit more technical. Indeed, isn’t there some properties or CSS tricks you always have to check the syntax for, every single time you want to use them? Of course you do my friends! Before we go, let me tell you how I divided this article: Shorthand classes Let’s begin with shorthand classes, which are a very common things. The best example is probably the one where you have some text and an image you want to include on the left side of the text. Miscellaneous

Design a Coffee Shop Menu Layout from Scratch with Photoshop and InDesign – Part 2 This is the second part of this tutorial series about creating a ready to print booklet menu for an imaginary coffee shop named "Violet Coffee." In this final part of the two part series, you'll learn to create a ready to print booklet on InDesign, work with master pages, text, tabs, paragraph and character styles, import external files and actually print the booklet. Let's move on! Republished Tutorial Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. The workflow in this tutorial series is excellent preparation for creating this kind of work for clients. In the Part 1of this tutorial series , I showed you how to design a background for both the cover and internal pages, besides two additional graphics that we will use later. Let's get it started, open Adobe InDesign, go to File > New > Document. First of all you need to show the Pages Panel by going to Window > Pages (F12). Now it's time to import the background elements.

Caption Hover Effects - Demo 7 Previous Demo Back to the Codrops Article Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 Fullscreen Layout with Page Transitions A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items. View demo Download source Today we’d like to share an experimental responsive layout with you. All effects are done with CSS transitions and controled by applying classes with JavaScript. Please note: this only works as intended in browsers that support the respective CSS properties. The beautiful illustrations used in the works section of the demo are by talented Isaac Montemayor. Let’s take a look at some screenshots: The initial screen has the four flexible boxes. When clicking on a box, it get’s expanded to fullscreen. The view of a box that is expanded. In the works section, we add a thumbnail grid which will reveal a details panel once we click on an item. The navigation through the items has the same page transition. We hope you like this little experiment and find it inspiring!

Defending Presentational Class Names Should presentational class names always be avoided or is that too dogmatic? As web development changes, perhaps it's time to reexamine the issue. The use of presentational class names in web development has been considered a bad practice for about as long as classes have been around. The notion is so ubiquitous that when making that claim, few people even bother to justify it anymore, as if it’s self-evident. Even the HTML5 specification draft states the following: authors are encouraged to use [class names] that describe the nature of the content, rather than [class names] that describe the desired presentation of the content They never say why you’re encouraged to do this. However, recently an increasing number of people have started to question this age-old advice. The problem comes when generally good advice like prefer semantic class names gets turned into never use presentational class names under any circumstance. Best practices for writing front-end code shouldn’t be dogmatic.

créer et améliorer un blog: Derniers messages (7) "Lire la suite" : changer la présentation Il est possible de changer la présentation du lien "Lire la suite" permettant de voir la totalité du message. Pour cela, il suffit de modifier le template : Résumés AUTOMATIQUES de messages "Lire la suite" La page précédente explique comment afficher manuellement le début d'un message avec la mention "Lire la suite". Changer le curseur Faire tomber des étoiles du curseur Le curseur est la flèche que l'on déplace sur l'écran avec la souris. Mettre un message dans une image Un message est plus attirant s'il est inséré dans une image, comme le message "Ajouter un lien vers ce site" figurant dans la colonne de gauche. Ajouter un bouton "J'AIME" de Facebook Le bouton "J’aime" de Facebook est l’équivalent du bouton "+1″ de Google (disponible ici). Votre blog traduit en 57 langues Traducteur avec drapeaux Pour permettre aux visiteurs d'obtenir immédiatement une version du blog dans une autre langue, il suffit d'ajouter ce gadget "Traductions" :

Root Path of your HTML directory for script links CSS Background Animations Background animations are an awesome touch when used correctly. In the past, I used MooTools to animate a background position. Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks. We'll use CSS animations instead of transitions for this effect: With the animation code in place, now it's time to apply it to an element with a background image: The cloud background image within the sample element will elegantly scroll from left to right over a duration of 40 seconds, seamlessly repeating an infinite number of times. How epic is it that we don't need to use JavaScript to manage these animations anymore?

A Collection of Page Transitions A showcase collection of various page transition effects using CSS animations. View demo Download source Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. While some effects are very simplistic, i.e. a simple slide movement, others make use of perspective and 3d transforms to create some depth and dynamics. Please note that this is just for showcasing some interesting effects and for inspiration. The CSS animations are divided into different sets, depending on what they do. Please note: this only works as intended in browsers that support the respective CSS properties. For showcasing the page transitions, we’ve used the following structure: The perspective container is relative and we add a perspective of 1200px to it. I hope you enjoy this and get inspired to build some exciting things!

Absolute Horizontal And Vertical Centering In CSS Rethinking Mobile Tutorials: Which Patterns Really Work? Pattern libraries are a great source of inspiration and education for designers. But common practice doesn’t always equal best practice. In this post, we’ll look at why many common tutorial patterns are ineffective and how you can leverage game design principles to increase user engagement. After the release of the first edition of Mobile Design Pattern Gallery, Intuit asked me to speak with its mobile team. Read more... After Editorially: The Search For Alternative Collaborative Online Writing Tools I’m going to let you in on a little secret: the best writers, be it your favorite authors or those that write for Smashing Magazine, don’t do it alone. Having worked with several editors — and having been a technical editor myself — I’ve really come to appreciate this aspect of the writing process. Read more... What You Need To Know About WordPress 3.9 Read more... Understanding CSS Timing Functions Read more... Read more... Read more...

Related:  CSS