Home Page | CntlogUI Designer名古屋でUIデザイナをしています。 UIコンポーネントの設計と運用と素早くプロトタイプを作りながらフロントエンドの実装して作りんで行くのが得意です。 最近はStorybookを運用したデザインシステムを作るのに感心があります。 コーギーと暮らしています。
CSSコピペで利用！話題のボタンデザイン用スニペット、サンプル30個まとめ - PhotoshopVIP
CSSをコピペしてウェブ制作に活用できる、ボタン用スニペットサンプルを、WEBデザイナーのためのコードコミュニティサイト、Codepenよりピックアップしてまとめています。 その場でコードを確認、編集することができるので、幅広いデザインプロジェクトに応用でき、アニメーションをうまく活かした新しいスタイルを、今後のウェブサイト制作に活用してみてはいかがでしょう。 詳細は以下から。 CSSコピペで利用する、話題のボタンデザイン用スニペット、サンプルまとめ Button ボタンの四隅に■デザインを加えた、デザインアプリのようなデザインが素敵なボタンエフェクト。 See the Pen Button by Monirul Islam (@themirobin) on CodePen. CSS Gradient Button, Hover Smoothly! CSSグラデーションを使い、スムーズなホ
CSSで実装できる、思わず押したくなるボタン用コードスニペット38個まとめ
魅力的なボタンデザインは、ウェブサイトの注目ポイントを効果的に演出する、重要なデザイン要素です。今回は、CSSのみでスタイリングできる、ボタン用コードスニペットをまとめて、WEB制作のためのコードコミュニティサイト、Codepenよりピックアップしてご紹介します。 HTML/CSS、そして簡単なJSのみで作成された素材が中心で、エフェクトと一緒にコードも確認できるだけでなく、コピペで自由に活用することもできます。CSS の広がる可能性を感じる、最先端のデザインエフェクトを取り入れてみてはいかがでしょう。 詳細は以下から。 CSSで実装できる、思わず押したくなるボタン用コードスニペットまとめ Diagonal Gradient Fill Button ボタンホバーで対角線状に塗りつぶす、グラデーションカラーを利用したスタイリング。 See the Pen Diagonal gradient
人のコードを見て覚える「使える便利なCSS＆Jｓパーツ特集」 | 楽天ティップスRakutenTips
コーディングを覚えるには人のやり方を見るのが一番早いですよね。今回は良く使いそうなパーツをcodepenからピックアップしてきました。 Animated Spinners 10種類のローディング時のスピナー ポップアップウィンドウ ボタンをクリックするとウィンドウが現れます Change from box to list メニュークリックでグリッドチェンジ PURE CSS FAVOURITE BUTTON CSSオンリーのお気に入りボタン Fullscreen drag-slider with parallax ドラッグで移動するパララックススライダー レスポンシブボックス windows幅で可変するボックスレイアウト Full Slider Prototype 自動フルスライド Animated SVG Hamburgers SVGアニメーションハンバーガーメニュー Simple bu
真似したい!使いたい!オシャレなCSSテキストエフェクト31個 | 楽天ティップスRakutenTips
CSS 3 Transform Experiment CSS3トランスフォームを使ったpure CSSトリック。モダンブラウザ＆IE9＋みたいなので使うサイトは選ぶかなっと。 Animated Text Fill javascriptを使わずcssアニメーションでストライプを表現したテキストエフェクト Text Animation 見出しに追加して置きたいアニメーション Elastic Stroke CSS + SVG SVGを使ったカラフルなテキストアニメーション Fun With CSS Text-Shadow イベント時などに使いたいテキストシャドーを使ったインパクトあるポップなテキストエフェクト Box-bubble Cutout in CSS 写真にフィルターを掛けた背景に合わせた日付入りボックス Fly in, fly out JS &CSSで実装するアニメーション Maske
1カラムのスクロール型のページで要素の継ぎ目を斜めにするテクニック | 9ineBB
ページ全体を大きくダイナミックに使ったWEBページでの、スクロールによるパララックス効果との相性が良い要素の継ぎ目を斜めにするテクニック 参考元 http://codepen.io/zizzo/pen/HgaDm 要素と要素の継ぎ目を斜めにする方法 HTMLでは通常、要素は四角形で出来ています。 普通1カラムのページなら、ブロック要素を積み重ねるようにして作成していきます 今回斜めにするイメージ 斜めの継ぎ目にする場合も基本的には、長方形のブロック要素を並べるだけなのですが 一つ目のブロック要素のbefore、3つ目のブロックのbefore をそれぞれ 2つ目のブロック要素と同じ色に揃えることで斜め銭のように表現します 色でなくても背景で background-attachment: fixed; を使ってやってもつながった絵になります。 実際に作ったサンプル コードとコードの解説 HTM
23種の連続した色のシンプルなグラデーションのCSSコード 『Day/Night Gradients』 | 9ineBB
1～23番、全部で23種のCSSで作られたグラデーションのパターンがあります 左から右へとグラデーションとグラデーションの並びもグラデーションになっています 少し言葉では表しにくいので、見て頂ければ すぐに分かります この23種のグラデーションから好きなのを簡単に、コードをコピーして使うことが出来ます また、この色の配色を利用して メニューにグラデーションを与えるときに、ひとつのリンクに一つのグラデーションを与えて nth-child()で1-23を準備しておいてメニューが増えた時に自動的に色が入っていくようにしたら 使い勝手と遊びを両立でき、nth-childが使えないものには初期の背景の色を指定しておけばそれで対応もできるかと あとグラデーションを使いたい時の参考にも使えるかと思います コードをダウンロードする DOWNLOAD
知ってると便利なCSSのテクニックのまとめ -CSS Protips
リスト要素で実装したナビゲーションの右端のボーダーを取り除くシンプルな方法、flexboxで実装したカラム間の溝の最後の溝を取り除く方法、天地の中央に配置など、知ってると便利なCSSのテクニックを紹介します。 CSS Protips -GitHub CSS Protipsのバージョンアップ版の紹介記事はこちら。 CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips CSS ProtipsのライセンスはMIT Licenseで、個人でも商用でも無料で利用できます。 下記のスタイルシートの対応ブラウザはChrome, Firefox, Safari, Edge, IE11です。 リスト要素の最後だけボーダーを適用・削除 body要素に「line-height」を加える 天地の中央に配置 ネガティブなnth-childを使用してアイテムを選択
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
自動で途切れなくエンドレスにスライドし続けるCSSだけでつくるギャラリーのアイディア | 9ineBB
デモは、リンク先に行くと止まること無く動いています jQueryプラグインのスライダーとかで、自動で動くエンドレスなスライダーを 実装することが多々有りますが こちらの方法は、javascriptを使わずにCSSのみで エンドレスに途切れずに流れるスライダーを実現しています また背景と、画像がパララックスに動いているのも良い 写真の画像はCSSで、CSSスプライトとして複数の画像をまとめた1枚の画像から background-position で当てはめています 重要なポイント エンドレスに流れているのは 同じものを2つ作り、それを交互に流すことで 一つのロールがエンドレスに回っているかのように表現しています それぞれの画像が連続的に流れるように、ディレイで時間差で動いている HTMLの部分をみれば、一目瞭然なんですが ulを複製した形になっている ちょっと無駄が多い感じにも見えますが、ポ
フォームのセレクトボックスとチェックボックス・ラジオボタンをCSSで装飾する | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは制作の奥田です。 お問い合わせフォームで、テキストフィールドやテキストエリアを装飾するのはとても簡単なんですが、セレクトボックスやチェックボックス・ラジオボタンの装飾はクロスブラウザの問題などでちょっとややこしいイメージをお持ちの方も多いと思います。 しかし、IE8以前のサポート終了によりIE9以降の対応でよくなったのを期に、フォームをデザインすることが容易になってきました。 せっかく良いデザインにしてもフォームの要素がデフォルトのままだとなんか残念な気持ちになりますよね？ というわけで今回はCSSのみでフォームを装飾する方法をご紹介いたします。 セレクトボックスの装飾まず、select要素の挙動を統一するため、要素をappearance: button;でボタン要素にしてしまいます。 select::-ms-expandでIEの矢印を非表示にします。 select:-moz-f
Monthly Bookmarks 2016/04 - 2016/06 - NxWorld
2016年4月〜2016年6月の個人的ブックマークです。 2016/04 Development Almost complete guide to flexbox (without flexbox) | Kenan Yusuf CSS Shapesでテキストを回り込ませるレイアウトを表現 | Webクリエイターボックス MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver Modaal is a WCAG 2.0 Level AA accessible modal plugin Popper.js 360 Degrees Product Viewer in CSS and jQuery | CodyHouse Turntable.js : A Resp
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
完成度の高い文字を美しく見せる、2つの色を指定するだけで使えるSCSSコード | 9ineBB
SCSSで作られたコードで、明るい色と暗い色を指定するだけで 二通りの、完成度の高い文字の表示に出来ます text-shadowを2つ指定して、影を重ねる感じにすることで いい感じに出来ています。 HTML <section class="light"> <h1>Dark Title</h1> </section> <section class="dark"> <h1>Light Title</h1> </section> SCSS $light: #f3efe5; $dark: #4e3718; @mixin txtOffset( $offsetColor: $dark, $txtColor: $light, $shadeColor: darken($offsetColor, 20%)){ color: $txtColor; text-shadow: 1px 1px $offsetCol
[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法
CSSやHTML、javascriptやjQuery、WordPressやプラグインなど、WEBデザインにちょっと便利なTIPSまとめブログ。サイト制作時に見つけた小ネタなどをまとめて紹介します。
![[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/b65c96070203c58280a8cc237c7c66212a6dccb6/height=288;version=1;width=512/https%3A%2F%2Fwebantena.net%2Fwp-content%2Fuploads%2F2019%2F01%2F569359.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://rakuten-tips.com/htmlcss/css-transition/
狩野祐東・狩野さやか［SOLIDPANDA-DESIGN］
ビールのシュワシュワを表現した CSSアニメーション 「Beer」 | 9ineBB
http://web-gimmick.com/cording/760/
