JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design's Delightful Details transitions. View on GitHub
JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design's Delightful Details transitions. View on GitHub
October 20, 2014Create an Icon Font Using Illustrator & IcoMoon An icon system can often become central design element in your web project. You can find many free or commercial icon sets on the web, and they are often included in major CSS frameworks (Bootstrap 3 Glyphicons is a perfect example). On some occasions, however, you may need more specific glyphs not included in a generic set. Or you ma
こんにちは、ユーザファースト推進部デザイングループの元山です。 デザイナーの皆さんはWebやアプリなどをデザインする上でフォントを作った事があるでしょうか? ずいぶんと前から「これからはWebフォントの時代だ」なんて言われながらも、現実は中々使うのが難しいなぁと感じている方は多いかもしれません。 今回はクックパッドで実際に作ったオリジナルフォントを使ったWebやアプリのデザインについて事例を交えながら紹介してみたいと思います。 クックパッドでの事例 印象と機能を向上させるデザインのためのフォント ブラウザやアプリの標準のフォントではない特殊なフォントを使う理由として真っ先にあげられるのは、やはり文字の雰囲気や見た目でデザイン的な印象や見え方を向上することができる点だと思います。最近ではAppleのWebサイトもオリジナルのWebFontを使ったデザインに変わりましたね。 クックパッドでは特
Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example. SVG has been one of the most underused technologies when it comes to web development. Despite it’s usefulness and powerful possibilities it’s still a mystery to many and when it comes to integrating it and using
Ready to use SVG icons for the web. Choose an icon. All you have to do is copy & paste the HTML code. Don't forget to load the basic CSS file. <path fill="none" d="M15.439,23.783c-4.852,0-8.784-3.932-8.784-8.784c0-0.423,0.038-0.835,0.095-1.242l1.837,1.837 c0.358,0.358,0.939,0.358,1.298,0s0.358-0.939,0-1.298l-3.436-3.436c-0.186-0.186-0.43-0.271-0.673-0.264 c-0.244-0.007-0.488,0.078-0.674,0.264L0.79
uifaces.com cancelled Why? We have no resources to address the excessive hotlinking driving up our hosting costs I still have ideas or questions
新しいApple Storeアプリで使われてるローディング・アイコンをCSSで模したもの。たまにこういうものを作ると、自分が新たなCSSテクニックを学ぶことに貪欲でないことを再認識させられる。 Demo: Apple Store App Loading Icon .loading { border: 1px solid #797673; border-radius: 51%; position: relative; width: 2rem; height: 2rem; background-color: #fff; animation-duration: 1s linear infinite spin; } .loading::before { display: block; position: absolute; width: 50%; height: 50%; content: "";
Bulletproof Accessible Icon Fonts Posted by Zach Leatherman 01/13/2014 April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach. Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens w
Map Glyphs has hundreds of scalable vector map icons of the world, continents, globes, countries and states. Download the Premium bundle for AI, PSD, SVG and PDF formats. 356 Icons in One Font With over 300 icons and nearly every country, continent and region in the world, Map Glyphs aims to be the last map font you will ever need. View All Map Icons Great for the Desktop Map Glyphs works great on
InspirationWeb Design 20 Website Examples with Hamburger Icon Design You’ll Love Nancy YoungAugust 19, 20141 Comment17.5k The hamburger icon is one of those UI features that are so old you could not even find an author. But after browsing the web for a while, it turned out that the hamburger icon comes from the Xerox Star personal worksection. It’s one of the earliest graphical user interfaces. It
Weather Icons is the only icon font and CSS with 222 weather themed icons, ready to be dropped right into Bootstrap, or any project that needs high quality weather, maritime, and meteorological based icons! The Freedom of CSS Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more! Use In Graphic Apps Weather Icons come with OTF and TTF files
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
ウェブページにおけるアイコンの実装方法はさまざまです。マークアップに img 要素を配置する方法もあるし、CSS から背景画像やアイコン・フォントを使う方法もあります。そういった中からどの方法を採用すべきかを判断するには、HTML Standard の Requirements for providing text to act as an alternative for images にあるとおり、「そのアイコンの意味を伝えるテキストが付随するかどうか」を考える必要があります。 テキストが付随しないアイコン 家のアイコンだけでホームページへのリンクを表す場合など、ラベルとしてのテキストが存在しないアイコンは、自分自身でその意味を伝える必要があります。こういったアイコンの実装方法は限られていて、ほぼ 1 つしかありません。alt 属性に代替テキストとしてラベルを指定した img 要素をマー
Licon is Lightness and Useful icons with Pure CSS3.Licon is a simple, useful and lightness pack—icon that made with Pure CSS3 by Siamak Mokhtari at FictionTeam in Tehran, Iran. It has both SASS and LESS versions so it can easily be modified and merged into modern projects. It provides all the useful icons for good design without adding any images or fonts. Also you can add effects of Animate.css o
Semantic SVGs Style with CSS Multi-color themes Smart icons 3 unique sizes Responsive Production ready How-tos OpenIconicAn open source icon set with 223 marks in SVG, webfont and raster formatsDownload v1.1.0Github Bootstrap and Foundation readyReady-to-use fonts and stylesheets that work with your favorite frameworks. Hyper-legibleWe're not joking. Open Iconic is designed to be legible down to 8
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く