CSS Gradient Animator
@-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-o-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
Pretty Diff - The difference tool
☰Application Menu ⛶Toggle Fullscreen Pretty Diff - Austin Cheney Access the old Pretty Diff tool. Written 12 August 2023 I lived in Afghanistan for nearly 2 years for two separate US Army deployments. I write this just over 14 years after first stepping foot in Afghanistan. Travel Living and Waiting On the first Afghanistan deployment I was constantly traveling, and travel in Afghanistan was rough
現役デザイナーが実践している、フォント組み合わせ10個の黄金ルール
海外デザインブログCanva Design School Blogで公開された「10 Golden Rules You Should Live by When Combining Fonts: Tips from a Designer」の著者より許可をもらい、要点をまとめて日本語抄訳しています。 デザインやアートの世界には、変えることができないいくつかのルールがあります。基本ルールを知ることで、自由にルールを壊すこともできるようになります。では、フォントの効果的な組み合わせ方はどのように学べよいでしょう。デザインとしてうまく利用できると証明されている、いくつかのガイドラインを見ていきながら、実践的なデザインの基本を学んでいきましょう。 詳細は以下から。 01. デザインに合ったフォントを選ぼう 多くのフォントはカジュアルさや、陽気さ、真面目さ、エレガントさなど、他とは異なる雰囲気（英: M
CSS3を極めたいなら知っておきたい三角形を作る3つの方法
CSS3を使い始めていくと、ぶつかる壁に「三角形みたいに尖った角」をどう表現するかというのがあります。三角形って思ったより難しいです。 まぁ無理しないで、イメージで作ればいいんですけど、ちょっとした装飾だったりすると、ちょこっとCSSで作れると楽な時もあります。 そこで、CSS3で「三角形みたいに鋭角を作る方法」を３つ紹介します。ここで紹介する方法には、メリットとデメリットがありますので、使い分けれるようになるといいと思います。 1. グラデーションを使う こちらの記事でも紹介しましたが、背景を background-size と background-position で4分割して、斜めのグラデーションを使うことで角を落とすことができます。 コード 4分割して、4つのグラデーションでそれぞれを塗ります。この方法では、塗りを使っているので、カスタマイズ性が高いですが、グラデーションを使って
CSSのみ！動きのあるデザインをコピー＆ペーストで実装できるサンプルコード集
自由度の高い表現が可能になったCSS3は、簡単なアニメーションや動きをつけることもできます。 今回は、CSSだけでできる動きのあるデザインをピックアップしてご紹介します。 フロントエンジニアの方にとっては、CSSテクニックのレパートリーが増えるだけでなく、コピー＆ペーストで手軽に利用できますので、動きのある表現をしたいという時に取り入れてみてはいかがでしょうか。 CSSだけで表現できる動きのあるテクニックまとめ 1.CSS3フルスクリーン背景スライドショー DigitalSkill CSSのみでフルスクリーン背景のスライドショー、タイトル表示をおこなうチュートリアルです。 アニメーション部分は、複数パターンのサンプルデモを公開しています。 2.Fullscreen Overlay Effects codrops クリックすると、フルスクリーンのオーバーレイがかかるエフェクトのサンプルです。
CSS Grid Layout を極める！（基礎編） - Qiita
0. はじめに CSS Grid Layout（グリッドレイアウト）は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。 格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。 例えば、こんな簡単なHTMLで・・・ <body> <h1>タイトル</h1> <article>記事1</article> <article>記事2</article> <article>記事3</article> <article>記事4</article> <nav>ナビ</nav> <footer>フッター</footer> </body> CSSをちょっと書けば、こんなレイアウトが出来てしまいます！ 当記事では、こんなレイアウトを可能にする CSS Grid Layout の解説をしていきます。 尚、CSS
Pure CSS: Accessible Checkboxes and Radios Buttons
If you are reading this article, you know that adding custom styles to default checkboxes and radio buttons using just CSS is a pain. If you stick with the default options, they look different on different browsers. There are several solutions for getting around this problem using things such as vendor prefixes, background images, unicode characters, and icon fonts. But most of these solutions hav
JavaScriptでconsoleにさらにカッコよくサイト名を出す！ - Qiita
上記コードの実行結果が下の画像です %cを記述した箇所以降にstyleが適用されています。(１つ目のtestはstyleが適用されない) サンプルコード 「Javascriptでconsoleにサイト名をAAで出す！」で作成したサンプルに対してstyleを適用します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script> console.log("\n" + "%c __ __ %c %c ___ %c ___ %c %c __ __ %c %c %c ___ %c __ \n" + "%c/\\ \\/\\ \\ %c %c/\\_ \\ %c/\\_ \\ %c %c/\\ \\ __/\\ \\ %c %c %c/\\_ \\ %c /\\ \\ \n" + "%c\\ \\ \\_\\ \\
Installation - Package Control
Command Palette Open the command palette Win/Linux: ctrl+shift+p, Mac: cmd+shift+p Type Install Package Control, press enter This will download the latest version of Package Control and verify it using public key cryptography. If an error occurs, use the manual method instead. Manual If the command palette/menu method is not possible due to a proxy on your network or using an old version of Sublim
2017年からは使ってみたいPostCSS｜株式会社CAリワード
こんにちは。フロントエンドエンジニアの佐藤です。 おそらく名前くらいは聞いたことがあるであろうPostCSS。 Sassとは何が違うの？ どうやって書けばいいの？ そろそろ導入を検討してみたいんだけど...。そういった疑問にサンプルコードを交えながらお答えします。 PostCSSとは PostCSSは、JSプラグインでCSSを変換するためのツールです。 PostCSS本体は特定の構文を別の構文に変換するといった機能は持たず、CSSパーサーとAST（抽象構文木）のみを提供しています。 プラグインを組み合わせていき、SassやLESSのようなビルドシステムを作り上げることができるイメージです。 プラグインは変数、mixin、次世代CSSの構文が使えるようになるもの、最適化など多種多様です。 これらを必要に応じて組み込み、ビルドツールとして機能拡張していきます。 Sass、LESSとの違い Sa
gulp.spritesmith の対象ディレクトリを自動取得する | BUN:Log
以前書いた記事 Grunt から gulp へ移行してみた： https://bunlog.dreamseeker.dev/2014/06/08/gulpjs-setting/ を読み返してみて、そういえば gulp.spritesmith の対象ディレクトリを自動取得できるようにしてたな・・・と思い出したので、記事にしてみます。 gulp.spritesmith のインストールパッケージがインストールされていることが前提となりますので、下記コマンドを実行します。 $ npm install gulp.spritesmith --save-devプラグインを読み込むgulpfile.js では gulp.spritesmith を $.spritesmith で実行できるよう、gulp-load-plugins を読み込む際に置換しつつ変数にセットしておきます。 // load gulp.
フロントエンド片手間ンによる Laravel Elixir 入門 - Qiita
この記事も若干古くなってきましたので… 他のフレームワークでも使える Laravel-Elixir という記事を書きました。入門から設定値の上書きの仕方まで。 この記事を書いた頃は browserify や browserSync できなかったですが、今はできますよ。！ はじめに この記事は、フロントエンド片手間ンである @localdisk が Laravel Elixir を使ってみた記録です。頑張りました。 注意点 Laravel5 はおそらく来年のリリースになります。以下のコードは Laravel Framework version 5.0-dev で書かれました。 筆者の環境は Mac OS X 10.9.5 HomeBrew を使用している 当エントリに書かれたコードはすべて動作確認をしていますが、筆者はフロントエンド片手間ンなのでもっと効率のよい方法や勘違いがあるかもしれませ
あの有名サービスも使ってる！Webデザインのスタイルガイドの作り方
あの有名サービスも使ってる！Webデザインのスタイルガイドの作り方 Webデザインのスタイルガイドの作り方をまとめています。スタイルガイドはなぜ必要なのか、作る上で配色やアイコン、ボタンなどはどういった組み合わせが良いのかなどを説明しています。デザイナーの人は必見の内容でしょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、designmodoのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、起業家であるT
サンプルコード集について
FREEプランにてご利用いただいているコード型フォームは、2023年10月24日(火)より有料オプション化しております。詳しくはこちらをご確認下さい。 以下では、formrun.jsを利用しています。 formrun.js を利用するとHTMLのマークアップだけで、一般的なフォームに必要なバリデーションやEFO（エントリーフォーム最適化）を設定することができます。 設定方法 バリデーション 電話番号バリデーション 電話番号の入力最大桁数を設定 メールアドレス メールアドレス再入力 数字バリデーション 必須バリデーション 郵便番号による住所補完 都道府県タグの自動設定 送信中のボタンラベル変更 エラー時にボタンラベルを変更する フォーム内に未入力項目・入力ミス項目がある際のボタンラベル変更 項目がエラーの場合に要素を表示する 項目にエラーがない場合に要素を表示する 項目にエラーがある場合にク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Firebase - Build Extraordinary Apps
CodePen - Find one of 17'000+ color names
Radio Check Generater
waifu2x
PostCSSを導入してみた & PostCSSの便利プラグインと誰得プラグイン – Snaplog
JavaScript Error Monitoring
