CSSで画像の四隅に三角をつけてイイカンジの枠組みっぽくする - Qiita
先日「こういうのってCSSで出来ないかな〜？」という話が知人といるときに出てきて、 その時に例で実装したものが割りと改変すると便利そうなコードだったのでご紹介。 目標とする形 今回作成したい形状は以下の様なものとなります。 画像を中心とし、四隅に三角を用意、それによってただの画像を額のようにする。といったものですね。 CSSで作った完成品 先に今回の完成品を上げておきます。 後にビジュアル面は改変が効くので、形状だけのワイヤーのようなものとなります。 作り方や考え方など 今回は枠線のサイズなんかが固定のようだったので、以下の方法で実装。 まずは適当に画像を配置してやり、枠線をつけておきます。 (今回は楽だったのでbackground-imageで配置しました) .image{ width: 250px; height: 250px; background-image: url("http:
今どきデザインはこれ！拡散型シャドウの基本から作成方法まで（PSチュートリアル + HTML/CSSスニペット付）
最近ウェブサイトやUIデザインなどを見ていると、ふわりと浮いているような奥行き感を表現しているものがあります。これは拡散型シャドウ（英: Diffuse Shadow）と呼ばれる新しいグラフィックトレンドで、2016年に入って多く見かけるようになっています。 今回は、この拡散型シャドウの基本的な使い方や、PhotoshopやHTML/CSSなどによるさまざまなデザイン方法を、参考にしたいUIデザインと一緒に見ていきましょう。 拡散型ドロップシャドウって何？ 英語でもきちんとした名前はまだ決まっていないようですが、この拡散型シャドウ（英: Diffuse Shadow）と呼ばれるこのテクニックは、通常のドロップシャドウに比べ、奥行き感をより表現できます。フラットデザインから派生したスタイルのひとつとも言え、今のデザイントレンドを反映しています。 Image Source: VOID Conf
より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
フロントエンドからの発想
2. @magi1125 • BA（ビジネス・アーキテクツ） • シニア・インフォメーションアーキテクト • HCD-Net認定 人間中心設計専門家 • ウェブアクセシビリティ基盤委員会 WG1委員 • 共著「デザイニングWebアクセシビリティ」 監訳「コーディングWebアクセシビリティ」 • Y!さんとの共催イベントを企画運営 4. Y!さんとの共催イベント • アクセシビリティやるぞ！祭り • マルチデバイス時代のWebアクセシビリティ • アクセシビリティやるぞ！夏祭り • 障害者差別解消法施行目前！アクセシビリティ対応 なぜ始める？どう進める？ • 次回も企画進行中（2016年9月頃開催予定）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
