background preloader

CSSGram

CSSGram
What is This? For more background on CSS Image Effects, you can check out my blog series here, or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters. Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we're doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. We are using pseudo-elements (i.e. Browser Support This library uses CSS Filters and CSS Blend Modes. Google Chrome: 43+ Mozilla Firefox: 38+ Internet Explorer: Nope Opera: 32+ Safari: 8+ For more information, check on Can I Use. Usage There are currently 3 ways to consume this library: 1. When using CSS classes, you can simply add the class with the filter name to the element containing your image. The quickest way to do this is to link to our CDN in your <head> tag: <link rel="stylesheet" href=" 2. Related:  CSSressources webdesignkscotet

Z63 | 8 Sass mixins you must have in your toolbox At their core, Sass mixins are blocks of code that you define once and can then re-use anywhere, if you are familiar with any programming language you can think of them as functions. A mixin can take multiple parameters and make calls to functions to in the end output CSS, and they are super useful when you want really clean and DRY code. Some of the mixins below are already included in the Compass library, but since I prefer not to use Compass in my projects, I decided to write them myself. So, here are the 8 mixins I think every developer should have in their toolbox. 1. Set a rem font size with pixel fallback Rem is similar to the em value, but instead of being relative to the parent element it’srelative to the font-size set in the <html>. Usage p { @include font-size(14px) } Output 2. When Sass 3.2 was released some time ago, they made it possible to define names to our media queries, which makes the usage of them a lot cleaner. 3. pattern.svgpattern.pngpattern@2x.png 4. 5. 6. 7. 8.

User Experience Design — Best sources to learn UX — Personal Growth Demand for UX designers is rapidly growing. Although the term “User Experience” has been used already in the ‘90s by Donald Norman it is stilla young field in design, which many people have a problem identifying what it really does. We wrote about prototyping tools for UX designers here. Today we would like to share some sites, books and other resources for you to get to know User Experience a bit more. Usabilla Blog Team of Usabilia Blog is doing a pretty good job! Usabilla Blog The UX Intern A monthly podcast interviewing seasoned User Experience Designers from the perspective of a UX Intern. The UX Intern UX Checklist Very helpful UX checklist, which will walk you through the whole process and all the steps in creation of User Experience. UX Checklist UX Movement Do you want to find out why so called hamburger menu will help you increase conversion? UX Movement UX Booth Articles oscillating around UX. UX Booth Design Talks — UX Design Talks — UX UXPin — Ebooks UXPin — Ebooks Udemy — UX courses

Qu'est-ce qui pourrait freiner l'Internet des Objets ? La sécurité et la protection des données Concernant le cadre juridique, la gestion des données récoltées risque de poser problème. En effet, les organismes juridiques se penchent de plus en plus sur la question. Dans son livre « Les objets connectés – Sécurité juridique et technique », l’avocat au barreau de Paris spécialisé dans la sécurisation des échanges électroniques Thierry Piette-Coudol aborde notamment le flou voire le vide juridique qui entoure l’industrie de l’Internet des Objets. Pour autant, la question de la responsabilité qui, en droit, impose de désigner le porteur d’un préjudice à autrui en cas de dommage causé de lui faire réparer ce préjudice va se confronter à la multitude de scénarios possible liés aux objets connectés. Quid également des risques encore non complètement identifiés des risques sanitaires liés à l’exposition aux ondes qui permettront de connecter entre eux ces Trillions d’objets ? Les questions environnementales Pierre Bonzom rappelle notamment que :

Colorify.js Live Editing Sass and Less in the Firefox Developer Tools Sass and Less are expressive languages that compile into CSS. If you’re using Sass or Less to generate your CSS, you might want to debug the source that you authored and not the generated CSS. Luckily you can now do this in the Firefox 29 developer tools using source maps. The Firefox developer tools use source maps to show the line number of rules in the original source, and let you edit original sources in the Style Editor. Here’s how to use the feature: 1. When compiling a source to CSS, use the option to generate a sourcemap for each style sheet. Sass Less This will create a .css.map source map file for each CSS file, and add a comment to the end of your CSS file with the location of the sourcemap: /*# sourceMappingURL=index.css.map */. 2. Right-click anywhere on the inspector’s rule view or in the Style Editor to get a context menu. Now CSS rule links will show the location in the original file, and clicking these links will take you to the source in the Style Editor: 3. 4.

designcode iOS has matured a lot over the years. In its 9th upgrade, Apple introduced a new system font called San Francisco, 3D Touch and multi-tasking on the iPad. In Xcode, you’ll find Stack Views, a fantastic tool for making your layouts more adaptive without the complexity of Auto Layout. Adaptive Layout and Multitasking With the increasing number of device resolutions to deal with, it is crucial to make your layout adaptive. How Fluid helps you adjust the design based on the Artboard size. San Francisco Font With the release of iOS 9 and El Capitan, the default font is now the San Francisco font, which is made in-house by Apple. SF Font Tracking iOS automatically adjusts the tracking value and Text/Display for San Francisco based on the font size. Use this Sketch plugin to quickly apply the correct character spacing values. 3D Touch A key new feature in iOS 9 is called 3D Touch, allowing people to quickly access options inside and outside of your app. Points and Pixels iPhone Resolutions App Icon

40 nouveaux Tutoriels de qualité gratuits pour Illustrator Adobe Illustrator est un logiciel de création vectorielle facile à prendre en main mais extrêmement complet. Au fil du temps, sa palette d’outils et de fonctionnalités n’a cessé de grandir. En maîtriser tous les aspects demande un long apprentissage mais cette longue liste de tutoriels devrait vous aider à couvrir tout ce qu’il faut savoir pour devenir un pro du vectoriel ! Après la dernière sélection de 30 tutoriels de qualité pour Photoshop, voici 40 tutoriels pour Illustrator. A vous les illustrations, personnages, infographies, interface, effets de textes ou encore design d’icônes. Illustration Créer un oeil détaillé sur Illustrator Vectoriser des lèvres pulpeuses Créer une parodie d’Angry Birds énervés Tutoriel pour réaliser une illustration de femme chic en niveaux de gris Comment réaliser un livre magique avec Illustrator Créer un masque à gaz qui ne manque pas de style Comment faire une méduse rapidement sous Illustrator Créer un ours stylisé comme une gravure Design d’icônes Divers

colofilter.css To use those filters, download the colofilter.css file, add it to the head of your document : Then to use the filters, use the proper classes on your elements, and that's it! <div class="blend-blue"><img src="image.png"/><span>lorem</span></div> Examples (click the images to copy the classes): lorem Unfortunately, it will not work with IE & Edge browsers, as well as Opera Mini, and Safari (desktop & IOS ) is not supporting the hue, saturation, color, and luminosity blend modes. See compatibility for : mixblendmode filters A polyfill is on it's way! Using source maps with Sass 3.3 One of the exciting new features in Sass 3.3 that every developer should take advantage of is source maps. As CSS pre-processors, minifiers, and JavaScript transpilers have become mainstream it is increasingly difficult to debug the code running in the browser because of differences with the original source code. For example, if you use CoffeeScript (which compiles to JavaScript) you won't see CoffeeScript while debugging in the browser. Instead, you'll see compiled JavaScript. The same problem exists for Sass which compiles down to CSS. Source maps seek to bridge the gap between higher-level languages like CoffeeScript and Sass and the lower-level languages they compile down to (JavaScript and CSS). In practice, for Sass users, this means that when you inspect an element with developer tools, rather than seeing the CSS styles associated with that element, you can see the code we really care about: the pre-compiled Sass. Generating source maps for Sass /*# sourceMappingURL=screen.css.map */

11 Ways to Improve Your Design Skills – Medium 11 Ways to Improve Your Design Skills You have a thing for design but not sure where to start? You’re falling for UI/UX ? “Nobody tells this to people who are beginners, I wish someone told me. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Simon Stålenhag Art Gallery SplashUp Online Photo Editor Externally SplashUp editor is almost the twin brother of the well-known Photoshop, and although it is far from opportunities of adobe product among online editors, it is one of the most versatile. Thus functionality of SplashUp online photo editor has no effect on its performance. Among the advantages of SplashUp online notice easily scalable window, drag to a convenient location to the user workspace tools, the ability to create an image from scratch, upload photos to social networks, and editing of images from a web camera, cloud services support. In addition to the convenient interface, the SplashUp photo editor pleases users by available to them opportunities, the most important of which are the availability of variety of layers and filters that are used to process images, as well as many standard tools, such as cropping, rotating, experiment with the brightness and color.

Using SVG By Chris Coyier On SVG SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. #Why use SVG at all? Small file sizes that compress wellScales to any size without losing clarity (except very tiny)Looks great on retina displaysDesign control like interactivity and filters #Getting some SVG to work with Design something in Adobe Illustrator. Notice the artboard is cropped up right against the edges of the design. You can save the file directly from Adobe Illustrator as an SVG file. As you save it, you'll get another dialog for SVG Options. The interesting part here is that you can either press OK and save the file, or press "SVG Code..." and it will open TextEdit (on a Mac anyway) with the SVG code in it. Both can be useful. #Using SVG as an <img> If I save the SVG to a file, I can use it directly in an <img> tag. In Illustrator, our artboard was 612px ✕ 502px. Check out this Pen! #Browser support if (! <svg ...> ...

Centering With Sass Centering in CSS is well known for being a tedious task. It is kind of the running gag from the language, leading to jokes such as “we managed to send men on the moon, but we can’t vertically align in CSS”. While CSS is indeed a bit tricky when dealing with centering, especially vertical centering, I feel like those jokes are a bit unfair. This article is not intended to explain how these methods work, but how we can wrap them in a Sass mixin for friendly and easy usage. All good? What is it all about? First, we will focus on centering an element within its parent as it is the most common use case for absolute centering (modals, content in section, etc.). So our mixin is going to basically do this: position the top left corner of the element absolutely in the middle of the container, then shift if back of half its width and half its height with either CSS transforms or negative margins depending on whether or not dimensions are passed to the mixin. You would then use it like this:

Related: