サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
コーヒー沼
www.sarasoueidan.com
A guide to designing accessible, WCAG-conformant focus indicators Published on 13 Aug, 2021 | Last updated on 27 Aug, 2023 | Takes approximately 24 min to read This post is a modified, text-only excerpt from my Practical Accessibility video course. I wanted to share this guide to designing accessible focus indicators because focus styles are a recurring discussion I have with designers I wor
An icon button is an icon that triggers some sort of action on the page. More accurately, technically speaking, an icon button is a button that contains an icon and no (visible) accompanying text. These buttons can be found in the majority of app and user interfaces today. The infamous hamburger menu button is a great example of such buttons when not visually labelled “Menu”. Twitter’s Compose Twe
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 practical uses of SVG to add to my talk and workshop material that go beyond SVG the image format, and more into the document nature of it. After all, SVG on the Web isn’t ju
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 reader/user what the Framingham calculator is. The tooltip is triggered by a small help icon like the one shown in the top right corner
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 system in use. But this similarity in positioning elements should not conceal the fact that there is a fundamental difference bet
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 some unpredictable results that might frustrate you when working with SVG, if you don’t know the details of how certain features should behave and what to expect from them, as per the specifications. SVG pres
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
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 the graphics editor in the process of creating the SVG directly affects the resulting code and hence the work of the devel
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 on this attribute to work. Because the viewBox attribute can be used to crop and extend the SVG canvas, it can be used for art-directing SVGs—by using it to crop the SVG to the are
Using The Generated Menu So you've picked your menu style and downloaded an all-new SVG menu. What then? Here is everything you need to know to customize your menu and embed it in your page. Dissecting The Code The code generated by the above generator is straightforward and—if you are familiar with SVG—fairly simple to customize. You almost don't need to do anything except add your own icons to t
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 loading an SVG image, but it has one disadvantage: you currently need JavaScript to provide fallback and/or change the image sourc
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
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 editor, and SVGO. In this article, I'm going to introduce you to a new SVGO Tool that provides us
Navicon Transformicons Animated Navigation Icons with CSS3 Transforms Click on the icons to see them transforming.
SVG elements can be transformed by scaling, translating, skewing, and rotating—much like HTML elements can be transformed using CSS Transforms. However, there are certain inevitable differences when it comes to the coordinate systems used and affected by these transformations. In this article we'll go over the SVG transform attribute and CSS property, covering how to use it, and things you should
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 coordinate systems and transformations work, manipulating SVGs becomes a lot easier and makes a lot more sense. In this article we're going to go over three of the most important SVG
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 over the clipping techniques in both CSS and SVG, covering everything you need to know to get started. Please note that the demos in this
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 code. In this article we'll go over these elements, highlighting the difference between them and the advantages of each one. Grouping with the element The ‘g
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
このページを最初にブックマークしてみませんか?
『www.sarasoueidan.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く