background preloader

Necolas/normalize.css

Necolas/normalize.css
Related:  CSSOutils utiles

CSS3 Demos | Grains of Sand Web Design CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules. 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.

La technique du Reset CSS Le reset CSS est une technique qui consiste à réinitialiser à 0 la valeur de certains éléments HTML afin d'éviter une partie des différences d'affichage sur les divers navigateurs. Avant d'aller plus loin, rappelons que l'usage de cette technique est controversé. Si vous souhaitez l'utiliser, il est recommandé d'utiliser un Reset CSS évolué, comme celui proposé par Eric Meyer, et d'éviter l'utilisation du sélecteur universel (*). Le Reset CSS classique (déconseillé) Les navigateurs n'utilisent pas toujours les mêmes marges et padding par défaut pour les différents éléments HTML. Si on souhaite aller plus loin et gommer d'autres différences en remettant tout «à zéro», on peut aboutir au code suivant: Problèmes avec cette technique Le problème de cette technique, c'est qu'elle annule certains styles par défaut des navigateurs qui sont réellement utiles. Seulement voilà: le sélecteur universel * a pour avantage tout comme inconvénient de sélectionner sans distinction tous les éléments HTML.

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!

Une feuille de styles de base pour bien démarrer vos projets Avec cette astuce, je vous propose un outil et une méthodologie pour partir du bon pied lorsque vous attaquez les styles CSS d'un nouveau projet. Un outil? → une feuille de styles CSS qui corrige ou définit les styles des principaux éléments de vos pages. (Yay, du code à copier-coller!) Une méthodologie? → explorer ce code, se l'approprier, le modifier pour son projet. Quels objectifs? Utiliser une feuille de styles de base, quelle qu'elle soit, répond à deux objectifs principaux: Gommer certaines différences entre les styles par défaut des navigateurs. Notre feuille de styles de base Le code CSS suivant constitue la partie "reset" de la feuille de styles que nous utilisons chez Alsacréations pour nos projets professionnels. L'ensemble de ce projet de "framework CSS" minimaliste se nomme KNACSS est est disponible en libre téléchargement. Rappel : n'employez pas ce reset CSS sans avoir parcouru au minimum les indications laissées dans le code complet commenté. Où placer ces styles? Bonus

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!

Box-shadow generator Cet outil permet de contruire des effets CSS de type box-shadow effects, pour ajouter des effets d'ombrage à vos objets CSS. box-shadow generator HTML Content CSS Content JavaScript Content Étiquettes et contributeurs liés au document Contributeurs à cette page :kiux Dernière mise à jour par :kiux, SmartAdmin - Responsive WebApp Announcements! Please close the default WrapBootstrap iFrame when viewing from IECheck out SmartAdmin Bug Tracker for all reported issues and wish listsVersion 1.4 now comes with Pure HTML Version, Advanced PHP Version with custom functions and AngularJS Version (to help you get started)! If you have already purchased SmartAdmin you can redownload all future updates, at no extra cost, by visiting this link: SmartAdmin WebApp - goes beyond the ordinary admin template. What our customers are saying... Features include: Change colors using LESS / SASS variables or use included themes Supported resolutions Special Features: Layout API Collapse Navigation (show on hover)Fixed header, ribbon and navigationMinified navigation - minifies the navigation to show only icons, reveals children on parent hover.metro type shortcut dropdown (click the username to show) Will be included in the future: Be smart in 2014 and go with SmartAdmin. Update 1.0

CSScomb: Sorting CSS Properties, The Better Way This is our seventh article in a series that introduces the latest useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree1; the second introduced Foundation2, a responsive framework; the third presented Sisyphus.js3, a library for Gmail-like client-side drafts. The fourth shared a free plugin called GuideGuide4 with us, and later we’ve announced Erskine’s responsive grid generator Gridpak5 and JS Bin6. This time we present CSScomb, a tool to help you sort and categorize CSS properties in your code to improve maintenance. As of this writing, Web browsers support about 200 different CSS properties. CSScomb7 is a utility to sort CSS properties within each selector declaration in a predefined order. The CSScomb algorithm is designed to “think” as a human editor, not as a dumb robot parsing CSS. Here’s an example of how disarranged code can be fixed by CSScomb: On the left, unsorted code.

Responsive Web Design: Layouts and Media Queries With the growing number of Smartphone produced in the last three years and the diversity of screen sizes it’s practically impossible to ignore users that browse on a mobile device. Whether they use an Android phone, Windows Mobile phone, a BlackBerry device or an iPhone, whether they are on a tablet, on a Smartphone or on a big screen, each user deserves the best experience possible. As designers, it is our goal to provide those users a nice experience browsing the websites we created, whatever the device used to browse is. Today most of the clients want their website to be mobile compatible, so this is particularly challenging. Creating a version for each device is impossible, due to the number and diversity of those devices, but also simply because we don’t know what will be created tomorrow. That’s where the concept of “Responsive Webdesign” comes to the rescue. A responsive website is a website that will respond and adapt to the user’s behavior and screen size. Basic Fluid Layout

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules.

Related: