phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
[Photoshop] 白黒画像の白い部分を透明にする – プログラミング生放送
レイヤーマスクを使って、白黒画像（モノクロ画像）の白い部分または黒い部分を透明化します。白と黒の境界部分もきれいに処理できます。 以下の画面は Windows の Photoshop CC 2014 です。 レイヤーマスクの追加 レイヤーウィンドウの下にあるボタンから、レイヤーマスクを追加します。 カンバス画像をコピー キー Ctrl + A で、カンバス全体を選択します（メニューでは［選択範囲］-［すべてを選択］）。 続いて、Ctrl + C で画像をコピーします（メニューでは［編集］-［コピー］）。 レイヤーマスクにマスク画像を描画 Alt キーを押しながら追加レイヤーマスク部分をクリックして、レイヤーマスクを表示します（白いカンバスになります）。
![[Photoshop] 白黒画像の白い部分を透明にする – プログラミング生放送](https://cdn-ak-scissors.b.st-hatena.com/image/square/bb44e0d927d65223dee2b54f64ef0e4f8346ef88/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fpronama.jp%2Fwp-content%2Fuploads%2F2014%2F11%2Flayer-mask8.png%3Ffit%3D432%252C216%26ssl%3D1)
Webデザインに迷っている方必見! 良く使うパーツのギャラリーサイト15選
更新日: 2017年3月21日公開日: 2015年8月26日Webデザインに迷っている方必見! 良く使うパーツのギャラリーサイト15選 Webデザイナーもアパレルデザイナー同様に、一つ一つのパーツデザインを豊富にストックしておく方が、デザインの幅を広げることができます。その結果、オリジナリティーとデザイン性の高いWebサイトをデザインすることができ、充実したデザイナー人生を歩むことができます。今回はそんな訳で、Webデザインの「パーツ」にフォーカスし、タメになる情報を集めてみました。 Webデザイナー向け！パーツ・デザインのネタ集header - HEADER LOVE HEADER LOVE デザイン・サンプル数 53点 Web デザイナー向けに参考になるヘッダーデザインを収集したサイトになります。スクロールをクリクリしてデザインを拝見していきます。 header - Web Desig
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
今年はできるだけ、「Internet Explorer 9」を窓から投げ捨てる（=サポートを切る）案件を増やしていく予定です。 このサイトもflexboxを使うコードに移行しました。それ以外にも、flexboxをいくつかの案件で使ってみました。そこで得られたノウハウをちょこっとだけシェアさせていただこうと思います。作り方は今回は記載しないのであしからず。 Firefoxで最初に検証しながら制作するのには理由があります。 ちょっと複雑なことをやろうとすると、Firefoxさんだけお行儀が悪くなります。Internet Explorer 10よりもお行儀が悪いです。 同じものをつくるにしても、Firefoxだけできない、できても複雑なコードになることが多くなります。 Firefoxさんにがんばってもらうためのコードを記載しても、ChromeやSafari・Internet Explorerで表
CSSのみ！動きのあるデザインをコピー＆ペーストで実装できるサンプルコード集
自由度の高い表現が可能になったCSS3は、簡単なアニメーションや動きをつけることもできます。 今回は、CSSだけでできる動きのあるデザインをピックアップしてご紹介します。 フロントエンジニアの方にとっては、CSSテクニックのレパートリーが増えるだけでなく、コピー＆ペーストで手軽に利用できますので、動きのある表現をしたいという時に取り入れてみてはいかがでしょうか。 CSSだけで表現できる動きのあるテクニックまとめ 1.CSS3フルスクリーン背景スライドショー DigitalSkill CSSのみでフルスクリーン背景のスライドショー、タイトル表示をおこなうチュートリアルです。 アニメーション部分は、複数パターンのサンプルデモを公開しています。 2.Fullscreen Overlay Effects codrops クリックすると、フルスクリーンのオーバーレイがかかるエフェクトのサンプルです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
