Where Lines Break is Complicated. Here’s all the Related CSS and HTML. Say you have a really long word within some text inside an element that isn’t wide enough to hold it. A common cause of that is a long URL finding it’s way into copy. What happens? It depends on the CSS. How that CSS is controlling the layout and what the CSS is telling the text to do. This is what a break-out text situation mi
Viewport units were introduced with the CSS Values and Units level 3 spec. They allow to size elements and font sizes as a percentage of the total width or height of the user’s screen (the viewport). Let’s explore what we can accomplish design-wise by making use of these units in our CSS. vh & vwvh stands for viewport height and vw is for viewport width. Hence, setting an element to a width value
スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案(Working Draft)の段階 で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポート されています。 position: stickyの仕様 ブラウザ・サポート状況(Can I use…) フィーチャー・クエリ(@supports) と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃいますよ」というデモからご紹介します。 面白い使い方 基本的な使い方だけでも便利なスティッキーですが、応用するとスクロール効果のような面白い使い方ができます。以
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Michał Sajnóg, a front end developer at Netguru. Michał has created one of those “when you scroll to here, trigger this animation” libraries. One of the things I like about it is that it leaves as much as it can to CSS for creating and controlling the animati
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. How do you make a spreadsheet-like interface responsive without the use of any JavaScript? This is the question I’ve been asking myself all week as I’ve been working on a new project and trying to figure out how to make the simplest spreadsheet possible. I wanted to avoid us
Grid areas and the element that occupies them aren’t necessarily the same size. That’s a good little thing to know about CSS grid. I’m sure that is obvious to many of you, but I’m writing this because it was very much not obvious to me for far too long. Let’s take a close look. There are two players to get into your mind here: The grid area, as created by the parent element with display: grid; The
With a single line of CSS we can completely reorient any element on our page – we can move it, rotate it, resize it, or send it into another dimension (to an extent). This all comes to us via the transform property. While it is a single property, a lot of functionality is packed into it, and it can be confusing how all its values combine to create its end result. Let’s discuss some of the basics a
You can get pretty far in making a slider with just HTML and CSS A “slider”, as in, a bunch of boxes set in a row that you can navigate between. You know what a slider is. There are loads of features you may want in a slider. Just as one example, you might want the slider to be swiped or scrolled. Or, you might not want that, and to have the slider only respond to click or tappable buttons that na
The section below about safe area insets was updated on Oct 31, 2017 to reflect changes in the iOS 11.2 beta. Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not obscured by the rounded corners, or the device’s sensor housing. The inset area is filled with the
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Apple’s iPhone X has a screen that covers the entire face of the phone, save for a “notch” to make space for a camera and other various components. The result is some awkward situations for screen design, like constraining websites to a “safe area” and having white bars on t
Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS "Eliminate render-blocking JavaScript and CSS". It's the one Google Page Speed Insights suggestion that I always get stuck with. When a web page is accessed, Google wants it to only load what's useful for the initial view, and use idle time to load anything else. That way, the user can see the page as early as possible. There are
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Developer Ben Frain once remarked that it’s easy to write CSS code, but it is hard to scale and support it. This article describes the set of solutions out there to deal with this problem. OOCSS OOCSS stands for object-oriented CSS. This approach has two main ideas: Separation of structure a
People have been using grid designs in magazines, newspapers, posters, etc. for a long time before the Web appeared. At the point when web developers started to create web pages, many of them were based on a grid layout. Different solutions have been used to create grid layouts, like tables, floats, inline blocks, or flexboxes, but all of these techniques have different issues when you try to defi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く