UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Both of these things are used to hide some parts of elements and show other parts. But there are, of course, differences between the two. Differences in what they can do, differences in syntaxes, different technologies involved, the new and the deprecated, and browser suppor

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I’d document some variations in one easy to reference place. Normal Colored Diagonal Stripes Diagonal stripes are easy to pull off thanks to repeat

文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。 コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。 画像: Free Promo Backdrops and Gradients HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。 元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。 HUE.cssの使い方 使い方は、簡単です。 「hue.css」をダウンロードし、外部

【追記 (2017/04/07)：Flexbox（フレキシブルボックスレイアウト）対応ブラウザが増えてきたので、Flexboxを使ったCSSに一部を大幅変更しました。】 今回はCSSの話です。 みなさんは「ツムツム」というゲームをご存知ですか？ ツムツムとはツムツムと呼ばれるぬいぐるみをつないで消していくパズルゲームなんですが そのゲームはぬいぐるみを基調としているため、ボタンなどゲーム画面がフェルトを縫い付けたようなデザインなんです。 そのデザインをCSSで作ってみるというのが、今回の記事です。 スポンサーリンク というのも、私自身がborderのdashedが私はけっこう好きで、それを活かせないかなと思っていたのです。 そんなときに、たまたまこのゲームをしていて、その時に思いついた、という話なんです。 では、とりあえず出来上がったものをご紹介します。 シンプルなデザインまずは簡単にシン

非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr：http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、 その中で重要なものだけ教えてほしかったので、 自分で作っちゃえ！って思って作りました。 そのときに使った便利ツールたちをまとめておいたら便利そうだったので、 今回使ったもの＋αを全てまとめてみました。 紹介するツールたちを駆使すれば、 非デザイナー＆デザインセンス0の私が、 1週間程度でこれくらいのアプリをリリースできるので、 他のエンジニアにも便利なツールがいっぱいあると思います。 Bootstrap系 Boots

CSSの:has()疑似クラスは2023年暮れにFirefoxでもサポートされ、すべての主要ブラウザでサポートされました。今までのCSSでは、要素の存在のあり・なしによって特定の親や要素にスタイルを設定することは不可能でしたが、:has()疑似クラスのおかげで、指定した要素がある場合にのみスタイルを適用できるようになりました。 WebサイトのUIでよく見かけるCSSの:has()疑似クラスの便利な使い方を紹介します。今までは少し面倒なCSS、もしくはJavaScriptが必要でしたが、:has()疑似クラスを用いると簡単に実装できます。

Online sandbox for less. This application helps you to learn and test less code.