はてなブックマーク

Cropping & Scaling Images Using SVG Documents The SVG snippet that replaces a CSS object-fit declaration Published on 02 Jan, 2018  |   Takes approximately 8 min to read I’m always interested in and thinking about ways to use SVG in my client projects to solve common UI challenges — uses that go beyond simple icon display and animated illustrations. I’m also always researching and looking for prac

Building a fully-accessible help tooltip ...is harder than I thought. Published on 24 Jan, 2017  |   Takes approximately 7 min to read Today is one of those days that started out with a Google search for yet another accessibility question/concern. I’m working on a new project for my client Provata and part of that project is to build a sweet and seemingly simple help tooltip which explains to the

Mimic Relative Positioning Inside an SVG with Nested SVGs Published on 27 Jun, 2016  |   Takes approximately 12 min to read Positioning elements inside an SVG image is very similar—if not identical—to positioning elements absolutely in HTML. Every element in SVG is positioned "absolutely" relative to the SVG viewport, and the position inside the viewport is governed by the current coordinate syste

SVG Style Inheritance and the ‘Flash Of Unstyled SVG’ On Using SVG Presentation Attributes To Provide Style Fallback for CSS Failure Scenarios Published on 01 Mar, 2016  |   Takes approximately 7 min to read There are too few things not to like about SVG, and I don’t mean the things that browsers cause by incomplete or lack of certain features or buggy implementations. Yet you might sometimes get

Animated SVG vs GIF [CAGEMATCH] Published on 24 Nov, 2015  |   Takes approximately 19 min to read SVG can do much more than display static images. Its animation capabilities are one of its most powerful features, giving it a distinctive advantage over all other image formats. They are one of many reasons that make SVG images better than raster images, including GIFs. But this, of course, only appl

Tips for Creating and Exporting Better SVGs for the Web Published on 16 Nov, 2015  |   Takes approximately 12 min to read Working with SVG in a RWD workflow usually involves a design phase and a development phase. The design phase is usually handled by designers who may or may not know how to code. And because of the nature of SVG as both an image format and a document format, every step taken in

Art-Directing SVG Images With The viewBox Attribute: How-To, Notes, Tips and Why We Need A viewBox Property in CSS Published on 21 May, 2015  |   Takes approximately 12 min to read The SVG viewBox attribute is easily one of SVG's most powerful features. Mastering this attribute can take your SVG skills to the next level, especially considering that a couple of the main SVG spriting techniques rely

Better SVG Fallback and Art Direction With The <picture> Element Published on 15 Feb, 2015  |   Takes approximately 8 min to read Besides using an SVG as a background image in CSS, you can serve SVG foreground images in HTML using one of several embedding techniques, each of which has its advantages and use cases. Unless you’re in need of interactivity or external styling, is the standard way for

Upload your image, choose your background color, and preview the effect of blending the background image with the color using the background-blend-mode property. Click on the thumbnails to see a larger preview of an effect. Clicking the text icon will allow you to add text to the preview image, and blend it with the background using the mix-blend-mode property. If your browser does not support a p

Compositing And Blending In CSS Published on 27 Jan, 2015  |   Takes approximately 11 min to read If you’re a designer, then you’ve probably already come across blending effects some time or the other. Blending is one of the most frequently used effects in graphic and print design. You can add texture to text by blending it with its textured backdrop, create an illusion of merged images by blendin

Useful SVGO[ptimization] Tools Published on 26 Jan, 2015  |   Takes approximately 5 min to read One of the steps you need to do when working with SVG is optimizing the SVG code after exporting it from the editor and before embedding in on your web page. For that, several standalone optimization tools exits. The two tools I usually mention in my articles and talks are Peter Collingridge's online ed

Navicon Transformicons Animated Navigation Icons with CSS3 Transforms Click on the icons to see them transforming.

Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio Published on 17 Jul, 2014  |   Takes approximately 18 min to read SVG elements aren't governed by a CSS box model like HTML elements are. This makes positioning and transforming these elements trickier and may seem—at first glance—less intuitive. However, once you understand how SVG c

Clipping in CSS and SVG — The clip-path Property and <clipPath> Element Published on 08 Jul, 2014  |   Takes approximately 13 min to read CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to "clip" elements into custom non-rectangular shapes. In this article we will go

Structuring, Grouping, and Referencing in SVG — The<g>, <use>, <defs> and <symbol> Elements Published on 03 Jul, 2014  |   Takes approximately 9 min to read SVG comes with its own ways for structuring a document by means of certain SVG elements that allow us to define, group, and reference objects within the document. These elements make reusing elements easy, while maintaining clean and readable

S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations Published on 12 Jul, 2013  |   Takes approximately 3 min to read Today I'm going to share with you a gallery plugin I built (yeah, like the world needs another gallery plugin, right?) after having stumbled upon SONY's products gallery while I was browsing their website a while ago. Their products' image gallery is a simple one, but

Animating CSS Shapes with CSS Animations and Transitions Published on 14 Jan, 2014  |   Takes approximately 15 min to read Today we're going to be talking about animating CSS shapes with CSS animations. We'll be creating very basic "shape-shifting" layouts of sort. There are also many considerations to take when animating CSS shapes, so we'll go over all points in this article. This is the third a

Photographs © of Achmed Asit You can use the arrow keys to navigate between images in the slideshow view, and the shift key to switch back from slideshow to Grid view Find Plugin on Github Back to Article

Using CSS Regions With CSS Shapes For A Better Reading Experience Published on 05 Dec, 2013  |   Takes approximately 8 min to read Using CSS shapes we can flow our content in non-rectangular areas. And sometimes we want to be able to flow our content into multiple custom-shaped areas inside an element. If you've read my previous article, you already know that this can be done with CSS Shapes, by u

Creating Non-Rectangular Layouts With CSS Shapes Published on 05 Nov, 2013  |   Takes approximately 15 min to read Today we can create all kinds of shapes with CSS using CSS transforms, but all these shapes do not affect the flow of the content inside or around them. That is, if you create a triangle or a trapezoid with CSS, for example, the shape created does not define or affect the way the text

Navicon Transformicons: Animated Navigation Icons with CSS Transforms Published on 20 Oct, 2013  |   Takes approximately 8 min to read The following is a collaboration post between Bennett Feely and I. After seeing Bennett's impressive animated navigation icon transformations (or "Navicon Transformicons") pens on Codepen, I asked him if he would like to write a tutorial on how he did them as a gue