[CSS3] background-clipの実例紹介
【CSS Property Advent Calendar 2013 — 22日目】 最近background-clipを愛用しているので何ができるのか実例を紹介。 background-clipとは background-clipは背景の適用範囲を指定するプロパティです。 指定は至ってシンプルなもので、 要素にborderとpaddingとbackgroundが設定されている場合に backgroundをどこに表示するか決めることしかできません。 border-box 背景をボーダーボックスに適用する（初期値） borderに重なる位置からコンテントボックスにかけて padding-box 背景をパティングボックスに適用する borderを避けてpaddingの位置からコンテントボックスにかけて content-box 背景をコンテントボックスに適用する borderとpaddingを避
![[CSS3] background-clipの実例紹介](https://cdn-ak-scissors.b.st-hatena.com/image/square/fbbe468e6e3c1d88abdb0fc13eff84e8e41bd795/height=288;version=1;width=512/http%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2013%2F12%2Fbackground-clip1.png)
Animation Of How CSS Triangles Work | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! In talks I’ve given in the past, I’ve found myself explaining how CSS triangles work with words and ridiculous hand gestures. It never goes particularly well. Y’all got that? So I figured let’s give it a shot with an actual on-screen in-code animation. Here we go: See the Pen Animation to Ex
Animated Border Menus | Codrops
A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash’s bounce menu for mobile apps. The other day I saw a really nice concept of a menu on the UI8 site. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind. So today
ボーダーで三角形などを作るときにはtransparentではなくrgba()で
よくCSSのボーダーを使った三角形の作り方が紹介されていますが、あれに使われている透明なボーダーのことで少し。 たとえば、こういうHTMLとCSSで三角形を作るとしましょう。よく見るタイプだと思います。 <div class="test1"></div>.test1 { width: 0; height: 0; border-width: 0 200px 200px 0; border-style: solid; border-color: transparent transparent #eee transparent; }こっちでもいいです。好みで。 .test1 { ... border-color: transparent; border-right-color: #eee; }CSS Triangle 1 見えづらいかもしれませんが、直角三角形になっていますね。 ただし、Fire
CSS's "transparent" may not be transparent, especially on diagonal borders (Example)
CSS's "transparent" may not be transparent, especially on diagonal borders You might not realise it, but transparent is defined as rgba(0, 0, 0, 0)—transparent black. In WebKit browsers with no anti-aliasing (I believe they're finally in the process of rectifying this omission), this doesn't matter. However, in browsers with anti-aliasing of diagonal borders (IE9+ and Firefox), this can have serio
Create good triangle shape. | CSSDeck
Hi all ! I want to talk about how you post forms that contain triangles. For starters, the triangles can be very helpful in many cases, still need to know to use them well, even create them. So today I want to give you a little trick that lets you create pretty triangles, smooth and precise. 1) create the css : .triangle{ width: 0; height: 0; border-left: 60px solid transparent; border-right: 60p
CSS Hexagon Tutorial
height: 100px; width: 100px; border-top: 30px solid #C66; border-bottom: 30px solid #6C6; border-left: 30px solid #66C; border-right: 30px solid #CC6; Now if we drop the setting of height and explicitly set the width of the div to be 0, we get the following: width: 0; border-top: 30px solid #C66; border-bottom: 30px solid #6C6; border-left: 30px solid #66C; border-right: 30px solid #CC6;
CSS4 Preview - Selectors
CSS is one probably the best bridge between web designers and developers so updates to the CSS spec are very exciting. The W3C recently posted an update to the working Selectors Level 4 spec, and there are many useful updates to be found. Let's have a look at what new CSS selectors and features will be available to us in future browsers! $E > F This exciting selector syntax allows for styling of a
Carrer Blog: CSS3 Fancy Box
CSS3 Fancy Box Monday, February 13, 2012 { 7 Comments } About two years ago I made CSS3 Action Framework and next step was to make the replica of the Fancy Box with pure CSS3, I haven't had the time to finish the project until one week ago when was "or now or never" for the project. So what is the purpose of this project? Modular CSS3 Fancy Box similar to original Fancy Box. By simply adding new c
(Better) Tabs With Round Out Borders | 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 Menno van Slooten. You might notice we’ve been down this road before, but I quite like Menno’s approach here. The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually usi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
