See the Pen Fluency – CIT261 by Bermon Painter Here’s Mario With Today’s Weather by ErreC The included video background really completes the look. Scroll down further and see what things will look like in three-hour increments. Right from the start, you’ll find the current temperature and other relevant data. Here’s a beautiful widget that grabs your location and shows you what to expect through midnight the next day. See the Pen Weather card by The Coding Aviator Now and Beyond by Bermon Painter It’s proof that you don’t need to overwhelm users with too much design to keep them informed. The result is a weather widget that’s relatively minimal yet noticeable. It’s location-based, features a card-like container, and uses simple animation. This snippet combines several aspects of the other examples on this list. See the Pen Show the Local Weather by Den McHenry Gentle Waves by The Coding Aviator The Google Map in the background is also a nice touch. This snippet is a prime example, as it detects your location and shows the current weather. Location-based services are great for bringing relevant information to your site’s visitors. See the Pen some weather icon svgs by Nat Your Local Weather on Demand by Den McHenry They would make a great addition to any weather app. Even better is that they’re vector and can scale to any size. The animated movements are intuitive and noticeable – but not over the top. This collection of animated SVG icons are razor-sharp. See the Pen Animated Weather Icons(pure CSS) by Akhil Sai Ram SVG Movement by Nat They offer a way to stand out without taking up too much space. While they’re a bit larger in this example, the styles lend themselves to small icons as well. They’re a bit on the abstract side, with simple animations that add personality. Here’s a group of CSS3 icons that look boldly different than your typical weather imagery. See the Pen Simple Weather App Design by Colin Espinas Abstract Icons by Akhil Sai Ram Plus, the included hover effects are sure to grab a viewer’s attention.
The use of familiar, rounded shapes and high color contrast makes for easy viewing. What makes this weather UI work is its simplicity. See the Pen Animated Weather Cards by Steve Gardner Simply Beautiful by Colin Espinas Rain, snow, and sun rays burst outside of the card’s confines. Everything you need is all in one neat and tidy space.īut this snippet breaks away from tradition, and it animates various weather scenarios that go beyond that little card. Start Downloading Now! Weather Beyond Borders by Steve GardnerĬard-based UIs seem to be a natural fit for weather data.