whether items wrap to the next rowcolumn (only applies if combined widthheight of items is greater than container's)
cssに関するhideki_aのブックマーク (402)
-
hideki_a 2015/12/14
-
Why I'm Excited About Native CSS Variables — Philip Walton
A few weeks ago CSS variables—more accurately known as CSS Custom Properties—shipped in Chrome Canary behind the Experimental Web Platform Features flag.[1] When Chrome engineer Addy Osmani first tweeted about the release, he was met with a surprising amount of negativity, hostility, and skepticism. At least, it was surprising to me, given how excited I am about this feature. After a quick scan of
-
-
-
CSS Flexbox Please!
CSS Flexbox Please! The CSS Flexible Box Layout Model, or "flexbox", is one of the specification in CSS3. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does
-
LLCBuddy® - Your Business Formation & Management Buddy
At LLCBuddy, we understand that forming a business can be an overwhelming experience. That’s why we have tailored our platform to provide accurate, easy-to-understand information and resources to help you navigate the complexities of business formation and management. Are you an aspiring entrepreneur or an established business owner looking to set up a Limited Liability Company (LLC) or another bu
-
Use Cases For CSS Calc
Use Cases For CSS Calc Where I play around with CSS calc operations. Published by Vincent Pickering on 23rd Sep 2015 at 00:00am Vertical centre If you know the height of the element, CSS Calc can make it super simple to position an element vertical centre and respect a responsive layout. By using this simple equation: calc(50vh – 1/2 the height of element); 50vh is always half the height of the vi
-
-
CSS element() function - Vincent De Oliveira
CSS element() function published 9 years, 4 months ago (August 2015) In July, I wrote about advanced CSS filters techniques, such as backdrop-filter and filter(). Today, I want to share a much more awesome CSS feature. But before starting, let me warn you: the feature I’ll show is only supported in Firefox for now and no other browser vendor has shown interest with. Maybe, this could change in a n
-
Understanding Critical CSS — Smashing Magazine
Most of the time, we develop websites without understanding what the browser is actually doing under the hood. How exactly does the browser render our web pages from the HTML, CSS and JavaScript that we create? Google’s PageSpeed Insights tool can be very helpful when trying to profile a web page and find areas for improvement. You simply enter the URL of the page that you want to test, and the to
-
Laying Out A Flexible Future For Web Design With Flexbox Best Practices — Smashing Magazine
The future of web layout is bright, thanks to flexbox. The CSS layout mechanism lets us arrange elements in a truly web-like way. Some elements can be fixed, while others scroll. The order in which they appear can be independent of the source order. And everything can fit a range of screen sizes. Yep, it’s a great time to jump into flexbox if you haven’t done so yet. But flexbox has a dizzying arr
-
GridLayout — Lightweight grid system for advanced web app layouts, with support for older browsers.
Lightweight grid system for advanced horizontal and vertical responsive web app layouts, with support for older browsers. Why use GridLayout? If you need to create complex app layouts, similar to native ones, with support for older browsers. GridLayout is a ~1 KB (minified and gzipped) CSS file and a ~0.5 KB JavaScript file used only for Internet Explorer support. *If you just support modern brows
-
PostCSS – Sass Killer or Preprocessing Pretender?
Front-end development Blog and Portfolio for Ashley Watson-Nolan – Senior UI Engineer at Just Eat PostCSS first came onto my radar back in February when I read Ben Frain’s excellent article – Breaking up with Sass: it’s not you, it’s me. I was extremely happy with my workflow at the time – using Sass for all of my preprocessing needs – but it piqued my interest in PostCSS enough to make sure that
-
Float Labels With CSS | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. You’ve probably seen this pattern going around. It’s an input that appears as if it has placeholder text in it, but when you click/tap into that input, that text moves out of the way and allows you to type there. It’s rather clever, I think. Brad Frost has a really good
-
Useful Flexbox Technique: Alignment Shifting Wrapping | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering 40% off for 4 months, and 40 free migrations. I just ran into a situation where I had a title that was split into two sections. The main title, big and bold, left-aligned like any regular title. But then a bit of a subtitle, right-aligned, sitting on the same line as the title. When there is room for that, it’s gre
-
CSS Hacks for IE6,IE7,IE8,IE9 and IE10 - Code Mug
Here are the newest CSS hacks for IE all versions, compatible with Firefox and Chrome. #hack{ color:red; /* All browsers */ color:red !important;/* All browsers but IE6 */ _color:red; /* Only works in IE6 */ *color:red; /* IE6, IE7 */ +color:red;/* Only works in IE7*/ *+color:red; /* Only works in IE7 */ color:red\9; /* IE6, IE7, IE8, IE9 */ color:red\0; /* IE8, IE9 */ color:red\9\0;/*Only works i
-
Checkbox Trickery with CSS
Checkboxes are great. Combine them with the right CSS and you can pull off some really neat tricks. This article aims to showcase some of the creative things you can do with checkboxes. Read on and keep in mind that the demos in this article use no JavaScript. The Basic FormulaIt all starts with the HTML. <input id="toggle" type="checkbox"> <label for="toggle">Nothing tricky there. The for attribu
-
これでよくない？ レスポンシブテーブルの話 | ダーシマ・ヱンヂニヤリング
レスポンシブテーブルという言葉をご存知でしょうか。テーブル（表組み）に対してレスポンシブデザインを適用する手法のことです。既存のものとは少し違った手法を考案したので記事を書きました。 レスポンシブテーブルは一般的に難易度の高いものとされています。沢山の人がいろいろな方法を考案していますが、どんな表組みにも使える汎用的なレスポンシブテーブルの枠組みはまだ登場していません。第一、表組に入る内容はほんとうに様々なので、汎用化という考え方に限界があることは明白なのです。 いくつかの実装パターンは「レスポンシブWebデザインでテーブルを使う時の小技」という人気記事で紹介されています。この記事で紹介されているものの多くは、CSSのdisplayプロパティの値を上書きすることで表組みからリスト形式に組み替えたり、行と列を逆転してスクロールさせて見られるようにしたりといった、ある種、大道芸を見せられている
-
Responsive Tables in Pure CSS - LivingSocial's Technology Blog
We recently overhauled our payment statement tables for mobile web in Merchant Center. Our goal was to meet the following requirements: No javascript. You can find all sorts of plugins to but it’s nice to go with a pure CSS solution if at all possible. The text must be localized so no storing plain text in the stylesheets, nullifying Chris Coyer’s recommendation though the end result is built upon
-
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2024 Hatena. All Rights Reserved.
設定を変更しました