CSS Grid + CSS Multi-Columns = ♥
In this short article, I am exploring the relationship between two CSS layout features: CSS Grid and CSS Multi-Columns. These two features can be used together in very interesting ways for building responsive web designs. Let’s start by reviewing what each of those features do. CSS columnsCSS has had the ability to organize content into columns for a while now and support is really good all across
[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス
ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。 Seamless Responsive Photo Grid デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 画像を隙間無く配置する実装方法 HTML HTMLはimg要素をsection要素で内包したシンプルなものです。 <section id="photos"> <img src="images/dog-1.jpg" alt="Little doggie"> <img src="images/cat-1.jpg" alt="Little kittie"> ... </section> CSSをオフにすると、img要素はinline-blockなので、下記のように連続して並ぶだけです。 デモページ：CSSオフの表示 こういったエ
Z63 | Vertical align anything with just 3 lines of CSS | zerosixthree
With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height. The CSS property transform is usally used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but t
[jQuery] 画像の読み込み完了時にloadイベントが発動しない
htmlに記述してある画像を読み込んだら、ある処理を開始するというJavaScriptを書いたところ、処理が行われる時と行われない時でまちまちだった。 キャッシュかなとも思ったが違った。 実際はloadイベントを登録する前に画像の読み込みが終了していた場合、イベントが発動していないのが原因だった。 completeプロパティを調べて、すでに読み込み済みだったら明示的にloadイベントを発動させるという処理を追加して対応した $('img').load -> //画像読み込み時の処理 //ここにたどり着くまでに画像が読み込み終わっていたら発動しない if this.complete //読み込み完了しているかどうか判定するプロパティ $(this).load() //自分でloadイベントを起こす completeというプロパティは知らなかった… 今回の問題はかなり初歩的な部分な気がするが…
Single HTML Element CSS3 iPhone 5
CSS3 Single HTML Element iPhone 5 Tweet View The Article Design by Matt Boldt This was made with pure CSS and only a single HTML element. Did you like this? Tell me about it. Follow my personal Twitter here. You can find me on Forrst.com, and I also put this on CodePen. A little about me: I'm a 19 year old web developer / designer from Texas. I work for Macroplant. We make really cool apps for use
Replace the Image in an <img> with CSS | CSS-Tricks
The following is a guest post by Marcel Shields. Marcel was in a difficult place where he needed to change the image on a page but didn’t have access to the HTML. Rare, but I’m sure we’ve all be in weird situations like this. He explains how he managed to replace that image without needing to access the HTML or JavaScript. Also turns out to be a pretty good way to replace anything with an image. I
Transitional Interfaces, Coded | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Pasquale D’Silva’s article Transitional Interfaces has really been making the rounds. It’s a quick read that drives home a great point. Transitions and animations can be more than eye candy. They can help give your brain a clue about what is happening on a page. If a list it
3 Awesome CSS3 Typography Techniques to Learn - Blogger's Path
It’s all around now; CSS3 has made an impact among the web designers. They are trying this technique to create many attractive design projects. The most amazing part to use CSS3 is – it gives your flexibility to use with any web design technology. You will feel the same lookout of Flash using CSS3 styling in your web projects. Playing with typography is very old fashion for the designers, using gr
Single Element Pure CSS3 Double Fold Ribbon
Description Ribbons are an extremely popular design element. This is a simple experiment to create a 3D double fold ribbon using just one HTML element. The ribbon design is made using 4 CSS3 gradients combined together and the complex folds of the ribbon is emulated using a clever combination of pseudo elements, box shadow and borders. You can edit the text of the ribbon which will change its widt
Image styling with canvas
It's hard to identify universally accepted rules in web design, but if there is one that the whole community agrees upon, it's that you should always separate your content from its style. On almost every webpage, data is output as HTML and style rules are applied using CSS. Nobody mixes data and style in the same file anymore… …Except you. And me. In fact we all do it, everyday. Almost every image
先輩と覚える HTTP ステータスコード
gistfile1.md 先輩に学ぶ HTTP Status Code 超雑にまとめました。修正してください。 登場人物 アプリケーション先輩: いつも忙しい。横に広がるのが得意(デブじゃない)。 後輩: 頼んでばっかしで役に立たない。 サーバー先輩: アプリケーション先輩と仲がいい。Unix Socket でつながるくらい仲良し。 プロクシ先輩: アプリケーション先輩とかサーバー先輩と後輩の間を取り持って代わりに伝えたりしてくれる。たまに勝手にレスポンスを書き換える。 1xx 系 100 Continue 後輩「あ、先輩！お願いが！」 アプリケーション先輩「おー、聞いてやる。詳しく話せ」 101 Switching Protocols 後輩「せんぱーい、お願いなんですけどー」 アプリケーション先輩「ちょっと待て、お前 HTTP 1.0 で喋るな、 HTTP 1.1 か TLS 1.0 で
CSS Pie Timer | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Editor’s Note: Kitty Giraudel made a cool demo for a “pie timer” on CodePen. It’s definitely not an intuitive or simple thing to do in CSS. Then they sent me a write up on how they did it and I’ll be darned if it doesn’t make a real nice CSS-Tricks article. Thanks Kitty! Wha
Mastering CSS3 Multiple Backgrounds - DZone Web Dev
Our journey to the world of CSS3 shadows continues. Today we will focus on another interesting feature—how to use multiple backgrounds with CSS3. Backgrounds CompositionThere are many reasons why you may need to create a composition of multiple images to build your background. I think the most important are the following: to reduce bandwidth usage where the sum of the file sizes of separate images
Pure CSS3 Bitmap Graphics
Everything here is rendered with CSS: no images, no canvas, no data URIs and no extra markup. The piCSSelz (see what I did there) are drawn with CSS gradients sized precisely to pixel boundaries. There are certainly more practical uses for this technique, but none quite as nostalgic. Stay tuned for more examples, wider support and a code generator!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Image manipulation with CSS
Fancy CSS3 Tooltips without any JavaScript
jQuery Deferred with an array of functions
HTML5 Datalist: What You Need To Know | The Jotform Blog
Are There Specific CSS Selectors Targeting IE10?
Password Protection