はてなブックマーク

• あとで読む

  Coding Randomized Zelda Patterns

  3 users

  cloudfour.com

  I’ve been really enjoying the latest Zelda game, Tears of the Kingdom. One of the ways the game creates a cohesive aesthetic is by repeating patterns between the game environment and interface screens. There was one pattern in particular that I was drawn to. This repeating circle motif can be found throughout the game’s many shrines and on interface screens. The pattern is even used on the officia

  • テクノロジー
  • 2023/07/15 10:20
• あとで読む

  The Power of CSS Blend Modes

  4 users

  cloudfour.com

  I knew CSS blend modes could create some cool effects, but even so, a CodePen I saw recently left me shocked at what they’re capable of. See the Pen Apple inspired Pride clock by Scott Kellum (@scottkellum) on CodePen. This CodePen, by Scott Kellum, really caught my eye. I could see it was HTML text for the numbers, but I wasn’t sure how he created the radial line effect. When I dug into the code,

  • テクノロジー
  • 2022/09/14 22:22

  • css
• あとで読む

  Which SVG technique performs best for way too many icons?

  4 users

  cloudfour.com

  When I started giving talks about SVG back in 2016, I’d occasionally hear a question I never had a great answer for: What if you have a lot of icons on a page? You see, many attendees were interested in transitioning away from icon fonts. But while SVG offers a more accessible, reliable and powerful alternative, there’s no denying that browsers have an easier time displaying thousands of text char

  • テクノロジー
  • 2021/10/29 08:38

  • svg
  • performance
  • image
• あとで読む

  Responsive Images the Simple Way

  3 users

  cloudfour.com

  Long-time Cloud Four readers will be familiar with Jason’s definitive series on responsive images. This article is meant as a shorter companion piece focused on the most common responsive image use case: resolution switching. The responsive images spec is fantastic and covers a lot of use cases, but in my experience, most of the time you’ll only need to understand one of them: Serving a different

  • テクノロジー
  • 2020/04/08 09:07

  • HTML
  • image
• あとで読む

  Simple Image Placeholders with SVG

  4 users

  cloudfour.com

  We do a lot of rapid prototyping at Cloud Four, which means we’re often working with incomplete or hypothetical content. When it comes to FPO images, we’ve relied on a few different solutions: Third-party services like Placehold and placekitten serve up placeholders based on a URL. You can roll your own image placeholder server using libraries like LIPS or SVG Placeholder. Holder.js uses JavaScrip

  • テクノロジー
  • 2020/01/30 06:57

  • JavaScript
  • tips
• あとで読む

  CSS Circles

  25 users

  cloudfour.com

  I’m Cloud Four’s resident expert on circles. I didn’t plan to be. A while back, we worked on a project that involved a lot of circles… circular containers, circular thumbnails, circular buttons. Before I knew it, I became the guy to talk to if you were having trouble with circles and CSS. But I’ll let you in on a secret: There’s not a lot to know. By the end of this article, I have a feeling you’l

  • テクノロジー
  • 2019/10/18 10:34

  • CSS
  • あとで読む
  • Web制作
• あとで読む

  See No Evil: Hidden Content and Accessibility

  3 users

  cloudfour.com

  When I first started learning web development I thought hiding content was simple: slap display: none; onto your hidden element and call it a day. Since then I’ve learned about screen readers, ARIA attributes, the HTML5 hidden attribute, and more! It’s important to ensure our websites are accessible to everyone, regardless of whether or not they use a screen reader, but with this myriad of options

  • テクノロジー
  • 2019/03/08 19:34

  • html
• あとで読む

  Designing Button States

  6 users

  cloudfour.com

  Buttons are a staple of any design system. The best ones are simple, versatile, maybe even a little fun. But there’s a lot of hidden complexity in these jolly, candylike controls and toggles… complexity that’s easy to overlook when we focus on the same old default and hover states in our designs. In truth, mouse effects are probably the least important state to design for. By accounting for more f

  • テクノロジー
  • 2018/03/14 10:04

  • html
  • ui
  • css
  • デザイン
  • design
• あとで読む

  Apple Starts Work on Progressive Web Apps

  3 users

  cloudfour.com

  That loud noise you heard yesterday was collective glee from web developers excited to see the first signs that Apple has started working on Progressive Web Apps. What prompted the glee was a WebKit ticket and associated patch created by Apple engineer Brady Eidson that showed the first bits of development on service workers, a key technology for Progressive Web Apps. Still, people were reluctant

  • テクノロジー
  • 2017/08/11 22:09
• あとで読む

  Breaking Out With CSS Grid Layout

  6 users

  cloudfour.com

  A while back I shared a simple technique for allowing certain elements to fill the full viewport width from within a fixed-width container: .u-containProse { max-width: 40em; margin-left: auto; margin-right: auto; } .u-release { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } Code language: CSS (css) As concise as this technique was, it had one big, dumb caveat: On some platform

  • テクノロジー
  • 2017/05/15 13:50

  • css
• あとで読む

  State of Responsive Images 2017

  3 users

  cloudfour.com

  To start with, we should acknowledge that we’re in fantastic shape compared to where we were in 2010 when I first wrote about responsive images. The new responsive images standards are available in all current browsers with the exception of Opera Mini. And if your fallback image is optimized for small screens—which it should be—Opera Mini’s lack of support isn’t a problem. I still get questions fr

  • 暮らし
  • 2017/03/02 10:50
• あとで読む

  Responsive Images 201: Client Hints

  4 users

  cloudfour.com

  Last year, I wrote a ten-part series called Responsive Images 101 that introduced the new responsive images syntax. Today, I want to continue that series by talking about Client Hints. As the title indicates, this is an advanced responsive images topic. However, despite being potentially complex to implement, Client Hints can make the day-to-day task of creating responsive images much easier for d

  • 世の中
  • 2016/09/23 14:55

  • RWD
• あとで読む

  Cropping Image Thumbnails with SVG

  6 users

  cloudfour.com

  Our friend Aaron Parecki recently blogged about a technique he used for centering and cropping image thumbnails using CSS. It’s a clever technique used by WordPress (and many others), but it requires a containing element with explicit dimensions, making it less than ideal for responsive design. Using SVG, we can make a cropped image that still acts like an image. No CSS required, works in IE9 and

  • テクノロジー
  • 2016/08/19 18:42

  • SVG
  • image
  • idea
  • css
• あとで読む

  The Business Case for Progressive Web Apps

  3 users

  cloudfour.com

  Technical articles about Progressive Web Apps abound, but few tackle the question of why businesses should build Progressive Web Apps and why they should do so now. Progressive Web Apps describe a collection of features that were previously only available in native applicationsFootnote 1 . These features includeFootnote 2 : Extremely fast load times Ability to use apps offline (without an internet

  • テクノロジー
  • 2016/07/22 20:08

  • web
• あとで読む

  Breaking Out With Viewport Units and Calc

  5 users

  cloudfour.com

  While iterating on a new article layout for the impending Cloud Four redesign, I encountered an old CSS layout problem. For long-form content, it’s usually a good idea to limit line lengths for readability. The most straightforward way to do that is to wrap the post content in a containing element: .u-containProse { max-width: 40em; margin-left: auto; margin-right: auto; } Code language: CSS (css)

  • テクノロジー
  • 2016/06/04 20:27

  • CSS
  • webデザイン
  • デザイン
• あとで読む

  Autofill: What web devs should know, but don’t

  13 users

  cloudfour.com

  Many people know that you can scan your credit card in Mobile Safari. But how many web developers know how to create a form that supports that feature? Not many I’d bet. Auto-Fill Credit Card Forms Using Your iPhone’s Camera in iOS 8. Used with permission. It doesn’t help that Apple has provided zero documentation on how the scan credit card feature works. But there is another factor at play here.

  • テクノロジー
  • 2016/05/23 10:21

  • browser
  • autofill
• あとで読む

  Responsive Logo Composition With SVG

  3 users

  cloudfour.com

  You appear to be offline, some content may be unavailable. Logos are an ideal use-case for SVG. Because they’re typically designed for reproduction and versatility, they’re almost always vector to begin with. SVG’s support of CSS and media queries means we can adapt brand imagery depending on the display size, a technique artfully documented by the likes of Andreas Bovens, Ilya Pukhalski, Sara Sou

  • テクノロジー
  • 2016/04/22 15:38

  • SVG
• あとで読む

  Case Study: Our SVG Icon Process

  18 users

  cloudfour.com

  When I wrote about why you shouldn’t use icon fonts in your next web project, I had no idea it would spark so much heated debate and intense discussion. One recurring question stood out to me: How might one actually implement an SVG icon system? It’s a surprisingly difficult question to answer. Should you use <img>, <svg>, <object> or pure CSS? Will you combine your icons into a single sprite or k

  • テクノロジー
  • 2016/02/03 06:03

  • SVG
  • icon
  • css
  • SVGスプライト等
• あとで読む

  A Responsive Guide to Type Sizing

  3 users

  cloudfour.com

  When starting new projects, a CSS builder’s initial concerns tend to involve typography. Setting a typographic foundation with the right mixture of ingredients can form something solid enough to support many other building blocks of design. It’s an approach that makes structural sense. Proportions are a key ingredient to the mixture. Calibrating your type proportions for a balance of aesthetics an

  • テクノロジー
  • 2015/12/22 05:56

  • css
• あとで読む

  Seriously, Don’t Use Icon Fonts

  36 users

  cloudfour.com

  Icons are everywhere. These “little miracle workers” (as John Hicks described them) help us reinforce meaning in the interfaces we design and build. Their popularity in web design has never been greater; the conciseness and versatility of pictograms in particular make them a lovely fit for displays large and small. But icons on the web have had their fair share of challenges. They were time-consum

  • テクノロジー
  • 2015/11/25 01:25

  • font
  • あとで読む
  • health
  • UI
• あとで読む

  Responsive Images 101, Part 1: Definitions

  3 users

  cloudfour.com

  Over the last few years, we’ve written a quite a few articles about responsive images. Now that responsive images have landed in browsers, it seemed like a good time to step back and cover the basics for those who are just starting to tackle responsive images. Ergo, a new series of articles called Responsive Images 101 that will cover everything from why we need responsive images to how to pick th

  • テクノロジー
  • 2015/09/09 10:17

  • image
• あとで読む

  Responsive Images 101, Part 8: CSS Images

  3 users

  cloudfour.com

  Most of the time when people refer to responsive images, they are referring to inline images, not CSS images. This is because before <picture> and srcset there were no good solutions for inline responsive images. When it comes to CSS images, we could always use media queries. So why worry? But now it is time to revisit responsive CSS images and look at the solutions anew based on what we’ve learne

  • テクノロジー
  • 2015/06/06 12:49

  • image
  • css
  • development
  • *あとで
• あとで読む

  Responsive Images 101, Part 2: Img Required

  4 users

  cloudfour.com

  One of the main reasons why we need solutions for responsive images is because the <img> element is insufficient. It only has one src and we need multiple sources. Given that fact, it may be surprising that we’re going to start by talking about the <img> element instead of the new, shiny toys like <picture> and srcset. No matter what responsive images solution you use, <img> is required. The <img>

  • テクノロジー
  • 2015/03/19 00:24

  • HTML
  • 画像
• あとで読む

  Don’t use <picture> (most of the time)

  19 users

  cloudfour.com

  Browser support for the picture specification is landing and as Marcos Cáceres said, it is time to “go forth and <picture> all the things!” Except you shouldn’t. You shouldn’t <picture> all the things. But you should start using picture now for responsive images. No reason to wait. Confused? You’re not alone. Standards are developed in non-linear fashion. Ideas evolve and merge. And often at the e

  • テクノロジー
  • 2014/09/24 00:33

  • picture
  • responsive
  • HTML
  • image
  • IT
• あとで読む

  Media Queries in SVG images

  6 users

  cloudfour.com

  “Wait? What was that Bruce Lawson just said?” That was my reaction last week as I listened to the audio from Bruce’s presentation at Responsive Day Out conference. What had Bruce said that blew my mind? It was the fact that you can embed media queries inside SVG images. Maybe this is common knowledge for everyone else, but I was stunned by the news. Today I finally got a moment to research this fu

  • テクノロジー
  • 2013/04/04 10:10

  • svg
  • css
  • *あとで
• あとで読む

  8 Guidelines and 1 Rule for Responsive Images

  11 users

  cloudfour.com

  I recently had the opportunity to work with a company that is moving to a responsive design and has over 800,000 images on their site. These images come from all over the world. I learned a lot about what it means to tackle images in a responsive design on a large scale. One of the big lessons is that we spend a lot of time discussing what the frontend solutions for responsive images should be—the

  • テクノロジー
  • 2013/04/04 00:00

  • responsive
  • image
  • ***
  • *webデザイン
  • webdesign
  • *あとで
• あとで読む

  Safari 6 and Chrome 21 add image-set to support retina images

  19 users

  cloudfour.com

  30 Jan 2013 — This is not a stable specification. It will likely change. Do not use it in a production environment. See Peter’s comment below. 30 Jan 2013 — Per Nicholas Shanks’s suggestion, I’ve removed examples for non-WebKit browsers because we don’t know how those browsers will implement the feature and if the syntax will be the same. Safari 6 and Chrome 21 added vendor-prefixed support for th

  • テクノロジー
  • 2012/08/15 11:39

  • image-set
  • CSS
  • Retina
  • webkit
  • browser
  • HTML5
• あとで読む

  How Apple.com will serve retina images to new iPads

  4 users

  cloudfour.com

  You appear to be offline, some content may be unavailable. One of the more interesting questions raised by the new iPad and its retina display is whether or not web sites should deliver higher resolution images when there is no way to know the connection speed. AppleInsider found that Apple.com is being prepped to deliver high-res images and documented how you can test it in Safari on your desktop

  • テクノロジー
  • 2012/07/20 21:15

  • responsive
  • retina
  • image
  • apple

次のページ