Mise en forme rapide sous la forme de colonne avec du CSS
Tester son site dans tous les environnements possibles December 12, 2013 – 11:59 am La difficulté pour un développeur ou un webdesigner est de tester son travail sur des configurations utilisées par les visiteurs de son site. Ressource pour le “flat design” November 26, 2013 – 7:39 pm Aujourd’hui la mode est au flat design alors dites adieu au effet d’ombre et autres mises en forme qui sont has been! Tester l’affichage de son site internet avec screenfly September 9, 2013 – 11:07 am Screenfly est le genre d’outil que l’on met en favori tout de suite car il est vraiment utile pour ceux qui développent ou gèrent un site internet. Choisir une couleur rapidement à l’écran March 28, 2013 – 10:48 am Voici un site internet qui propose un service bien fichu et diablement pratique. Passez aux formulaires HTML5 November 22, 2012 – 4:34 pm Superbe infographie sur les voitures de James Bond November 6, 2012 – 11:47 am Convertir des couleurs hexadecimales pour les fichiers KML September 25, 2012 – 9:14 am
Awesome Media Queries in JavaScript - enquire.js
The Lowdown What is it? enquire.js is a lightweight, pure JavaScript library for responding to CSS media queries. JavaScript callbacks for media queries matching and unmatching. Clean & intuitive API Absolutely tiny - around 0.8kb minified & gzipped! Why should I use it? In responsive design, CSS media queries can only take you so far. enquire.js allows you to harness media queries in JavaScript, giving you the tools to create advanced responsive sites. Dependencies? None! The most you will need to do is provide a matchMedia polyfill if you wish to support old/incapable browsers. Downloads & All That Jazz Latest Build Grab the latest code, ready to go, from one of the locations below: Development — unminified Production — minified If you wish to browse/fork the source, you can do so on GitHub. Install via Bower To install via bower, enter the following at the command line: bower install enquire Install via npm To install via npm, enter the following at the command line: npm install enquire.js Match
50 New Useful CSS Techniques, Tutorials and Tools
Advertisement These are great times for front-end developers. After months of exaggerated excitement1 about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes2. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing! In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. CSS Techniques Now Playing: transitions and animations with CSS3Tim Van Damme showcases a fairly simple CSS design that uses transitions, animations and subtle hover-effects to produce an engaging user experience. CSS3 range slider, checkbox + radio button4A demo of HTML input elements made with CSS3. The Simpler CSS Grid13Why restrict your layout so that it can fit into this 960gs?
media queries for common device breakpoints | Responsive Web Design
The @media query is 1/3 of the recipe for responsive design. It is the key ingredient that, in it’s simplest form, allows specified CSS to be applied depending on the device and whether it matches the media query criteria. Before you start copying and pasting below, read why you don’t need device specific viewports.
8 examples of stunning CSS3 text effects
How to Create Inset Typography with CSS3 Just two years ago, we all used Photoshop to create beautiful inset typography. Now, you can do it using only CSS3. This great tutorial will help you getting started. View tutorial: Create Beautiful CSS3 Typography Technically speaking, styling text is very simple. Create a Letterpress Effect with CSS Text-Shadow The “letterpress” effect is very popular in web design. How to Create a Cool Anaglyphic Text Effect with CSS Chris Spooner again! Text Rotation with CSS Why should text always be displayed horizontally? Text Embossing Technique With CSS One more technique I’ve done exclusively in photoshop in the past. Adding an outline to your text using the CSS3 text-stroke property Although this technique only works in webkit for now, I must admit that I really love it. CSS textured text
Responsive design – harnessing the power of media queries
Webmaster Level: Intermediate / Advanced We love data, and spend a lot of time monitoring the analytics on our websites. Any web developer doing the same will have noticed the increase in traffic from mobile devices of late. Over the past year we’ve seen many key sites garner a significant percentage of pageviews from smartphones and tablets. These represent large numbers of visitors, with sophisticated browsers which support the latest HTML, CSS, and JavaScript, but which also have limited screen space with widths as narrow as 320 pixels. Stacked content, tweaked navigation and rescaled images – Chromebooks Implementation As a starting point, simple, semantic markup gives us pages which are more flexible and easier to reflow if the layout needs to be changed. Liquid layout is a good start, but can lack a certain finesse. Viewports When is a pixel not a pixel? In reality you may find you need to use different breakpoints depending on how your site flows and looks on various devices.
CSS 3 : outils et astuces pour vos effets » WebdesignerTrends – Ressources utiles pour le webdesign, actus du web, sélection de sites et de tutoriels
On ne peut pas encore dire que le CSS 3 s’impose en webdesign, mais heureusement il gagne petit à petit du terrain. Pour éviter de créer tous vos effets « à la main », je vous propose une sélection d’outils utiles pour travailler mieux et plus vite. Au début pour certains effets, il vaut mieux posséder une cheat sheet CSS3 pour se rapeller de l’ordre des propriétés. Pour aller plus vite, des sites comme ceux ci-dessous peuvent réellement vous aider… CSS Gradient Générator : Pour des dégradé CSS en quelques clics de souris. CSS Transform : Les effets de transform en live. CSS Tricks – Button Maker Outil de création de bouton full CSS, bien réalisé. CSS 3 Please Amusez-vous avec les propriétés pour voir l’effet directement sur un blog. CSS 3 Gradient Une vidéo pour comprendre les dégradés. 10 boutons CSS 3 10 modèles de boutons pour vos sites. CSS 3 – cubes 3D Expériences en avec les propriétés 3D. CSS 3 – Menu elastique Menu élastique au passage de la souris CSS 3 – Comparateur de formules
Taille des écrans, responsive design, et point de rupture | Mekalab
Très régulièrement, on me pose des questions sur les tailles des écrans pour faire un design « responsive ». Pour ceux qui connaisse le terme, mais qui ne savent pas vraiment ce que cela veut dire, sachez qu’on appelle « design responsive » (ou responsive design ) la capacité d’un site web à s’adapter au terminal de lecture. Mais pourquoi faire ? Eh bien avec le nombre d’appareils différents capables d’afficher une page web, il a fallut réfléchir à un moyen pour afficher proprement un site (et de façon légèrement différentes) quelque soit le support: écran d’ordinateur, tablette, smartphone, ou télévision. Pour cela, on s’appuie sur la technologie des feuilles de style (CSS), qui permet de modifier l’affichage d’un élément d’une page web en fonction de la taille de l’écran (ou du navigateur ). Exemple de mise en page responsive Tailles des écrans Ecran d’ordinateur (que l’on appelle « Desktop » ) – 1024px – 1600px Tablette Smartphone Les points de ruptures Un point de rupture, c’est quoi?
