Category Archive for: webkit

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


The Shapes of CSS

CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals. We also get the ::before and ::after psuedo elements in CSS, which give us the potential of two more shapes we can add to the original element. By getting clever with positioning, transforming, and many other tricks, we can make lots of shapes in CSS with only a single HTML element. Square #square { width: 100px; height: 100px; background: red; } Rectangle #rectangle { width: 200px; height: 100px; background: red; } Circle #circle { width: 100px; height: 100px; background: red; border-radius: 50% } Oval #oval { width: 200px; height: 100px; background: red;…

Read More →

Creating sliding effects using sticky positioning

Sticky elements are predominantly used for keeping something shown on the screen throughout scrolling. As cool as that is, we can also hide elements in the same way! Here’s a typical (um) sticky situation: See the Pen position:sticky (CSS) by Preethi Sam (@rpsthecoder) on CodePen. Sticky elements (position: sticky;) are very similar to fixed elements ( position: fixed;) in that they both maintain their position on the screen, even as the user scrolls up or down the page. The difference? A sticky element remains confined to the parent container it is in. Compare sticky example above with this one that uses the same concept using a fixed element instead: See the Pen position:sticky (CSS) by CSS-Tricks (@css-tricks) on CodePen. Say we want to create an effect where elements either slide in or out of view on scroll — sort of like parallax. For example, a header that slides out and…

Read More →

Sticky, Smooth, Active Nav

Just like the title says! Here’s a sidebar navigation bar that… Uses sticky positioning. It stays on the screen when it can, but won’t overlap the header, footer, or ever make any of it’s links inaccessible. Scrolls smoothly to the sections you click to. Activates the current nav based on scroll position (it’s a single page thing). See the Pen Sticky, Smooth, Active Nav by Chris Coyier (@chriscoyier) on CodePen. Sticky It’s easy to toss position: sticky; top: 0; on something. But for it to work, it’s gotta be within a taller parent element. So, the unordered list (<ul>) within the navigation (<nav>) works great here. Thanks to the CSS grid layout, the <nav> is as tall as the <main> content area. However, note that that we also gotta position: -webkit-sticky; for iOS. I also tossed in a magic number for the vertical media query so that it doesn’t stick…

Read More →

World wide wrist

After all the hubbub with WWDC over the past couple of days, Ethan Marcotte is excited about the news that the Apple Watch will be able to view web content. He writes: If I had to guess, I’d imagine some sort of “reader mode” is coming to the Watch: in other words, when you open a link on your Watch, this minified version of WebKit wouldn’t act like a full browser. Instead of rendering all your scripts, styles, and layout, mini-WebKit would present a stripped-down version of your web page. If that’s the case, then Jen Simmons’s suggestion is spot-on: it just got a lot more important to design from a sensible, small screen-friendly document structure built atop semantic HTML. But who knows! I could be wrong! Maybe it’s a more capable browser than I’m assuming, and we’ll start talking about best practices for layout, typography, and design on watches.…

Read More →

Overriding Default Button Styles

There are a variety of “buttons” in HTML. You’ve got: <button>Button</button> <input type=”button” value=”Button”> Plus, for better or worse, people like having links that are styled to match the look of other true buttons on the site <a href=”#0″ class=”button”>Button</a> One challenge is getting all those elements to look and layout exactly the same. We’ll cover that a few ways. Another challenge is getting people to use them correctly This is a bit surprising to me — but I hear it often enough to worry about it — is that more and more developers are using <div>s for buttons. As in, they just reach for whatever generic, styling-free HTML is handy and build it up as needed. Andy Bell explains why a real button is better: So, <button> elements are a pain in the butt to style right? That doesn’t mean you should attach your JavaScript events to a <div>…

Read More →

Container-Adapting Tabs With “More” Button

Or the priority navigation pattern, or progressively collapsing navigation menu. We can name it in at least three ways. There are multiple UX solutions for tabs and menus and each of them have their own advantages over another, you just need to pick the best for the case you are trying to solve. At design and development agency Kollegorna we were debating on the most appropriate UX technique for tabs for our client’s website… We agreed it should be a one-liner because the amount of tab items is unknown and narrowed our options down to two: horizontal scroll and adaptive with “more” button. Firstly, the problem with the former one is that horizontal scroll as a feature is not always visually obvious for users (especially for narrow elements like tabs) whereas what else can be more obvious than a button (“more”), right? Secondly, scrolling horizontally using a mouse-controlled device isn’t…

Read More →

Finger-friendly numerical inputs with `inputmode`

Forms are often a nightmare on mobile. We can make the process as pain-free as possible by reacting to context. Input fields that expect numerical values should have a numerical UI. Bringing up a number keyboard on small screens is easy on most platforms — just use a <input type=”number”>. This big button numeric keyboard is finger-friendly and will help prevent users bouncing from your form in frustration. However, type=”number” isn’t appropriate for all numbers. On (most) larger screens, number inputs come with an incrementer/decrementer button. It’s a useful piece of UI we get for free by default. It does, however, make this kind of input totally inappropriate for a credit card number, for example. The default UI for number inputs looks something like this in all desktop browsers The spec itself makes this clear. The type=number state is not appropriate for input that happens to only consist of numbers…

Read More →

1 HTML Element + 5 CSS Properties = Magic!

Let’s say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that’s there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves? The desired results. Well, this article is going to explain just how to do this and then also show how to make things fun by adding in some animation. CSS-ing the Gradient Rays The HTML is just one <div>. <div class=’rays’></div> In the CSS, we need to set the dimensions of this element and we need to give it a background so that we can see it. We also make it circular using border-radius: .rays { width: 80vmin; height: 80vmin; border-radius: 50%; background: linear-gradient(#b53, #f90); } And… we’ve already used up four out of…

Read More →

Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion

Gosh bless the <details> element. Toss some content inside it and you have an accessible expand-for-more interaction with just about zero work. See the Pen Simple details. by Chris Coyier (@chriscoyier) on CodePen. Toss a <summary> in there to customize what the expander text says. See the Pen Multiple Details/Summary by Chris Coyier (@chriscoyier) on CodePen. Works great for FAQs. There is really no limit to how you can style them. If you don’t like the default focus ring, you can remove that, but make sure to put some kind of styling back. Here I’ve used a header element for each expandable section, which has a focus state that mimics other interactive elements on the page. The only browser that doesn’t support this are the Microsoft ones (and Opera Mini which makes sense—it doesn’t really do interactive). This browser support data is from Caniuse, which has more detail. A number…

Read More →

What Houdini Means for Animating Transforms

I’ve been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn’t animate the components of a transform chain individually. This article is going to explain the problem, the old workaround, the new magic Houdini solution and, finally, will offer you a feast of eye candy through better looking examples than those used to illustrate concepts. The Problem In order to better understand the issue at hand, let’s consider the example of a box we move horizontally across the screen. This means one div as far as the HTML goes: <div class=”box”></div> The CSS is also pretty straightforward. We give this box dimensions, a background and position it in the middle horizontally with a margin. $d: 4em; .box { margin: .25*$d auto; width: $d; height: $d; background: #f90; } See the Pen by thebabydino (@thebabydino) on CodePen. Next, with the…

Read More →

CSS Techniques and Effects for Knockout Text

Knockout text is a technique where words are clipped out of an element and reveal the background. In other words, you only see the background because the letters are knocking out holes. It’s appealing because it opens up typographic styles that we don’t get out of traditional CSS properties, like color. While we’ve seen a number of ways to accomplish knockout text in the past, there are some modern CSS properties we can use now and even enhance the effect further, like transitions and animations. Let’s see them in action. Mix Blend Modes There are four blend modes that effortlessly make text cutouts: multiply, screen, darken, and lighten. Applying these to the top element of a stack of image and text, text being at top, creates the knockout design. Even though, in most cases, either black or white is used in these blend modes to get a clear distinction between…

Read More →

Fallbacks for Videos-as-Images

Safari 11.1 shipped a strange-but-very-useful feature: the ability to use a video source in the <img> tag. The idea is it does the same job as a GIF (silent, autoplaying, repeating), but with big performance gains. How big? “20x faster and decode 7x faster than the GIF equivalent,” says Colin Bendell. Not all browsers support this so, to do a fallback, the <picture> element is ready. Bruce Lawson shows how easy it can be: <picture> <source type=”video/mp4″ srcset=”adorable-cat.mp4″> <!– perhaps even an animated WebP fallback here as well –> <img src=”adorable-cat.gif” alt=”adorable cat tears throat out of owner and eats his eyeballs”> </picture> Šime Vidas notes you get wider browser support by using the <video> tag: <video src=”https://media.giphy.com/media/klIaoXlnH9TMY/giphy.mp4″ muted autoplay loop playsinline></video> But as Bendell noted, the performance benefits aren’t there with video, notably the fact that video isn’t helped out by the preloader. Sadly, <video> it is for now,…

Read More →

Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

I recently came across this Pen and my first thought was that it could all be done with just three elements: a wrapper, a range input and an output. On the CSS side, this involves using a conic-gradient() with a stop set to a CSS variable. The result we want to reproduce. In mid 2015, Lea Verou unveiled a polyfill for conic-gradient() during a conference talk where she demoed how they can be used for creating pie charts. This polyfill is great for getting started to play with conic-gradient(), as it allows us to use them to build stuff that works across the board. Sadly, it doesn’t work with CSS variables and CSS variables have become a key component of writing efficient code these days. The good news is that things have moved a bit over the past two years and a half. Chrome and, in general, browsers using Blink…

Read More →

Get Ready for `display: contents;`

Last year I asked, “Will we be flattening our HTML for CSS Grids?” The issue is that the only way for elements to participate in the same CSS grid together (or flexbox for that matter) is for them to be siblings. So, in some cases we might be incentivized to forego HTML semantics for the benefit of layout (not great). One answer to this is display: contents;—a magical new display value that essentially makes the container disappear, making the child elements children of the element the next level up in the DOM. Fast forward to today, Chrome is shipping it, WebKit is shipping it, and Firefox has shipped it. Vote for it in Edge here. Wanna understand it better? Rachel Andrew wrote “Vanishing boxes with display contents” and clarifies how it all works: This value becomes useful if you want to add some element because it makes sense in terms…

Read More →

Simplifying the Apple Watch Breathe App Animation With CSS Variables

When I saw the original article on how to recreate this animation, my first thought was that it could all be simplified with the use of preprocessors and especialy CSS variables. So let’s dive into it and see how! The result we want to reproduce. The structure We keep the exact same structure. In order to avoid writing the same thing multiple times, I chose to use a preprocessor. My choice of preprocessor always depends on what I want to do, as, in a lot of cases, something like Pug offers more flexibility, but other times, Haml or Slim allow me to write the least amount of code, without even having to introduce a loop variable I wouldn’t be needing later anyway. Until recently, I would have probably used Haml in this case. However, I’m currently partial to another technique that lets me avoid setting the number of items both…

Read More →

A Sliding Nightmare: Understanding the Range Input

You may have already seen a bunch of tutorials on how to style the range input. While this is another article on that topic, it’s not about how to get any specific visual result. Instead, it dives into browser inconsistencies, detailing what each does to display that slider on the screen. Understanding this is important because it helps us have a clear idea about whether we can make our slider look and behave consistently across browsers and which styles are necessary to do so. Looking inside a range input Before anything else, we need to make sure the browser exposes the DOM inside the range input. In Chrome, we bring up DevTools, go to Settings, Preferences, Elements and make sure the Show user agent shadow DOM option is enabled. Sequence of Chrome screenshots illustrating the steps from above. In Firefox, we go to about:config and make sure the devtools.inspector.showAllAnonymousContent flag…

Read More →

How Domino’s Pizza Stands Out In A World Awash In Pizza

Domino’s Pizza was in the spotlight of the Wall Street Journal the other day. It was a front page story on the success of the Domino’s mobile app allowing you to track your order from start to delivery.Over 480,000 people have left reviews on the Apple app store giving it 4.8 stars out of 5.In the modern world, we continue to have more and more options for things like coffee, rides to the airport, clothes, and pizza. And as we get more and more options, they just become noise.Domino’s though has been successful at breaking through with a signal. Why?There are two very big lessons to take from the pizza chain and one potential pitfall.Open UpGiselle Auger, an assistant professor at Rhode Island College, involved 290 participants in a study on the effect of transparent organizations. It probably doesn’t shock you that the more transparent these organizations were to the outside world, the…

Read More →

Can You Sell Water? Part 2

Abraham Celio and Maria Mendez own Yolis Tamales on Chicago’s Southwest Side.Some of the tech industry’s most vaunted companies revel in their origins as mavericks or rule-breakers, having flouted regulations in the name of disruption. That kind of risk-taking is celebrated in Silicon Valley but punished in other places, most notably minority communities.body[data-twttr-rendered=”true”] {background-color: transparent;}.twitter-tweet {margin: auto !important;}Undercover @usparkpolicepio handcuffing kids on @NationalMallNPS for selling water. — @timkreppfunction notifyResize(height) {height = height ? height : document.documentElement.offsetHeight; var resized = false; if (window.donkey && donkey.resize) {donkey.resize(height); resized = true;}if (parent && parent._resizeIframe) {var obj = {iframe: window.frameElement, height: height}; parent._resizeIframe(obj); resized = true;}if (window.location && window.location.hash === “#amp=1” && window.parent && window.parent.postMessage) {window.parent.postMessage({sentinel: “amp”, type: “embed-size”, height: height}, “*”);}if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.resize) {window.webkit.messageHandlers.resize.postMessage(height); resized = true;}return resized;}twttr.events.bind(‘rendered’, function (event) {notifyResize();}); twttr.events.bind(‘resize’, function (event) {notifyResize();});if (parent && parent._resizeIframe) {var maxWidth = parseInt(window.frameElement.getAttribute(“width”)); if ( 500 < maxWidth) {window.frameElement.setAttribute(“width”, “500”);}}In this episode of…

Read More →

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 navigate to slides. Or you might want both. Or you might want to combine all that with autoplay. I’m gonna go ahead and say that sliders are complicated enough of a UI component that it’s use JavaScript territory. Flickity being a fine example. I’d also say that you can get pretty far with a nice looking functional slider with HTML and CSS alone. Starting that way makes the JavaScript easier and, dare I say, a decent example of progressive enhancement. Let’s consider the…

Read More →

Back to Top