Browserling - Live interactive cross-browser testing. Paletton - The Color Scheme Designer. Flexbox Froggy - A game for learning CSS flexbox. What are the best static site generators? - Slant. CSS Shape Tools. PowerMapper.com - Website Testing and Site Mapping Tools. PowerMapper.com - Website Testing and Site Mapping Tools. Grid by Example.
Sprite CSS Generator — a script plugin for Adobe Illustrator. If you’ve never heard of sprites, have a look at css-tricks.com/css-sprites/. Open a new Adobe Illustrator document or create an new artboard within an existing one.Choose File > Scripts > Sprite CSS Generator to open the “Sprite CSS Generator” palette window. On the palette window you’ll find three sections and two buttons: Spritepath A text input, where you can define the path of your sprite image file. It overrides the name of your active artboard, so that it stays stored inside your Adobe Illustrator document. If you’re using SCSS, you can also insert a variable like “$spritepath”. Fallbacks — SVG Check this option, if you want to use SVG as background-image and PNG as a fallback. Fallbacks — GIF Check this option, if you still support IE6 (and lower), which doesn’t support alpha-transparency in PNG.
Output A text area, where the generated sprite CSS code will be displayed. Generate/Update CSS A button, which will (try to) generate your sprite CSS code. Help Creating symbols [UPDATE] How SVG Fragment Identifiers Work | CSS-Tricks. I've talked a good bit about SVG's <use> around here and using it to build an icon system. The beauty of <use> is that you can reference just a part of some SVG defined elsewhere and draw just that part somewhere else. That ability allows you to build a whole system out of it, solving the "many images in one request, because that's super efficient" problem that we've solved in the past with CSS sprites and icon fonts. But <use> means inline SVG. It doesn't help you when you want to use a part of a larger SVG in SVG-as-<img> or SVG-as-background-image.
Getting the SVG Ready For It One way to do this is to lay out the SVG (sprite, I guess, let's just call it a sprite) like a graphical "CSS" sprite. We're specifically doing it this way, because we ultimately are going to shift some viewBox numbers around to only reveal a part of this image, just like we used to do with CSS sprites. In this little mini demo, we're using three icons that are 32x32 each. Demo of this kind of thing in the spec. Masonry. The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)
By Joel Spolsky Wednesday, October 08, 2003 Ever wonder about that mysterious Content-Type tag? You know, the one you're supposed to put in HTML and you never quite know what it should be? Did you ever get an email from your friends in Bulgaria with the subject line "???? ?????? ??? I've been dismayed to discover just how many software developers aren't really completely up to speed on the mysterious world of character sets, encodings, Unicode, all that stuff.
But it won't. So I have an announcement to make: if you are a programmer working in 2003 and you don't know the basics of characters, character sets, encodings, and Unicode, and I catch you, I'm going to punish you by making you peel onions for 6 months in a submarine. And one more thing: In this article I'll fill you in on exactly what every working programmer should know. A Historical Perspective The easiest way to understand this stuff is to go chronologically.
And all was good, assuming you were an English speaker. Unicode Hello Next: Iconic/illustrator-svg-exporter. Browserhacks. GreenSock | Homepage. SVGOMG - SVGO's Missing GUI. Icon System with SVG Sprites. I’ve been a big proponent of icon fonts. Lots of sites really need a system for icons, and icon fonts offer a damn fine system.
However, I think assuming you’re good with IE 9+, using inline SVG and the <use> element to reference an icon is a superior system. First let’s cover how it works. A nice way to handle your icons is to have a folder full of .svg files. They can be colored, not colored, multiple shapes, sizes, whatever. You can let Illustrator (or whatever) save it however, with all the cruft that comes along for the ride: Combine the .svg files You can manually do this if you want. It should just be an <svg> tag, with a <defs> tag (which just means you are defining stuff to use later), and then a bunch of <g> (group) tags.
Again you can do that by hand, but of course that’s a bit laborious. If you’ve never used Grunt, you can do it. You can install it with: npm install grunt-svgstore --save-dev Make sure the task is available with: grunt.loadNpmTasks('grunt-svgstore'); <! Browser Support. Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks. If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are using inline SVG and using icon fonts. Let's compare. Icons are Vector There are big advantages to vector icons: resizable up and down without losing quality, extra sharp on retina displays, and small file size among them. In a recent personal example, while converting some icons from fonts to SVG on CodePen, some of the font icons were noticeably less sharp than the ones I converted over.
CSS Control The big win for inline SVG here is probably multi-color icons. Positioning Weird Failures Forced Failures Semantics Accessibility Ease of Use Browser Support Winner It all comes down to browser support. Please Stop "Fixing" Font Smoothing - The Usability Post. I wrote two posts on the topic of WebKit font smoothing before, but unfortunately the situation has grown worse since then.
In allowing the designer to pick their own font smoothing mode with the -webkit-font-smoothing CSS property, WebKit developers have opened up an opportunity for typographic abuse, namely, the disabling of subpixel font rendering. As I mentioned before, WebKit gives designers three font smoothing modes: Nothing, which gives you jagged fontsSubpixel-rendering, i.e. the default font smoothing mode that is used for most other stuff on your desktop OS (mobile devices don’t use subpixel rendering due to having to suport both vertical and horizontal screen orientations)Antialiased, which disables subpixel-rendering and smoothes the font on the level of the pixel, as opposed to the subpixel.
Why the choice? Abusing antialiasing But upon closer inspection, antialiased text is always blurrier than subpixel rendered text. It’s not a “fix” Why do designers keep misusing it? Blueprint: Slide and Push Menus. Magnific Popup: Responsive jQuery Lightbox Plugin. Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device(for jQuery or Zepto.js). Examples Single image lightbox Three simple popups with different scaling settings. 1 — fits horizontally and vertically, 2 — only horizontally, 3 — no gaps, zoom animation, close icon in top-right corner.
Lightbox gallery You may put any HTML content in each gallery item and mix content types. In this example lazy-loading of images is enabled for the next image based on move direction. If you wish to add touch-swipe support, check my article on the Smashing Magazine, or new PhotoSwipe script. Zoom-gallery If you wish to open the popup only after image is fully loaded, you may preload image via JS. Popup with video or map In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.
Dialog with CSS animation Popup with form Ajax popup Modal popup Open modal Dismiss Error handling Fast. PatternBolt. Centering in CSS: A Complete Guide. Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for. So let's make it a decision tree and hopefully make it easier. I need to center... Horizontally Is it inline or inline-* elements (like text or links)? You can center inline elements horizontally, within a block-level parent element, with just: This will work for inline, inline-block, inline-table, inline-flex, etc. Is it a block level element? You can center a block-level element by giving it margin-left and margin-right of auto (and it has a set width, otherwise it would be full width and wouldn't need centering).
This will work no matter what the width of the block level element you're centering, or the parent. Note that you can't float an element to the center. Is there more than one block level element? Vertically. Building a Responsive Mega Menu with Foundation. Mega menus are a design trend often used on large sites such as e-commerce and educational sites. For example, eBay’s mega menu: But what exactly is a mega menu? Well, let’s see how Jakob Nielsen describes it: A mega menu (a big, 2-dimensional drop-down panel) groups navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users’ choices. So, with that in mind, this article aims to help you understand how to build a simple responsive mega menu with Foundation. If you’d like to jump ahead, the final demo is located here.
Building the Main Menu Before jumping into the process of creating our custom mega menu, let’s first build the main menu itself (i.e. the “topbar”). As you can see, nothing fancy happening here. The code below shows the markup for the top bar: Notice that we wrap the menu within a div element, with a class of contain-to-grid.
At this point we’re ready to start focusing on the mega menu (which we will give a class of m-menu). Conclusion. Fillerati - Faux Latin is a Dead Language. UI Designs for the Web. Manuel de créativité.
9 plugins jQuery pour réaliser des effets de parallaxe. Tendance désormais bien ancrée dans le paysage du webdesign, le défilement parallaxe (ou scrolling différentiel) est une technique qui consiste à donner une impression de profondeur à travers des portions de décors défilant à vitesse variable. Voici une liste non exhaustive de 9 plugins jQuery pour mettre en place des effets de parallaxe sur votre site web. Superscrollorama, successeur de l’excellent Scrollorama, permet de réaliser de superbes animations et effets parallaxes lorsqu’on scroll sur une page web, notamment grâce aux transformations CSS3. Seulement quelques lignes de code pour un scrolling original et amusant. 2. jParallax jParallax est un plugin jQuery qui permet de mettre en place facilement un effet de parallaxe sur un groupe d’éléments HTML. 3.
Curtain.js est un plugin jQuery permettant de réaliser une page web avec un défilement parallaxe des différentes sections sous forme de « panneaux ». 4. Crash Course: Building an Email Newsletter. If you’ve spent your career dealing with web standards — and enjoyed watching the progressive disappearance of those creaky, old, legacy browsers — your first contact with email newsletter building might be a little painful. You are going to need to throw out a lot of your web design golden rules to get the compatibility you’ll need with email clients. In fact, while in 2013 the Standard Web Project Team had been able to say “Our Work Here is Done”, the road to email standards still appears to be very long indeed. You can see an example of how email clients render the same content looking at Email Standard Project Acid tests. In the screenshot below, you can see how the same mail appears in Apple Mail and Gmail: Email design does require you to reinvent some of your skills.
So, let’s start by summarizing the main points of email design to give you the widest cross-email-client compatibility: Email building workflow Set up a prototype In this phase you’ll want to create a design that: HTML EMAIL BOILERPLATE v 0.5 updated 11/5. Email Client Market Share and Popularity - October 2014. Email Design Inspiration by HTML Email Designs. Subtle Patterns | Free textures for your next web project. Le Brief Créatif de A à Z... par un créatif. Allez, c’est décidé, je me lance dans un petit topo sur le brief créatif. Quelques demandes ont suffit à me convaincre, et puis c’est dans la suite logique de mon article sur la Copy Strategy. Alors le brief créatif, what the phoque ? Primo, ne le confondez pas avec le brief client ou avec la copy strat’, c’est différent. Comme son nom l’indique, le brief créatif s’adresse avant tout… aux créas.
Allons-y franco. Non, le brief créatif n’est pas synonyme de copy strategy La copy strat’ est la plateforme stratégique de l’annonceur. Le brief créatif, kicékigère ? Quand le brainstorming suit le brief créatif Dites merci, s’il est réussi, à votre chef de pub (ou chef de projet à tendance commerciale). Et toi, petit créatif, que fais-tu ? Si tu es éclairé(euh), tu écoutes attentivement. Le brief créatif de ma grand-mère 1 / Le contexte : tout tout tout sur le client et son marché, mais en 5 à 10 lignes. 2 / La problématique : mais pourquoi le client fait-il appel à nous, c’est quoi son problème ?