Comment rédiger les mentions légales de son site ? Bien que les mentions légales soient obligatoires on ne sait pas toujours quoi y mettre exactement. Elles font partie néanmoins des incontournables d’un site internet et nécessitent que l’on se penche un peu sur ce contenu. Responsable de publication, hébergement, CNIL… : petit guide d’écriture des mentions légales… Les mentions légales, kezako ? Les mentions légales sont des informations concernant un site internet que l’éditeur soit une personne physique ou morale, et qu’il s’agisse d’un site personnel ou professionnel. Mais au-delà de l’aspect législatif les mentions légales sont également une sécurité pour les internautes car vous leur assurez une certaine transparence et instaurez un climat de confiance. Si les mentions légales sont obligatoires, il existe donc des risques si elles ne sont pas clairement présentes sur votre site. Que doivent comporter les mentions légales ? Pour une personne physique (blog par exemple) Pour une personne morale (entreprise, association etc…)
AppGyver Transit - CSS transitions and transformations for jQuery What about older browsers? Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. // Delegate .transition() calls to .animate()// if the browser can't do CSS transitions.if (! Fallback to frame-based animation If you would like to fallback to classic animation when transitions aren't supported, just manually redefine .transitition to .animate. (Note: if you're using custom easing, you may need to also use jQuery Easing, and restrict your use of easing options to the ones defined there.) $.fx.speeds. Default duration Transit honors jQuery's default speed, $.fx.speeds. Custom easing Define custom easing aliases in $.cssEase. Webkit: prevent flickers Having flickering problems in Webkit? Antialias problems in Webkit? Force hardware-acceleration in Webkits to prevent text flickering.
Live Tools - Form Builder Form Container Form Title Corner Roundness Border Thickness Highlights & Shadows Container Colors Form Fields Field Titles Field Colors Button Settings Highlights The Ui Store is packed with tons of Ui tools, premium quality design resources and other cool Ui design goodies. <form class="form-container"> <div class="form-title"><h2>Sign up</h2></div> <div class="form-title">Name</div> <input class="form-field" type="text" name="firstname" /><br /> <div class="form-title">Email</div> <input class="form-field" type="text" name="email" /><br /> <div class="submit-container"> <input class="submit-button" type="submit" value="Submit" /> </div> </form>
10 Awesome Free Tools To Make Infographics Advertisement Who can resist a colourful, thoughtful venn diagram anyway? In terms of blogging success, infographics are far more likely to be shared than your average blog post. This means more eyeballs on your important information, more people rallying for your cause, more backlinks and more visits to your blog. In short, a quality infographic done well could be what your blog needs right now. Designing An Infographic Some great tips for designing infographics: Keep it simple! Ideas for infographic formats include: Timelines;Flow charts;Annotated maps;Graphs;Venn diagrams;Size comparisons;Showing familiar objects or similar size or value. Here are some great tutorials on infographic creation: Creating Your Infographic Plan and research.If required, use free software to create simple graphs and visualisations of data.Use vector graphic software to bring these visualisations into the one graphic. Free Online Tools For Creating Infographics Stat Planet Hohli Creately New York Times Many Eyes Wordle
CSS Animated Hamburger Icon · Elijah Manor 04 Mar 2014 Problem I’ve been working more on mobile web these days and thought it would be fun to animate the prolific hamburger nav icon. Non-Animated CSS Hamburger Icon You could use Font Awesome or an image to represent the hamburger, but those aren’t necessary. The following CSS will make the span the meat of the hamburger and the before and after pseudo-elements will serve as the buns. The above HTML and CSS are visually represented in the following CodePen. Animated CSS Hamburger Icon Now, we get to the fun stuff… let’s animate this hamburger icon! In CSS we are using a transition and transform to rotate the before and after psuedo-elements and fade-out the middle bar to create our X shape. Note: I am using transition and transform, which is supported in IE10+ & other browsers. Note: The CodePen is using -prefix-free, which automatically adds any necessary vendor prefixes. Note: classList as limited support (IE10+ & other browsers). Conclusion
Raccourcis Photoshop (mac et pc) « Blog Tuto On s’est dit que ça vous ferait plaisir.. Un joli et joyeux regroupement, de ce qui nous semble être les raccourcis clavier Photoshop les plus importants. Un peu manuel d’utilisation, aussi, qui assume pleinement le rose ; cette couleur à travers laquelle vous allez, désormais, voir votre life ! De quoi gagner en efficacité, en confort d’utilisation et en dextérité. Une liste d’enchainements de touches, d’ailleurs, qui peut faire parfois penser à Tekken, dans toute sa rageuse précision ! Bien maîtrisé, plus de limite. N.B. Raccourcis Photoshop Pc Raccourcis Photoshop Mac
CSS & HTML 5 explained NOTE: Last major update: May 28, 2011 While Safari, Firefox, Chrome and Opera all support versions of border images, they only support the shorthand version of that propery. At the time of this writing, they do not support the individual properties of border-image-repeat, border-image-slice, border-image-width, border-image-source, etc. In addition, they do not all support the same property and values the same way. Note: The properties link to the W3C specifications. The individual properties, values and browser support and quirks in Detail border-color The border-color property allows you to define the color of the border on elements upon which you are set a border. Property Values for border-color transparent | rgb(r, g, b) | #RGB (#fff) | #RRGGBB (#ffffff) | colorName (green) | rgba(r, g, b, a) | hsl(h, s%, l%) | hsla(h, s%, l%, a) | inherit | currentColor Browser support for border-color Browser quirks in rendering border-color document.getElementById("myID").style.borderColor border-style
UI Animation and UX: A Not-So-Secret Friendship · An A List Apart Article Using the words “animation” and “the web” together tends to conjure up memories of frantic searches for the “skip intro” button to save ourselves from a terrible sensory assault. Animation on the web has hit some pretty sad lows, there’s no arguing that. But adding motion to our work can be meaningful and functional—when we find the right circumstances. Article Continues Below When used as more than just a subtle design detail, animation can provide cues, guide the eye, and soften the sometimes-hard edges of web interactions. A CSS animation refresher#section1 This article uses CSS animations and transitions in the associated examples. CSS animations are what we most closely associate with traditional animation. CSS also has transitions—which, as it happens, can also be used to make things move. In practice, animations and transitions are often used together, so I’ll use the term animation in a general sense to indicate them both. Softening the edges#section2 1. 2. 3. Go forth and animate!
Beautiful Examples of Flat Icons Design Flat Design is one of the newest approaches in web design, aiming for simplicity and powerful visual impact and using shapes as patterns and backgrounds. Microsoft’s Metro user interface is probably the most popular Flat Design example. We already discussed the Flat Design approach in-depth, and we did it for quite some time now. Most of you know Designmodo promotes Flat Design with proudness and designers its own framework according to the Flat Design principles. Therefore today we took our time to browse around the web and find even more flat design examples, only this time we will focus mostly on icons, not on web designs as whole. Responsive Icon This icon can be used to mark themes and layouts which are responsive and fit every device perfectly. Calendar and Night Icon There are two icons here: there is the calendar icon, which in my opinion is the result of some amazing work, and a more abstract icon, which could be used for activating a “sleep mode” for example. Mail Icon Iconex
Web4all - En route pour le housing ! hij1nx/levelweb Fresh Resources for Designers and Developers – April 2013 We are already in the second quarter of the year. While some people might fool you with jokes, we will share goodness instead, especially for designers and developers. In this round, we have some great tools for you to facilitate your work — from a tool that allows you to create customized grid paper for sketching or wireframing to one that aid optimizing your webpage load. Let’s check them out. Paperkit If sketching and wireframing is what you always do before Photoshop(ing), then you need this tool, Paperkit. Then you can download it in PDF format for printing. Web Development Estimator As a freelance worker, your client will certainly request your service pricing rate. One of the limits of this tool, however, is that it only supports Dollar, Pounds, Yen, and Euro for the currency symbol. Lorem Pixel Lorem Pixel is a tool to generate a dummy image for you to design prototypes, both for Print and Web. All in all, it’s a great tool to complement its sibling Lorem Ipsum, worth bookmarking.
DevTools Extensions For Web App Developers The past year has seen many leaps made to improve developer productivity through better tooling. We're paying increasing attention to our workflow and many of us have spent time optimising our usage of tools like Grunt, Bower, Yeoman and the terminal. Another important area worth spending time on is your debugging workflow – if you're like me, this starts with the Chrome DevTools. When building an application with a specific framework or language abstraction, there's actually some additional tooling available to you in the form of recent DevTools extensions. In this post, I'll share a quick summary of the latest developments in this area, ranging from the recent Ember extension Yehuda Katz presented at EmberCamp through to less well known extensions for Backbone and KnockoutJS developers. Note: Canary DevTools disables icons in the toolbar by default, but I've re-enabled them via the Settings cog to aid with visualisation. Ember Inspector Backbone DevTools Angular Batarang Thorax Inspector