How to Draw Your Face in CSS
With the job hunt season well underway, my weeks have been filled with touching up my portfolio and looking at job applications. So when a job application for IDEO has a special section asking to “Make a self-portrait in CSS only”, I dropped everything to make my face in CSS as fast as possible. Step 1: Knowing the RulesDrawing in CSS comes with a multitude of limitations, and if we want to draw i
Web制作初心者に役立つ良質なツールやコンテンツ達を出し惜しみせず全部紹介
ぼくがWebデザインに携わってからこれまで約5年半、Web上の多くの優良なサイトから知恵を借りて、ド素人からなんとかフリーで仕事を貰えるまでになった。そして常々、Webから与えてもらった知識や情報を還元したいと思っていた。 こうしてブログを始め自ら情報を発信する場を得たので、一度Web制作に関する良質な情報をまとめて提供してみたい。 このエントリーでは、Web制作の初心者もしくはWeb制作に興味があってこれから始めてみたいという人が、うまくWebの世界に入っていくのに役立つような情報を厳選して紹介している。 一人でWeb制作全般を見れるようになるための基礎的な情報を広く列挙してあるが、必要な箇所だけ断片的に取り上げてもらっても役立つと思う。またできるだけ日本語の中で閉じるよう、海外サイトは最低限にとどめた。 目次 とにかく１ページに詰め込むことを優先したのでかなり長いが、下の目次から必要な
Webデザインシステムはじめの一歩
CSS フレームワーク活用のタイミングBootstrap、Foundation をはじめとした CSS フレームワークを一度くらい使ったことがあると思います。制作はもちろん、どのように CSS ファイルを整理すれば良いのか、どのようにデザインのルールを設計するのかといった CSS の書き方を学ぶ際にも使えます。もちろん CSS フレームワークはたくさんありますし、 Gridlex のように Flexbox を活用したグリッドシスムだけといった UI の特定要素のみを提供しているツールもあります。 CSS フレームワークは制作において非常に便利なツールですが、最終成果物として扱うかは注意が必要です。以下のような場合を除いて、CSS フレームワークはなるべく使わないようにしています。 プロトタイプ作成 Photoshop や Sketch のようなグラフィックツールで Web サイトをデザイン
1文字だけの改行の拒否
日本語の文章では任意の位置で改行できるため、レスポンシブ・ウェブ・デザインでは多くの場合、望まない位置での改行が起きる。例えば最後の1文字だけ次の行になってしまうと、読みやすさや理解度に致命的な影響を与える。例えば「？」だけ次の行に送られた場合、あるとないのでは大きく印象が変わるだろう。Twitterで@Takazudoと@oosugi20の会話を見て、やはりみな似たようなことは考えるものだと感じ、このあたりのことについて書いてみたくなった。 僕はjQueryで最後の五文字では改行が起きないようにいじったりしていた(うろ覚えで書いたもので、実際にはもっと複雑にやっていたと思う)。見出しがテキストのみの場合、最後の数文字の間に非改行ゼロ幅スペース(U+FEFF)を仕込むことで、その間で改行が起こらなくなるという仕組みだ。ここでは比較のためにクラスで判定するように書いてあるが、実際にはh1から
Designing A Flexible, Maintainable CSS Pie Chart With SVG — Smashing Magazine
Implementations usually involved either using an external image editor to create multiple images for multiple values of the pie chart, or large JavaScript frameworks designed for much more complex charts. Although the feat is not as impossible as it once was, there’s still no simple one-liner for it. However, in this article, Lea Verou will show you that there are many better, more maintainable wa
角丸に角丸を入れ子にした時、それぞれの角丸をバランスよくデザインする方法
角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか？ 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。 こういった時の一つの目安として、バランスが良い角丸のデザイン方法を紹介します。 しっかりとした数値で2つの角丸をデザインすることができます。 Quick Tip: Rounded Corners Done Right 見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。こうすることで、2つの角丸は非常にバランスのとれたものになります。
【翻訳】デザインエンジニアリング - MOL
Original：Design Engineering（2014-11-25）by Jonathan Snook JavaScriptだけがフロントエンド開発ではない。それはデザインとディベロップメントの技術が人種のるつぼのように融合したものである。それはアクセシブルなUIを実装するためであり、Web標準を受け入れるものである。 — Matt Hill Shopify Adminの開発に関して言えば、最近まで2つの専門職、つまりデザイナーとエンジニアを受け入れていた。今では3つめの専門職がある、しかしながらそれが確かなものとして認識されるまで時間がかかった、フロントエンドデベロッパーである。フロントエンドデベロッパーのスキルはデザインとエンジニアリング両方にまたがっている。これまでクオリティの高いフロントエンドコードをフロントエンドデベロッパーの助けもなしに書けるデザイナーを雇えて、私たち
CSSでデザインした見出しをはてなブログに追加してみた - NO LIMIT
最近ブログカスタマイズがマイブームの@chihayuu_です。 今回は、CSSでデザインした見出しを追加してみました。 デフォルトの見出しでも十分なのですが、弄ってる感を出したかったのでデザインして追加してみました。 今の所は、下記記載の2種類だけ追加しています。随時レパートリーを増やしていこうと思います。 見出しを使い分けて見やすい記事が書けるように頑張ります。 ありきたりなデザインですが、よければお使いください。 吹き出しタイプ 吹き出しタイプ見出しです。 /*吹き出しタイプ見出し*/ .fukidasi{ position: relative; color: #fff; background: #0080FF; font-size: 18px; font-weight: bold; margin: 0 -28px 24px -28px; padding: 12px; box-shad
正式版リリース間近！Web制作の作業が驚くほど捗る『Avocode』最速レビュー
PNG Hat, CSS Hatなど、Web制作に役立つツールを数多く開発しているMadeBySourceが新たにリリースする『Avocode』の正式版のリリースがいよいよ間近になりました！ 一足先にプレオーダー版が届いたので、さっそくレビューします。 ベータ版の機能が限定されている時でも「こいつはすげえ」と思ってましたが、現在の最新版は更にヤバイです。 Avocode と、レビューの前にお得な情報を。 Avocodeはリリース前の早期割引として、キャンペーンを行っています。 通常$240が、約70%オフの$69で購入できます。 Avocode: 特徴ページ Avocodeは、Photoshop無しでPSDのプレビューができ、画像の書き出しは.png, .jpgだけでなく、SVGへの書き出しにも対応しています。また、ボタンやエレメントなどのベクターオブジェクトはCSS(Less, Sass
HTML5で実現できる！環境光に合わせたレスポンシブなUI
HTML5で実現できる！環境光に合わせたレスポンシブなUI Tomomi Imura（Slack） フロントエンド開発やデザインに携っている皆さんにとって、ここ数年間「レスポンシブ・ウェブ」についての話題は避けて通れないものとなっているでしょう。モバイルやタブレット上でも、ユーザー・エクスペリエンスを失うことのないウェブを表現するには、CSS3 Media-queriesが欠かせないものとなってきました。 それでは実際、レスポンシブ・ウェブとは何についての対応（レスポンシブ）なのでしょうか。 現在のところ、私たちがいうレスポンシブ・ウェブデザインとは、どんなスクリーンの幅や表示領域、デバイスの画面解像度や画面の縦横の向きにも対応したウェブデザイン、というのが事実上の定義となっているようです。 そこで今回、私はその定義を超えたレスポンシブ・ウェブのユースケースについて考えてみました。 太陽光
20+ Web Designs with Subtle Grain Texture Backgrounds
While minimal flat style designs are the current hot trend, some designers are eliminating solid blocks of color from their designs with the use of subtle textures. The use of grainy textures really helps give a design a tactile appearance and fits perfectly with designs using an old school or retro style. This post showcases some great websites which are perfect examples of grain texture use. The
40 CSS3 Animated Button Tutorials And Experiments
In this post, we have compiled a useful set of CSS3 animated button tutorials and different experiment that may fascinate you. As we all know that CSS3 is the most important and crucial aspect of the web designing that can make your website even more appealing and interactive for your visitors. Since the world of internet is changing and people tend to like those sites that have more interactive e
Perfect Full Page Background Image | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let’s put som
素敵な配色を見つける・作る、カラースキーム設計やグラデーション・パターン作成に役立つ -ColRD
さまざまなカラーパレット、グラデーション、パターンを見るだけでなく、作成して共有することもできるColRDを紹介します。 ColRD [ad#ad-2] カラーを見つける カラーを作る カラー作成に役立つツール カラーを見つける まずは、ColRDの「Discover（見つける）」から紹介します。 ColRDでは、カラーに関する4つのカテゴリが用意されています。 Discover Color Discover Palette Discover Gradient Discover Pattern
ブラウザでデザインをするということ | CSS Radar | For Frond End Developers
CSS Radar For Frond End Developers Recent Articles ウェブデザイナのためのRuby入門 14 May ブラウザでデザインをするということ 16 Apr ページの高速化とその方法について 09 Apr LESS: CSSをよりシンプルに、パワフルに 03 Apr ワイヤフレーム 01 Apr Read More 長い間、Adobe Photoshopはウェブデザインのデファクトアプリとして君臨してきた。もちろん、今も私のMac MiniにCS4がインストールされている。 しかし、個人プロジェクトはもちろん、すでに会社のプロジェクトでも私はPhotoshopを卒業しつつある。 Firefox + Firebugとお気に入りのエディタ(Vim)。そしてCSS3があれば、Photoshopを使わなくてもデザインができる。 Hardboiled W
Awesome Overlays with CSS3 | Playground from ZURB
What's the big deal? These overlays use a number of new CSS properties, some of which are simple like border-radius and using RGBa colors. The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS. div.note div.border { border: 5px sol
The Simpler CSS Grid - Web Designer Wall
Last week I talked about 960 Grid System is Getting Old. Surprisingly a lot of comments have been made. It seems like people are using 960gs because of the "golden ratio" — all numbers are even. I’m a designer, not a grid scientist. Why restrict your layout so that it can fit into this 960gs? A grid is supposed to help you in design, not to limit your creativity. The 978 grid, that I mentioned bef
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIkit
HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck
Home - Webstock
