CSS カスタムフィルタについてのメモYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
スクロールできる表
表をかっこよくスクロール可能にするテクニックについてのResponsive scrollable tablesという記事を読んだ。この記事ではJavaScriptで表をdiv要素で括って、それから溢れたらスクロールバーを表示(+α)という形でやっている。これをいじってて気づいたんだけど、JavaScriptで追加マークアップをする代わりにtable要素のdisplayプロパティーをいじってやると簡単にスクロール可能な表になるようだ。 Demo: Scrollable Table 表を自動幅調整なし(幅固定)にするにはtable-layoutプロパティーを、各セルで折り返しなしにするにはwhite-spaceプロパティーをそれぞれ使う。それとdisplay: blockを組み合わせると、pre要素で文字がはみ出す時にスクロールさせるような感じになる。 table { display: blo
CSS reference - CSS: Cascading Style Sheets | MDN
CSS Tutorials CSS basics CSS first steps CSS first steps overview What is CSS? Getting started with CSS How CSS is structured How CSS works Assessment: Styling a biography page CSS building blocks CSS building blocks overview CSS selectors Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators Cascade, specificity, and inheritance Cascade layers The box mo
Digital Services - Rain-Creative
Corporate PortalsCorporate Portals The company is growing and new conditions dictate the need to optimize business processes – this means you need to create a corporate portal. What tasks it solves: Automation of Search for: Creating a New Business PortalCreating a New Business Portal We are in the process of creating an online business portal. It will be a platform where all our customers can fin
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
Starting to Write CSS
Don't you feel that CSS is not the same anymore? Last few years became a hot topic and many smart people talked about it. CSS is not that little thing which front-end developer should do to make the page looks pretty. It's far more then that. We care about performance and we want to produce better web sites. In this article I want to share what I learned last few months and what exactly is my visi
text-spacingが待ち遠しい
日本語文中の英数で日本語の文字との間に半角スペースを入れるか入れないかという話があります。検索すると色々議論されていたりして面白いです。 このブログでは場所によって半角スペースを入れたり入れなかったりしていますが（2020年1月追記：現在は入れていません）、『日本語組版処理の要件』に合わせてユーザーエージェントがいい感じに処理してほしいなーとか思います。 そこで「それCSSでできるよ」と言える（ようになるかもしれない）プロパティを紹介してみます。 これがまさに日英数が混在する文章で、英語や数字と日本語の間に4分の1スペースを自動で追加したり、全角括弧で生じる大きなスペースをトリムしたりできるプロパティです。 text-spacingは元々text-trimとtext-autospaceという別々のプロパティを統合したものです。これは2011年9月1日版のチェンジログに載っています。 統合に
CSSで本当にクリアできるルービックキューブを作ったので3Dについて色々解説してみる その1 | CSS-EBLOG
CSSで本当にクリアできるルービックキューブを作ったので3Dについて色々解説してみる その1 カテゴリ：3D 2013年8月20日 09:04 しばらくぶりの更新です。 最近はWebGLやCSS Shaderを始め、3D関係のことをメインに勉強しています。 おかげでだいぶ詳しくなってきました。 ちなみに、CSSでクリアできる、と書いていますが「CSSだけで」ではないので当然JavaScriptもてんこ盛りですｗ 最近はインプットばかりだったので、備忘録も兼ねて以前案件で制作したCSS Rubik Cubeを解説を交えながら書いていきたいと思います。 CSS Rubik CubeはMaxellの商品のキャンペーンで、エビ中キューブと名付けられたコンテンツです。 エビ中キューブは、エビ中というアイドルグループの動画を、ルービックキューブで操作して自分好みのものに揃えて見る、というものです。 P
イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。 - kojika17
数カ月前に@suzukisan__が投稿された「Illustrator Unlimited Appearance - suzuki | JAYPEG」は、Illustratorのアピアランスを駆使して、1つのオブジェクトからカメラのアイコンを作るという、面白い試みをされていました。 アピアランスの可能性を示す、インパクトのある内容であったため、記憶に残っている方もいることでしょう。 このアイコンが投稿されてから時間がたっていますが、HTMLとCSSに分解されるイメージが自然に湧いてきたので、少しばかりのHTMLとCSSでアイコンを模写してみました。 HTML と CSS で作ったカメラアイコン 模写したカメラアイコンは、Internet Explorer 10以上 や、最新のChrome, Firefoxなどであれば表示されるはずです。 こちらがHTMLとCSSで書いたものになります。 ソ
:emptyと:blank（仮）擬似クラス
次のdiv要素のうち、:empty擬似クラスが適用されるのはどれでしょう。 1. テキストあり <div>(Text)</div> 2. 空 <div></div> 3. 半角スペース1つ <div> </div> 4. 半角スペース2つ <div> </div> 5. 改行 <div> </div> 6. コメント <div><!-- comment --></div> 7. テキストなしで空の子要素を持つ <div><span></span></div>正解は2と6です。 実際の動作はサンプルをどうぞ。 :empty? :empty擬似クラスは「Selectors Level 3」を見ると、次のように書かれています。 The:emptypseudo-class represents an element that has no children at all. In terms of
css Zen Garden: The Beauty in CSS Design
A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page. Download the example html file and css file The Road to Enlightenment Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers. We must clear the mind of the past. Web enlightenment
Making Sass Talk To JavaScript With JSON | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Les James. Like many of us, Les has been gunning for a solution to responsive images that works for him. In this article he shares a technique he found where he can pass “named” media queries from CSS over to the JavaScript, which uses those names to swap out
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gumbyframework.com
Tridiv | CSS 3D Editor
extractCSS - Online CSS Extractor
xpressive.org
Hello World
Nintendo Gameboy | CSSDeck
DevDocs
CSS３の３D変換用matrix3dのX,Y,Z座標への回転・移動・拡大の変更できるジェネレータ | アバニエス