サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
trentwalton.com
Embracing the fluid & flexible aspect of responsive web design was an easy decision, but I’ve been less sure-footed when it comes to balancing that with setting type on the web. From a purely typographic perspective, one could argue that an adaptive approach (where we set breakpoints around fixed-width containers of text to precisely govern measure) is ideal. If a site is only text that may be tru
Expanding Upon Design Systems What if we expanded design thinking to encompass the entire product development process? Design systems have done wonders for helping organizations build digital products. With a design system in place, visual consistency is easier to maintain,... read more The Notification Machine Hello, Black Mirror-ish version of yourself. Welcome to your new job! Many are nervous
I’ve been tinkering with the font-size and the media queries that trigger width-based changes for this site regularly over the past month. I thought that maxing out at 20px for body copy at widths above 900px would be my final answer, but I decided to drop in one more increase last week: media screen and (min-width: 1234px) and (min-height:700px) { body {font-size: 137.5%;} } This bumps body copy
I did my fair share of testing this site on an iPad during development. In most cases, the version of Mobile Safari found on the iPad renders pages like any other standards-based browser. Only when I got to native UI elements like search boxes & text fields did I notice an inconsistency. A pre-set styling was being applied in the way of an inner shadow to text input fields and a gradient overlay t
You’ve gotta appreciate the imageless design elements the CSS box-shadow property makes possible. No more slicing up 3 jpgs to recreate the depth so easily gained in Photoshop. Lately, we’ve been using box-shadow:inset on some Paravel jobs, and I’ve seem some clever uses out there on the intertubes. This property is compatible with Webkit (Safari & Chrome), Firefox, Opera, and IE9, so there’s no r
Originally when I CSSed the round avatars on the DesignSwap comments area, I used the -webkit-mask-image property. I was really proud of how neat and effective this was until I realized you could apply border-radius to an image directly. To achieve a round avatar with a 2px beige border, I applied the following CSS to an avatar loading within a div class called avatar-frame. .avatar-frame{border:
This background-clip: text; property currently only works on -webkit browsers like Safari or Chrome.
Chandler Van De Water had a challenge for me after seeing the header animation in my CSS3 In Transition post. Noticing that I used a PNG image file with knockout transparency, he wanted to the same CSS animation done with selectable text. I was happy to oblige! Of course, at the moment this will only work in Safari and Google Chrome. Click to view the CSS.
I’m a designer & web builder who works with my friends at Luro. Mastodon / Instagram / LinkedIn / Letterboxd / Codepen / GitHub / Dribbble / Twitter / Echo Wolf Luro is launched! Track your components in your product, build a design system, get accessibility and web performance insights, etc. Learn more. New music! Follow and listen along here. We shipped Sherlock Holmes: A Scandal in Bohemia in a
このページを最初にブックマークしてみませんか?
『Home | Trent Walton』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く